نوار منو چیست؟

در این باره فکر کنید: منوی سایت شما در واقع لیستی بدون‌شماره از لینک‌هاست.

آن‌ها را داخل تگ‌های <ul> قرار دهید.

• لینک 1
• لینک 2
• لینک 3
• لینک 4
• لینک 5

نوار منوی افقی

ما می‌توانیم از CSS برای کنترل نحوه نمایش این لیست‌ها در صفحه‌های‌مان بهره ببریم.

با استفاده از display:inline ما می‌توانیم منوهای افقی بسازیم.

(مرورگر Firefox 2 میزان padding (فاصله اطراف اجزا) را در حالت نمایش inline در صفحات راست‌به‌چپ (dir="rtl") به‌صورت نادرستی اعمال می‌کند. در این‌جا برای دور زدن این باگ می‌توان از افزودن خاصیت float:right به li و تعیین مقداری برای خاصیت height جز ul استفاده نمود. این باگ در نسخه 3 این مرورگر برطرف شده است. -مترجم)

این کدی است که برای این منو به کار رفته است:

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

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

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-right: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 1em 0.25em 0.5em;
border-top:1px solid gray;
width: 100%;
display: block
}

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

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

برای اطلاعات بیشتر، مقاله Mark Newhouse را با عنوان رام کردن لیست‌ها در مجله A List Apart، و "Styling lists" را در و??? CSS-Discuss ببینید.