24

How To Create An Auto Expanding Navigation Menu Using CSS

title16
Share!

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.

1

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.

[html]<div id=”navigation”>
<ul id=”menu”>
<!– Step 2 code goes here –>
</ul>
</div>[/html]

Step 2:

Now we need to create the HTML menu. You need to replace the <!– Step 2 code goes here –> with the following code…

To List WordPress Pages, put…

[php]<?php wp_list_pages(‘title_li&link_after=<span></span>’); ?>[/php]

To List WordPress Categories, put…

[php]<?php wp_list_categories(‘title_li&link_after=<span></span>’); ?>[/php]

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

[html]<li><a href=”url”>Nav 1<span></span></a></li>
<li><a href=”url”>Nav 2<span></span></a></li>
<li><a href=”url”>Nav 3<span></span></a></li>[/html]

Don’t Delete the <span></span> 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 <div id=”navigation”> part). Put this in your CSS file…

[css]#navigation {
width: 100%;
background: #000;
height: 46px;
padding: 10px 0px 0px 12px;
}[/css]

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 <ul id=”menu”> and all the <li> parts within it). Here is my CSS code, but you can alter it to fit your website style.

[css]#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#menu li {
float: left;
font-size: 12px;
font-weight: bold;
}

#menu a {
display: block;
line-height: 38px;
padding: 0px 17px 0px 17px;
color: #FFFFFF;
font-family: Arial, sans-serif;
font-weight: 100;
}

#menu a:hover {
background: url(navb1.png) no-repeat top left;
padding: 0px 7px 0px 17px;
margin-right: 5px;
}

#menu a:hover span {
color: #FFFFFF;
background: url(navb2.png) no-repeat top right;
padding: 13px 5px 13px 0px;
position: relative;
left: 12px;
}[/css]

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…

1

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.

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy KoHow To Create An Auto Expanding Navigation Menu Using CSS

Comments 24

    1. Andy

      Its a nice simple method. I think in 2010, I might just change this to use CSS 3 and just have a background image, and then round the corners off using CSS 3. Maybe apply a border image aswell.

      But I want more browsers to adopt CSS 3 first.

      1. Niranjan Thilak

        It would be nice with all the CSS3effects especially the transitions effects but i guess we will be dead by the time IE supports it fully.

        When the time comes for ending
        Tag, Web will be a lot more speedier,faster, and hell lot cooler.

  1. Code Dude

    sweet tut. I often wonder how many web designers there are under the age of 20…some of them are pretty good too!

  2. Gaurav Mali

    Can you show us a “preview” of one that you actually made?

    (even though the instructions are really simple, I wanted to test it out in ie6, and I am too lazy to create it by myself..lol)

    1. Andy

      Its “exactly” just like the one we have at the top of WebDesignDev, but without the gradient in the background.

  3. Phil

    You don’t need the span on there, use the ‘li’ for one part and the ‘a’ for the other part, then pad the ‘a’ and display it block (to get the top and bottom padding to work right) and job done without additional markup.

    What the WP code would be to create that link is, I don’t know – I don’t use it :)

    1. Luke

      lol dude i do. :D i dirtbike and surf and stuff. this is a hobby still, i do it at night and on the weekends when it rains sometimes.

      im not a total nerd :D

  4. Jason

    Good writeup, cleaner markup than most solutions, although I like Phil’s note about using the li element for one of the backgrounds. I don’t have IE6 or 7 available to me at the moment, but if the “a:hover span” selector works properly in older versions of IE(back when only “a” elements could have :hover effects) that would be the push for the method shown here. If this method breaks in older versions of IE, then I would go with Phil, instead of using the span, use a style on li:hover for one of the background images.
    In regards to CSS3 methods to reproduce this effect – it should also be possible to do this once support of multiple background images comes into the mainstream, although this is still some ways off – further off than say, border radius support – but will hopefully allow much more semantic support of expanding boxes. Not to mention, multiple backgrounds will allow expansion of a box on both the x and y axis simultaneously, instead of only allowing the element to grow along one axis at a time as this method shows.

  5. Sharon

    Thanks for this. I customized it for a template I’m working on. With a little tweaking of the padding, I got it to work great in IE8, Chrome and Safari. Lo and behold, the right side is shifted by one pixel in Firefox and doesn’t show up at all in older versions of IE. Working on a solution. If I figure one out, I’ll post it.

    Meanwhile, I managed to get it to work in FF and IE8 with an IE hack, but then it doesn’t work in the other two. If only I could hack them all with custom stylesheets. But that doesn’t do anything for the IE7 and below issue.

    I hear you on not being pixel perfect these days, but this particular effect looks far too obvious to just let it go. I’m trying not to have to go to a static width, but might have to just to get this job out the door. Thanks for the fun playing with it though. It’s been bookmarked.

Leave a Reply

Your email address will not be published. Required fields are marked *