Flyoutmenu
Het flyout menu is een variant op het basis menu en het puldownmenu.
Hieronder een voorbeeld van een flyout menu. Wanneer de cursor een listitem met sub items raakt, wordt deze aan de rechterkant zichtbaargemaakt en is dan ook weer door zoekbaar. Hieronder staat de cursor op 2011.
HTML
We maken geneste opsommingen die we binnen de div zijmenu plaatsen.
<div id="zijmenu">
<ul>
<li><a href="/index.shtml">Home</a></li>
<li><a href="/agenda/index.shtml">Agenda</a></li>
<li><a href="/bestuur/index.shtml">Bestuur</a></li>
<li><a href="/contact/index.shtml">Contact</a></li>
<li><a href="/ingezonden/index.shtml">Ingezonden stukken</a></li>
<li><a href="/nieuws/index.shtml">Nieuws</a>
<ul>
<li><a href="/nieuws/2011/index.shtml">2011</a></li>
<li><a href="/nieuws/2010/index.shtml">2010</a></li>
<li><a href="/nieuws/2009/index.shtml">2009</a></li>
<li><a href="/nieuws/2008/index.shtml">2008</a></li>
<li><a href="/nieuws/2007/index.shtml">2007</a></li>
<li><a href="/nieuws/2006/index.shtml">2006</a></li>
</ul></li>
<li><a href="/nieuwsbrief/index.shtml">Nieuwsbrieven</a></li>
............
</ul>
</div>
Stylesheet
#zijmenu {margin:0 0 10px 0; padding:0}
#zijmenu ul {margin:0; padding:0; list-style-type:none; width:160px;}
#zijmenu ul li {position:relative}
#zijmenu ul li a {display:block;text-decoration:none;background:#c9c9a7;color:#000;height:24px;padding-left:5px;border:1px solid #fff;border-width:1px 1px 0 0;line-height:22px}
#zijmenu ul li:hover a {color:#fff;background:#b3ab79;}
#zijmenu ul li ul {display:none}
#zijmenu ul li:hover ul {display:block;position:absolute;top:0;left:160px;width:175px;}
#zijmenu ul li:hover ul li a {display:block;background:#b3ab79;color:#000;}
#zijmenu ul li:hover ul li:hover a {background:#dfc184;color:#fff;}
#zijmenu ul li:hover ul li ul {display: none;}
#zijmenu ul li:hover ul li:hover ul {display:block;position:absolute;top:0;left:175px;width:175px}
#zijmenu ul li:hover ul li:hover ul li a {display:block;background:#dfc184;color:#000;}
#zijmenu ul li:hover ul li:hover ul li:hover a {background:#bd8d5e;color:#fff;}
#zijmenu ul li:hover ul li:hover ul li ul {display:none}