Tall wide navigation tabs

wide nav tabs

If there is one thing that I am semi-consistent with [in regards to site navigation], it’s wide [tall] tabs. Larger clickable real estate makes it a little easier for readers to get where they want to go without having to position their mouse pointer over the limited click area of standard text links.

Here’s how I achieve tall, wide, and equally spaced tabs.

First, the markup:

<div id="header">
<div id="widetabs">
<ul id="widenav">
<li><a id="link1" href="#">linkone</a></li>
<li><a id="link2" href="#">linktwo</a></li>
<li><a id="link3" href="#">linkthree</a></li>
</ul>
</div>
</div>

Followed by the necessary CSS:

#widetabs {
font-size: 120%;
width: 60em;
margin: 0 auto;
}
#widenav {
background: #7a8356;
height: 12em;
}
ul#widenav {
list-style: none;
margin: 0;
padding: 0;
}
#widenav li {
float: left;
text-transform: lowercase;
width: 9em;
border: 1px solid #656C4A;
border-width: 0 0 0 1px;
}
#link3{
border: 1px solid #656C4A;
border-width: 0 1px 0 0;
}
#widenav li a {
color:#ddd;
text-decoration: none;
line-height:2em;
display:block;
width:9em;
padding-top: 10em;
}
#widenav li a:hover {
color:#eee;
background: #88925f;
}

The above code was tested in IE6, IE7, Opera 8, and Firefox 1.5. Interested in a working demo? Feel free to leave any comments, questions, or feedback.

Discuss - 13 Comments

  1. brett says:

    very cool! you have me thinking now lol

  2. Poldo says:

    Very nice! err, how can I put something like this on my blog?

  3. Derek says:

    Poldo, you’re already running Foliage on your page. The navigation that I used on that theme is a variant of the tutorial above.

  4. Poldo says:

    Yeah, but how can I make the entire thing stretch into the whole page and act as a header? (I hope you understood the question.)

  5. Derek says:

    An explaination in the comments would be long winded. I recommend analyzing the source above, the source code for Foliage Mod, and adapting it for your own use.

    It looks like you’ve already cleared out the header from Foliage on your page, just replace the old header navigation that came with the theme with the code I’ve posted above.

  6. Poldo says:

    Yes, I was just about to do that but then again, once MrClean is released, I’m gonna redesign it again ~. ‘Just like someone who posted on your flickr…”quit making me redo my site”. (I mean it in a good way, of course.)

  7. Derek says:

    I’ve slowed down a bit haven’t I? I’m usually on a 2-3 week turn over rate.

  8. Poldo says:

    Doesn’t mater. It’s your theme, so you’re the one who has control over when and what to release. We’re only priveleged to have you creating cool themes for us.

  9. Shaun says:

    So, I used your myspace tutorial thing, and now I want to make these my home, groups, search…buttons. Can I just place them in the css and html code on my profile?

  10. Derek says:

    Shaun, not sure if you’re still tracking this, but the above buttons can indeed be dropped into MySpace. There would be some definite tweaking involved as MySpace – in my own experience – does not recognize em’s as units of measurement. Rather than em, you will have to convert into px’s. The entire overwould would definitely accept the tabs though after a little experimenting.

  11. [...] Now, time for my shameless self plug: Tall wide navigation tabs. I show you how I manage to get my favorite tall wide tabs working. [...]

  12. [...] I didn’t initially intend to copy his style. I wanted to incorporate a tutorial about wide-tabbed navigation by Derek Punsalan in his October Special theme. When all was said and done, I realized just how [...]

  13. Shanel says:

    I tried to apply your code to MySpace and for two hours tried tweaking before asking for help the only thing that’s showing up is the underlined links lining up vertically down the top of the page . I have no idea what to do i even converted the em to pixels.