Czym są menu nawigacyjne
Logicznie rozumując menu nawigacyjne na Twojej stronie jest nieuporządkowaną listą linków.
Dlatego należy je zgrupować za pomocą listy nieuporządkowanej (tagiem <ul>
).
- link1
- link2
- link3
- link4
- link5
Poziome menu
Lista linków nie wygląda jak menu, ale za wygląd jest odpowiedzialny CSS. Można nim w pełni kontrolować jak taka lista ma być wyświetlone na stronie.
Nadając właściwość display:inline
można zrobić listę poziomą.
Oto kod powyższego menu:
#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;
}
Pionowe menu
Oto kod dla niego:
#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
}
Więcej informacji znajdziesz w artykule Marka Newhouse'a, Taming lists w magazynie A List Apart oraz Styling lists na wiki CSS-Discuss.