The Blog

How To Make CSS Expanding Rounded Navigation Menus & Buttons

Posted on 10/06/09 in blog, development about CSS, HTML, tutorial

Expanding navigations and buttons are great when you anticipate additions to your navigation, or are unsure of the amount of content. Since I started this blog after I redesigned my site, I ended up having to squeeze the blog link in. Since this, of course, presented browser problems, I decided to go ahead and making my navigation automatically expandable to my items. It’s pretty easy, a litte bit more work upfront, but will save you more work done the work if you do this in the first place. We’ll use my navigation as the example.

Step 1 : The Navigation

First you need to cut out the navigation as a whole in Photoshop:

Step 2 : The Images

Then you need to slice it up into three parts: The left end curve, the right end curve and only a tiny piece of the middle (since we can repeat that), like this:

After you’ve saved those three images (this tutorial will also work for buttons btw), we’re ready for the HTML

Step 3 : The HTML

Now, we’ll need to create our HTML. The end corners will be placed as a background span, and the repeating middle background, as a background for the “a” elements. Here’s what we’ve got:

<div id="nav">

<span class="rightNav"></span>

This specifies the right corner

<span class="navRepeat">

navRepeat span repeats your background to the amount of a tags you have

<a title="Contact Amber Weinberg" href="Contact-Professional-Web-Development-Graphic-Design">contact</a></span>
<span class="navRepeat">
<a title="Wordpress Blog of Design, Development and Freelance Tips from Nasville Freelancer Amber Weinberg" href="./blog/">blog</a></span>
<span class="navRepeat"><a title="Web Development" href="Development-Work-Professional-Graphic-Design ">web development</a></span>
<span class="navRepeat"><a title="Graphic Design and Web Design" href="Graphic-Design-Work-Professional-Web-Development">graphic design</a></span>

<span class="navRepeat"><a title="Home" href="index.php">home</a></span>
<span class="leftNav"></span>

This specifies the left corner

</div>

Step 4 : The CSS

Now for the fun part. We need to use our container (#nav) to specify the spacing and to specify the MAX width of the nav, before it messes up the rest of the layout. Make sure you add your background spans (float them) and specify a width and height for the left and right side only. Should look like this:

#nav { float: right; width: 550px; height: 59px;  }
.leftNav { float: right; width: 14px; height: 59px; background: url('images/leftNav.jpg') no-repeat; }
.rightNav { float: right; width: 14px; height: 59px; background: url('images/rightNav.jpg') no-repeat; }
.navRepeat a { float: right; height: 40px; background: url('images/navRepeat') repeat-x; }

Step 5 : The Result

Look above for the result (I have a little bit of extra CSS up there) You get something that works perfectly in IE6+ and real browsers Now you can add content, up until your max width; and you can also remove content and never have to mess with the css/widths/styles ever again Don’t you love it when it’s easy?

Tomorrow we’ll learn how to do proper CSS image rollovers

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet