Stressed worker worried about getting home to see her family

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>).

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.

>
Scott Design