Susanne's Examples for navigation bars

skip to content , skip to navigation

General settings

This page is written in XHTML 1.0 strict and iso-8859-1 encoding. It is a demonstration of various styles for navigation bars, using unordered lists, a subheading h3 within the list and a two-level list.

I am not fond of drop down lists, and so far, my site does not really need it.

It soes not validate, because I used the li#aktiv elemtent in each example navigation. If you copy my example and include into a proper page, there is just one and the validator will accept it.

Be that as it may, I wanted it to be colourful and different from my usual pages.

I hope you like it too, it is flexible.

go back to top

Example 1

CSS for example 1

This is a classical navigation bar, a simple list of links, one point is declared #aktiv , this point shows the currently open page.

I can not make the declaration element a display:block, because of my anchor attached to h2.

Element CSS
div#navigation 
{
width: 15em 
}
ul 
{ 
color:          #000;
background:      #fffacd;
text-align:      center;
list-style-type: none;
margin:          1ex;
padding:         1em;
border:          solid 1px
}
ul li 
{
padding-top: 2px;
padding-bottom: 2px
}
#navigation a:link, #navigation a:visited, #navigation a:focus, #navigation a:hover, #navigation a:active 
{ 
display: block;
border-left: 10px solid
}
ul li#aktiv 
{
margin-top:    2px;
margin-bottom: 2px;
padding:       1ex; 
}

go back to top

Example 2

CSS for Example 2

This is also a classical navigation bar. The difference is made by declaring display: inline for the li - element. The list is centered.

I did not use float, therefore the links will overlap each other on a small sreen.

To make them still readable I used the title attribut for each link.

Element CSS
div#navigation 
{
width: 100% 
}
ul 
{ 
color:       #000; 
background: #fffacd; 
list-style-type: none; 
margin:     1ex;
padding:    1em;
border: solid 1px 
}
ul li 
{
display: inline
}
#navigation a:link, #navigation a:visited, #navigation a:focus, #navigation a:hover, #navigation a:active 
{ 
margin: 2ex 1ex; 
border-left: 10px solid 
}
ul li#aktiv 
{
margin: 1ex;
padding: 1ex
}

go back to top

Example 3

CSS for Example 3

This is a more complicated navigation bar. This navigation bar contains a h3 element for subheadlines within the navigation.

Instead of background and border, the list style element is used to distinguish the links from each other.

The list-style element is supressed for ul li and ul li ul li, it is instead given to the links.

Element CSS
div#navigation 
{
width: 15em 
}
#navigation ul 
{ 
background: #ffa500;
list-style-type: none;
margin: 1ex;
padding: 1ex
}
#navigation ul ul 
{
background: transparent;
margin:            0 0 0 1em;
padding:           0 
}
#navigation ul li h3 
{
color:       black;
font-size:    1.1em;
font-weight:  bold;
margin:       0;
padding:      1ex 0 0;
border-style: none
}
#navigation a:link, #navigation a:visited, #navigation a:focus, #navigation a:hover, #navigation a:active 
a:link { list-style-type: disc }
a:visited { list-style-type: disc }
a:focus { list-style-type: square }
a:hover { list-style-type: circle }
a:active { list-style-type: square }
#navigation a:link, #navigation a:visited, #navigation a:focus, #navigation a:hover, #navigation a:active 
{ 
background: transparent;
list-style-position: inside;
display: list-item;
margin-top: 2px; 
margin-bottom: 2px; 
border-style: none;
}
ul li#aktiv 
{
text-decoration: none;
background: #ffd700;
border-style: none 
}