How's this menu done?!

[daveyboy1984]

Does anyone know how this menu is done?
http://www.huhmagazine.co.uk/

I think it's java over just normal rollover image as there seems to be a quick fade.

I really like the simplicity and classiness of it and wondering how to go about creating it.

Many Thanks.

[jscheuer1]

That would be javascript, not java, which is completely different.

But it looks like it's neither. Looks like it's pure css. Here's the markup:


<div id="nav">
<ul>
<li class='on'> <a href="http://www.huhmagazine.co.uk">home</a></li>
<li class="off"><a href="http://www.huhmagazine.co.uk/art">art &amp; design</a></li>
<li class="off">
<a href="http://www.huhmagazine.co.uk/music">music</a></li>
<li class="off"><a href="http://www.huhmagazine.co.uk/film">film</a></li>
<li class="off"><a href="http://www.huhmagazine.co.uk/culture">culture</a></li>
<li class="off"><a href="http://www.huhmagazine.co.uk/video">video</a></li>
<li class="off"><a href="http://www.huhmagazine.co.uk/listings">what's on</a></li>
<li class="off"><a href="http://shop.huhmagazine.co.uk">shop</a></li>
<li class="off"><a href="feed://www.huhmagazine.co.uk/blog/rss/feed.php">RSS</a></li>
<li class="search_mag">
<img src="http://www.huhmagazine.co.uk/images/template/mag.jpg">
</li>
<li class="search">
<form action="http://www.huhmagazine.co.uk/search.php" method="get" name="search" class="search_box">
<input type="text" class="search_input" name="q" value="" onFocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</form>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>

Here's the css:


#nav {
width:984px;
text-align: left;
padding: 0;
margin: 12px 0px 0px 0px;
float: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}

#nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline;
float: left;
width: 984px;
}

.off {
display: inline;
}

.off a {
font-family: Times New Roman, Times;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 16px;
margin: 2px 1px 2px 0px;
color: #000;
text-decoration: none;
float:left;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
}

.off a:hover {
background: #000;
color: #FFF;
text-decoration: none;
}

.on {
display: inline;
}

.on a {
font-family: Times New Roman, Times;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 5px 16px;
background: #000;
margin: 2px 1px 2px 0px;
color: #FFF;
float:left;
text-decoration: none;
}

There's more css, for like other pages where there's another level to the menu.

I can't find a credit, so it might be proprietary. If it is we're not allowed to lift it for you. I'd try contacting the webmaster or site owner to find out where they got it from or if it's in house.

But the principles should be pretty clear from what I have shown you.

There are tons of css menus available here at Dynamic Drive, see:

http://www.dynamicdrive.com/style/csslibrary/category/C1/

And tons more around the web, Google:

css menu

[vwphillips]

if you are refering to the top menu (home etc) it is css and has no fade although that could be added using js

having anoither look the css for a color transition of .2 of a second but has no effect on my IE or FF browsers

[daveyboy1984]

so if I was to create rollover images in dreamweaver would it pretty much have the same effect as what's on their site?

For some reason their CSS looks different, like there's a fade in there somewhere. Maybe it's just me going crazy!

Thanks.

[jscheuer1]

I detected no fading, look again. But that could be done with javascript.

To answer your question, yes. However, the page you linked to as an example uses no images. To get the same effect with images, the images would have to be preloaded and of a small byte size.