How To Create An Auto Expanding Navigation Menu Using CSS

One of our readers has emailed in saying that they would like to know how we have made our navigation menu rollover effect, in which a background image expands to the length of each text link in the menu. I have decided to write a tutorial on how we have done this for the WebDesignDev navigation. But first here is the email…

Hey Web Design Dev,
I am Luke Marohn, i am 13 and i also design and develop websites. i’m pretty pro with designing, HTML and CSS, but this is something i cant figure out.
I see this on almost all sites, it has to do with the navigation, it seems as though (for your main navigation) when you roll over “home” or “contact” the width of the green bar is changed to fit the link. i am pretty sure you have a tutorial on that but i cant find it. if you didn’t make a tut on this can you? or send me to another site that has a tutorial on how to do this?
Hopefully this made sense…
Thanks man! i love your blog as well. keep it up!
Luke.

What Are We Making?

We are making a navigation menu with a background image that will expand depending on how long each text link is in the menu. Here is WebDesignDev’s one, but of course you can modify your colours, height, and more a less everything about the menu. Its the base code that matters.

Step 1:

First you need to put these div tags where you would like the menu to go. It doesn’t matter if its a WordPress theme, HTML file, whatever, it will still work.

view source

print?

1.<div id="navigation">

2.<ul id="menu">

3.

4.ul>

5.div>

Step 2:

Now we need to create the HTML menu. You need to replace the with the following code…
To List WordPress Pages, put…

view source

print?

1.'title_li&link_after='); ?>

To List WordPress Categories, put…

view source

print?

1.'title_li&link_after='); ?>

If you want to make this menu in a website that doesnt use WordPress, then you can put something like this…

view source

print?

1.<li><a href="url">Nav 1<span>span>a>li>

2.<li><a href="url">Nav 2<span>span>a>li>

3.<li><a href="url">Nav 3<span>span>a>li>

Don’t Delete the at the end of each link, or the right hand side of the menu won’t work!

Step 3:

Now that the main menu has been done, we need to style it. First off we are going to style the actual navigation background (the

part). Put this in your CSS file…

view source

print?

1.#navigation {

2.width: 100%;

3.background: #000;

4.height: 46px;

5.padding: 10px 0px 0px 12px;

6.}

For now we will keep it simple and put the navigation background as black. But of course you can edit this later and put a background, edit the padding etc to suit your website.

Step 4:

Now to style the actual menu (the

and all the
• parts within it). Here is my CSS code, but you can alter it to fit your website style.
  
  view source
  

  
  

  print?
  

  01.#menu, #menu ul {
  

  02.padding: 0;
  

  03.margin: 0;
  

  04.list-style: none;
  

  05.line-height: 1;
  

  06.}
  

  07. 
  

  08.#menu li {
  

  09.float: left;
  

  10.font-size: 12px;
  

  11.font-weight: bold;
  

  12.}
  

  13. 
  

  14.#menu a {
  

  15.display: block;
  

  16.line-height: 38px;
  

  17.padding: 0px 17px 0px 17px;
  

  18.color: #FFFFFF;
  

  19.font-family: Arial, sans-serif;
  

  20.font-weight: 100;
  

  21.}
  

  22. 
  

  23.#menu a:hover {
  

  24.background: url(navb1.png) no-repeat top left;
  

  25.padding: 0px 7px 0px 17px;
  

  26.margin-right: 5px;
  

  27.}
  

  28. 
  

  29.#menu a:hover span {
  

  30.color: #FFFFFF;
  

  31.background: url(navb2.png) no-repeat top right;
  

  32.padding: 13px 5px 13px 0px;
  

  33.position: relative;
  

  34.left: 12px;
  

  35.}
  
  The 2 most inportant things in the above CSS code are the 2 images navb1.png and navb2.png. Below you can right click “save image as” to download each image.
  
  
  • navb1.png – (download) – This is the image that expands depending on the length of each link on the menu.
  • navb2.png – (download) – This image is the corner piece on the right hand side of each link that cuts off from navb1 to make the link background complete.
  You need to make sure the 2 images are places in the same folder as your CSS file. Of course you can move them to a different folder, but remember to update the URL of each image in the CSS file in order for the menu to work properly.
  
  
  * * * * *
  
  With the WebDesignDev navigation, we have styled it with a custom gradient background, to make it look like this…
  
  I hope this tutorial has been of use. If you have any problems then please drop a comment below and ill try and solve your problem.
  The menu works fine on Internet Explorer 8, Firefox (mac & windows), Opera and Safari. I’m not sure about older browsers, but heh what website is 100% perfect on the net these days.