04/04/2007 - Wednesday

This entry is about CSS menus, so skip this if it doesn't interest you!

On and off for a while now I've been trying to get a decent looking centred horizontal tab menu for my websites. I did create one that looked good, but it was limited to being on either the left or the right side of the page (or the container that it was in). I wanted one that was centred in the middle, but this just wasn't possible with the old CSS as the tabs were actually floated li elements inside a ul. I was also turning the hyperlinks into rounded top tabs using Nifty Corners Cube, so I couldn't just display: inline; the li's as the a's need to have display: block; for the corners to be properly rounded, and if you combine the two then it looks like a mess.

I tried one method of centring the tabs by having left: 50%; on the ul and then right: -50%; on the li's. This actually centred the menu, but unfortunately it caused the horizontal scrollbars to appear even though there was no content in the extra area (shifting the ul over by 50% was the cause, as it is a block element and the width stays the same). When I noticed the scrollbar I attempted to find a better solution as the scrollbar was annoying.

I tried switching it over to using a definition list to "define" the menu, but this suffered from the same problems and also introduced some new ones.

Eventually I found a real solution, one that I probably should have seen, but I didn't actually know that it existed. Instead of floating the li elements so that I can use display: block; on the a elements, I was able to display: inline; the li elements and then display: block-inline; the a elements. block-inline does exactly what it says: makes the element act like a block, but keeping it inline. With the li's inlined and the a's block-inlined, I was able to use text-align: center; on the ul element and everything is now in the middle!

I managed to find the display: block-inline; bit of css on a website, but I can't remember which it was now. Every other website that I found about centred css tab menus were using funky padding to make the a elements clickable like block elements.

Here's an example of the menu that I have:

<ul id="nav">
  <li><a href="/dashboard" id="menu-dashboard">Dashboard</a></li>
  <li><a href="/weights" id="menu-weights">Weights</a></li>
  <li><a href="/sizes" id="menu-sizes">Sizes</a></li>
  <li><a href="/logout" id="menu-logout">Logout</a></li>
</ul>

And the CSS that makes it into a centred menu:

ul#nav, ul#nav li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#nav {
  font-size: 80%;
  text-align: center;
}

ul#nav li {
  display: inline;
  margin-left: 3px;
  text-align: center;
}

ul#nav li a {
  background-color: #0e5fd6;
  color: #fff;
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  width: 100px;
}

ul#nav li a:hover {
  background: #cdffa1;
  color: #006a35;
}

ul#nav li.activelink a, ul#nav li.activelink a:hover {
  background: #fff;
  color: #003;
}

This gives the tabs a blue background colour and white text, which changes to a light green background colour and a darker green text when the mouse hovers over the hyperlink.

I give all the a elements an id attribute so that I can switch the currently selected tab by outputting some extra css in the head of the html. This way I don't need to add an extra class attribute to the selected tab, which would make the menu creation more harder (I did it this way before though). The CSS for the selected tab would look something like this:

ul#nav li a#menu-dashboard, ul#nav li a#menu-dashboard:hover {
  background: #fff;
  color: #003;
}

which gives the selected tab a white background and a bluey black text on both the normal and hover states. Here's a picture of what the tabs look like (only showing the three states of the tabs, not an actual centred menu):



The Dashboard tab is the selected tab, Weights has the mouse over it (not visible in the picture though), and Sizes is a normal tab.