نوار منو چیست؟
در این باره فکر کنید: منوی سایت شما در واقع لیستی بدون‌شماره از لینک‌هاست.
آنها را داخل تگ‌های <ul> قرار دهید.
- لینک 1
- لینک 2
- لینک 3
- لینک 4
- لینک 5
نوار منوی افقی
ما می‌توانیم از CSS برای کنترل نحوه نمایش این لیست‌ها در صفحه‌های‌مان بهره ببریم.
با استفاده از display:inline ما می‌توانیم منوهای افقی بسازیم.
- لینک 1
- لینک 2
- لینک 3
- لینک 4
- لینک 5
(مرورگر 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;
}
نوار منوی عمودی
- لینک 1
- لینک 2
- لینک 3
- لینک 4
- لینک 5
این هم کدی است که برای این منو به کار رفته است:
#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 ببینید.
