Drop down navigation

19 April 2009

Drop down navigation is actually quite useful when you have a few navigation items and then more subnavigation items, but how is best to implement this on your website?

Well for starters, I'm not going to go into flash as I don't use it.

The first way is to use Javascript. This would usually consist of the navigation along the top and then some div or other tag that is set to "display:none" in a style sheet, then when you hover on the main navigation link it will have a "onfocus:" or "onmouseover:" action which will then call upon a Javscript function to show the hidden div or tag.

Using Javascript means that you can do fancy things - like animating the menu as it expands. But Javascipt can be turned off - and so then they wouldn't see the drop downs - unless using a "<noscript>" but this will show them all at the same time.

The method of displaying drop down navigation that I use is through the use of CSS and unordered lists.

Embedding a "<ul>" tag within a "<li>" tag makes the bulleted list stick out a little further than the original bulleted list.

This also enables us to make use of 2 lots of "<li>" tags within the CSS, for example:

ul li:hover ul li {
color:#ff0000;
}

This says that when hovering over the item in the first list, the embedded list item's text colour goes red.

So putting this all together here's some code:

On the HTML page:

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2 a</a></li>
<li><a href="#">Link 2 b</a></li>
<li><a href="#">Link 2 c</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

On the CSS page:

ul li ul {
display:none;
}

ul li:hover ul {
display:block;
}

There's more you'll need in order to line up the sub navigation, to lay it all out, to remove the bullet points, etc... But it's a start for you to experiment with.

http://www.peternichol.com/entry/trackback/87/

Please leave a comment using the form provided.