חוג פיתוח אתרי אינטרנט

1. חוג פיתוח אתרי אינטרנט שיעור 11

2. בשיעור נלמד עיצוב תפריטי ניווט: • תפריט אנכי • תפריט אופקי • תפריט פירורי לחם • תתי תפריטים תפריט פירורי לחם תפריט ניווט

3. תפריט ניווט תפריט ניווט הוא אובייקט באתר שמטרתו לאפשר ניווט בין העמודים. • את תפריט הניווט אנו נעטוף בתג הסמנטי <nav>מבחינת HTML, אנו נתייחס לתפריט הניווט כרשימה. <nav> <ul> <li><ahref="#"title="לעמוד 1">לעמוד1</a></li> <li><ahref="#"title="לעמוד2">לעמוד2</a></li> <li><ahref="#"title="לעמוד3">לעמוד3</a></li> <li><ahref="#"title="לעמוד4">לעמוד4</a></li> </ul></nav>

4. עיצוב תפריט הניווט • שלב א: עלינו להחליט האם תפריט הניווט יהיה אופקי או אנכי • במידה ולא נעשה כל שינוי בעיצוב התפריט יהיה אנכי • במידה ונרצה שהתפריט יהיה אופקי נכתוב את הקוד הבא בקובץ ה css שלנו • li מתייחס לכל פריט בתוך התפריט עצמו navul li { display: inline-block; }

5. עיצוב תפריט הניווט • כעת נוסיף צבע רקע, רוחב וגובה לתפריט הניווט navul li { display: inline-block; list-style: none; width: 100px; height: 50px; background-color: blue; text-align: center; }

6. עיצוב תפריט הניווט • שימו לב, מכיוון שכל פריט בתפריט הניווט מכיל קישור לעמוד אחר, עלינו לעצב גם את הקישורעצמו, כלומר להוסיף (a). וכמו כן, להוסיף פעולה שמתרחשת בעת מעבר עכבר a:hover navul li a { color: orange; font-size: 24px; text-decoration: none; } navul li a:hover { color: yellow; cursor: pointer; }

7. תת תפריט

8. יצירת תת תפריט • מאחר ותפריט הוא אלמנט המוגדר בעזרת רשימה, הגיוני שתת תפריט יוגדר על ידי רשימה בתוך רשימה <nav> <ul> <li><ahref="#"title="לעמוד 1">לעמוד1</a></li> <li><ahref="#"title="לעמוד2">לעמוד2</a> <ul> <li><ahref="#"title="תת תפריט 1">תת תפריט 3</a></li> <li><ahref="#"title=" תת תפריט 4">תת תפריט 4</a></li> </ul></li> <li><ahref="#"title="לעמוד3">לעמוד3</a></li> </ul></nav> פתיחת הפריט השני פתיחת רשימה שניה סגירת רשימה שניה סגירת הפריט השני

9. יצירת תת תפריט • תחילה ניתן הגדרה לתת התפריט שהוא לא יוצג ושמיקומו יהיה קבוע. • לאחר מכן נגדיר שרק במעבר עכבר על פריט הרשימה, תת התפריט בתוכו יוצג navul li ul { display: none; position: absolute; } navulli:hoverul { display: block; }

10. יצירת תפריט פירורי לחם • תחילה נגדיר רשימה כפי שהגדרנו בתפריטים הקודמים <nav> <ul> <li><ahref="#"title="דף הבית">דף הבית</a></li> <li><ahref="#"title=“עמוד שני">עמוד שני</a></li> <li>עמוד שלישי</li> </ul></nav>

11. עיצוב תפריט פירורי לחם navul li { display: inline-block; } navul li:after { content: “>"; color: red; } navulli:last-child:after { content:"" ; } נגדיר את התפריט כאופקי נוסיף חץ שמאלי מיד לאחר הפריט נגדיר שבפריט האחרון לא יהיה חץ