Suvash Thapaliya : 19 since 85 : 19 since 85

Thanks to everyone for such a warm response to my re-appearance on the net.


Since some of my friends liked the menu behaviour in this blog, I decided to share about the creation process. The CSS involved is really simple, it’s a neat trick actually. And yes, this isn’t my invention, this has been around a lot but isn’t that popular.


To begin with i assume you do HTML/CSS a bit, simply <marquee> won’t do .


You can download the source (with sample images) and continue with the tutorial below. If you wish to follow along, just rename the working files provided (html and css) and then make your own new files ( with same names, of course).


Well, here you go, the menu deconstructed.

1. Like always begin with clean markup.

I prefer using unordered lists for the menu items, it makes a semantic markup too.

<h2>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
     </ul>
</h2>


Make sure you have included the <ul></ul> inside other tags. Anything would do. I have used <h2></h2> above. We will need this later, as it will serve as the container for the menu items.
I’m using only a two item menu, but that will show the trick.

2. Add classes to the menu items to get the CSS hooks on…

Add classes to the items, so that you can manipulate them through CSS later

<h2 class="menu">
     <ul>
          <li class="home"><a href="#">Home</a></li>
          <li class="contact"><a href="#">Contact</a></li>
     </ul>
</h2>

Add the following to your CSS file
h2.menu { margin:auto; width:280px; } /* Change the values as your menu requires */
h2.menu ul{}
h2.menu li{list-style:none;}
h2.menu li.home {width:140px;}
h2.menu li.contact{width:140px;}
This should set-up your menu. Now, on to the exciting part.

3. Add Image Replacements for the anchor, with the “out” images.

Use CSS to fill the menu items with images, make sure to check the image path.


h2.menu li.home a{background:url(../images/home.gif) no-repeat; width:140px; height:90px; display:block;}
h2.menu li.contact a{background:url(../images/contact.gif) no-repeat; width:140px; height:90px; display:block;}


The menu is now displayed with it’s normal “Out” state.

4. Add Image Replacements for the anchor , but on :hover for container, with the “blur” image.

h2.menu:hover li.home a{background:url(../images/home_blur.gif) no-repeat;}
h2.menu:hover li.contact a{background:url(../images/contact_blur.gif) no-repeat;}

As you can see, the menu is already coming to life, with the blurs on rollover.

5. Finally, add Image Replacements for the :hover for anchor, with the “over” images.


h2.menu li.home a:hover{background:url(../images/home_over.gif) no-repeat;}
h2.menu li.contact a:hover{background:url(../images/contact_over.gif) no-repeat;}

Once again make sure that your image paths are correctly replaced, else the mnu might not work.

6. Optionally, you can use the invisible span technique to get rid of the text in the menu.

Add the following to the CSS file
.invisible{display:none;}
and following changes to HTML

<h2 class="menu">
     <ul>
          <li class="home"><a href="#"><span class="invisible">Home</span></a></li>
          <li class="contact"><a href="#"><span class="invisible">Contact</span></a></li>
     </ul>
</h2>


Voila, the menu is now fully working. Make sure, that the CSS styles are written in the order presented, else the menu might not work.


To remind, you can download the source and get your hands dirty.


Hope you liked this short tutorial. Please, i need feedbacks

Leave a Reply