מהם תפריטי ניווט?

חשוב על זה: הניווט שלך הוא למעשה רשימה לא מסודרת של קישורים.

תבנה אותם בתוך תגי <ul>.

• קישור1
• קישור2
• קישור3
• קישור4
• קישור5

תפריטי ניווט אופקיים

אנו יכולים להשתמש ב-CSS כדי לשלוט בהצגת הרשימות הללו בדפים שלנו.

אנו יכולים ליצור תפריטי ניווט אופקיים על-ידי שימוש ב-display:inline.

להלן הקוד המשמש ליצירת תפריט ניווט זה:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

תפריטי ניווט אנכיים

להלן הקוד המשמש ליצירת תפריט ניווט זה:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

למידע נוסף ראה מאמרו של מרק ניוהאוס Taming lists שנמצא באתר A List Apart ו-"Styling lists" שנמצא ב-CSS-Discuss wiki.