A selection of css horizontal and vertical menus

The five menus with expainations & css details

Preamble

While updating the menu on this site, I experimented with quite a few different css menu types. Along the way I put together various menus, which I've uploaded and added for anyone who cares to use them. In the end we ended up with a simpler 2 tier version of our original 3 tier menu, which I'll add at a later date.

Menu one uses no images and is purely a css construct. Menu two makes use of the opacity css command and the last three menus utilise the image rollover or sliding doors effect.

The horizontal menu html

If you want to have a one colour/image menu the html markup is as follows :

<ul id="menu_h">
<li class="nav1"><a href="menu1.html">Menu One</a></li>
<li class="nav1"><a href="menu2.html">Menu Two</a></li>
<li class="nav1"><a href="menu3.html">Menu Three</a></li>
<li class="nav1"><a href="menu4.html">Menu Four</a></li>
<li class="nav1"><a href="menu5.html">Menu Five</a></li>
</ul>

The vertical menu html

<ul id="menu_v">
<li class="nav1"><a href="menu1.html">Menu One</a></li>
<li class="nav1"><a href="menu2.html">Menu Two</a></li>
<li class="nav1"><a href="menu3.html">Menu Three</a></li>
<li class="nav1"><a href="menu4.html">Menu Four</a></li>
<li class="nav1"><a href="menu5.html">Menu Five</a></li>
</ul>

Using different colours/images for each section

If you want to have a different colour/image for each section of the menu the html markup (horizontal menu) is as follows :

<ul id="menu_h">
<li class="nav1"><a href="menu1.html">Menu One</a></li>
<li class="nav2"><a href="menu2.html">Menu Two</a></li>
<li class="nav3"><a href="menu3.html">Menu Three</a></li>
<li class="nav4"><a href="menu4.html">Menu Four</a></li>
<li class="nav5"><a href="menu5.html">Menu Five</a></li>
</ul>

Then add a new class for .nav2, .nav3, etc in the css file, specifying your new colour/image for that class.

The css

The css will vary slightly for all 5 menus, but has the same basic structure. To use the css, copy and paste the code on the following pages into an html editor and save with a .css extension.

Then add a line like the one below in the <head>...</head> section of the html :

<link rel="stylesheet" type="text/css" media="all" href="new_menu.css" />

If you want to edit the css in the same html page you are working on, copy it into the html between these :

<style type="text/css">
css code goes here
</style>

again this is placed in the <head>...</head> section of the html.