A 2 level horizontal menu is not that
difficult to create using CSS. If you keep it all text-based it should
be doable once you know the basics. But how about the creation of such
menu using images only for the purpose of having the extra graphical
freedom?
The structural code doesn't contain any images. For every button we
use a different id. These id's are then styled. The text will be
replaced by images, used as a background. Here is an excerpt of the
code:
<ul id="navigation"><br /> <li id="home" title="link to homepage"><a href="#" >Home</a></li><br /> <li id="products" title="link to products"><a href="#">Products</a><br /> <ul><br /> <li id="softw" title="link to software"><a href="#">Software</a></li><br /> <li id="hardw" title="link to hardware"><a href="#">Hardware</a></li><br /> </ul><br />...</pre>
<p>The trick is using "text-indent: -9999px" (this places the text
outside the browser window) and use one image (the entire navigation)
as a background.</p>
<p>The navigation of the first level contains two images
(navigation.gif and navigation_over.gif). For some reason, my rollover
effect didn't work using only one image, it does work however in the
second level. Since it works in the second level I have no idea why it
doesn't in the first one :-S</p>
<pre> ul#navigation li a {<br /> border: 0;<br /> display: block;<br /> height: 25px;<br /> background: url(navigation.gif) no-repeat;<br />}<br /><br />ul#navigation li a:hover {<br /> border: 0;<br /> display: block;<br /> background-image: url(navigation_over.gif);<br />}<br /></pre>
<p>By using background positioning, width, height and "display:block"
we 'reveal' each button of the navigation. Here is an example of the
support button:</p>
<pre>li#support a {<br /> width: 67px;<br />}<br /><br />li#support a:link, <br />li#support a:visited, <br />li#support a:hover { <br /> background-position: -264px 0px;<br />}
What I wanted is that when you roll over the submenu that the image
of the first level is still in the rollover state. I have no idea if
this is possible, but I think it is, only have no idea how. If anyone
has suggestion please don't hesitate to share, thanks.
posted in: WebStandards |
