نوار منو چیست؟
در این باره فکر کنید: منوی سایت شما در واقع لیستی بدونشماره از لینکهاست.
آنها را داخل تگهای <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 ببینید.
