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

11שיעור

נלמד בשיעור

: ניווט תפריטי עיצוב

אנכי • תפריט

אופקי • תפריט

לחם • פירורי תפריט

תפריטים • תתי

לחם פירורי תפריט

תפריט ניווט

ניווט תפריט

. העמודים בין ניווט לאפשר שמטרתו באתר אובייקט הוא ניווט תפריט

הסמנטי • בתג נעטוף אנו הניווט תפריט <nav>את.HTMLמבחינת כרשימה, הניווט לתפריט נתייחס אנו

<nav> <ul> <li><a href="#" title=" 1לעמוד "<1לעמוד </a></li>

<li><a href="#" title=" 2לעמוד "<2לעמוד </a></li><li><a href="#" title=" 3לעמוד "<3לעמוד </a></li><li><a href="#" title=" 4לעמוד "<4לעמוד </a></li>

</ul></nav>

הניווט תפריט עיצוב• : א אנכי שלב או אופקי יהיה הניווט תפריט האם להחליט עלינו

אנכי • יהיה התפריט בעיצוב שינוי כל נעשה ולא במידה

הבא • הקוד את נכתוב אופקי יהיה שהתפריט ונרצה ה במידה שלנו cssבקובץ

•li עצמו התפריט בתוך פריט לכל מתייחס

nav ul li { display: inline-block;}

הניווט תפריט עיצוב• , הניווט לתפריט וגובה רוחב רקע צבע נוסיף כעת

nav ul li { display: inline-block; list-style: none; width: 100px; height: 50px; background-color: blue; text-align: center;}

הניווט תפריט עיצוב• , , הקישור את גם לעצב עלינו אחר לעמוד קישור מכיל הניווט בתפריט פריט שכל מכיוון לב שימו

להוסיף, ) כלומר , aעצמו עכבר(. מעבר בעת שמתרחשת פעולה להוסיף כן a:hoverוכמו

nav ul li a { color: orange; font-size: 24px; text-decoration: none;}

nav ul li a:hover{ color: yellow; cursor: pointer;}

תפריט תת

תפריט תת יצירת• , רשימה בעזרת המוגדר אלמנט הוא ותפריט מאחר

ידי על יוגדר תפריט שתת רשימה הגיוני בתוך רשימה

<nav> <ul> <li><a href="#" title=" 1לעמוד "<1לעמוד </a></li> <li><a href="#" title=" 2לעמוד "<2לעמוד </a>

<ul><li><a href="#" title=" תפריט תפריט "< 1תת 3תת </a></li><li><a href="#" title=" תפריט תפריט "< 4תת 4תת </a></li>

</ul> </li> <li><a href="#" title=" 3לעמוד "<3לעמוד </a></li> </ul></nav>

השני הפריט פתיחת

השני הפריט סגירת

שניה רשימה פתיחת

שניה רשימה סגירת

תפריט תת יצירת•. קבוע יהיה ושמיקומו יוצג לא שהוא התפריט לתת הגדרה ניתן תחילה

• , יוצג בתוכו התפריט תת הרשימה פריט על עכבר במעבר שרק נגדיר מכן לאחר

nav ul li ul { display: none; position: absolute;}

nav ul li:hover ul { display: block;}

לחם פירורי תפריט יצירתהקודמים • בתפריטים שהגדרנו כפי רשימה נגדיר תחילה

<nav> <ul> <li><a href="#" title=" >" הבית הבית דף דף </a></li>

<li><a href="#" title=“ >" שני שני עמוד עמוד </a></li><li> שלישי <li/>עמוד

</ul></nav>

לחם פירורי תפריט עיצוב

nav ul li { display: inline-block;}

nav ul li:after { content: “>"; color: red;}nav ul li:last-child:after { content:"" ; }

כאופקי התפריט את נגדיר

הפריט לאחר מיד שמאלי חץ נוסיף

חץ יהיה לא האחרון שבפריט נגדיר