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
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
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
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 } |