menu.horizontal
Need a quick flyout menu? Four steps to obtain one:
'one' that was tested in ie5.01, ie5.5, ie6, ie7, o8, ff1, ff2
you may want to try a not so another (pie) approach to solution.
(they were quicker and are superior to my code, i admit, but a little more complex)
Describe the menu structure in pure html using nested unordered lists.
<ul> <li> <a href="#">About us</a> <ul> <li><a href="#">Profil</a></li> <li><a href="#">References</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Ask</a></li> </ul> </li> <li><a href="#">Corporate</a></li> <li><a href="#">News</a></li> <li><a href="#">Login</a></li> <li><a href="#">Contact</a></li> </ul>
Download menu.horizontal [4kB] website building block and include it in your document head element
<head> <script src="alib.common/script.js" type="text/javascript"></script> <script src="menu.horizontal/script.js" type="text/javascript"></script> <link type="text/css" href="menu.horizontal/style.css" rel="stylesheet"> </head>
Mark top-level ul of your menu with class name "hmenu" so it becomes a recognized website building block.
<ul class="hmenu"> ... </ul>
Optionally modify stylesheet file to adjust colors and dimensions
menu.horizontal/style.css
Enjoy your drop-down menu in css/js enabled browser:
And see it perfectly accessible otherwise:
Download menu.horizontal.up [4kB] website building block if you wanna submenus to show above the base menu. Don't forget to include menu.horizontal.up/script.js script and menu.horizontal.up/style.css stylesheet instead!