Background: I'm building a typical css menu that works perfectly fine as a prototype, however, I am now adding in the additional visual details.

Problem: I'm hoping to code these up using just CSS and markup to allow for menus to be created & edited in the underlying CMS. The problem (as you can see by looking at the image) is that there is a small detail centered on the bottom border on each button when it is in the active state (the home button in the screenshot).

I haven't yet spent much time in prototyping this though I have considered a number of options and was hoping that someone else had already implemented something like this... so far I've considered using a set of divs and background images, however, that will make the underlying markup all sorts of complex.

Finally, as is the way of these things, I also need it to look good in IE.

Any ideas?

  • Just to clarify.. the problem I'm having isn't related to making it work in IE (yet) as much as I'm trying to style the menu dynamically such that each :active item has the centered graphical detail on the bottom border regardless of the item width. Matthew over 9 years ago
  • Ahhh I see. Perhaps have a flat bottom graphic to the active element then wrap a span around the text. Then just have the 'point' bit of the button assigned to the .active span so it sits in the centre. jamie over 9 years ago
  • This is probably what I'm going to end up doing.. :) Matthew over 9 years ago

3 answers

jamie 10

I don't think you can achieve this is CSS alone.

If your building in PHP you could use a statement at the top of each page to say which page it is.

< ?php $page="home"; ?>

Then on each of the buttons test to see if that button should be active and if so add an id to the css.

< a href="http://www.something.co.uk/" < ?php if ($page=="home") echo " id=\"active\""; ?>>home< /a>

Answered over 9 years ago by jamie
  • I'm using Drupal as the backend (it was the CMS available) so I'll be able to pull the active page and use that to update the CSS. That'll be pretty straightforward.. the bigger issue I'm having though is how to structure the actual menu to allow for the correct visual elements regardless of the width of the actual element. Matthew over 9 years ago

If you're building you menu using a <ul>, <li> and <a> structure you should have enough markup to achieve that effect.

For example, setting the whole background of your menu on the <ul>, with little right and left margin for the borders to not overlap with the first and last items.

Each <a> is displayed as a block, you'll have to add an :hover state that change their background image to your hover state (in repeat-x), the lightner one on your screenshot.

And then, you create a .selected class to apply to the current selected <li>. You set the background of the <li> in repeat-x to the darker background on your screenshot. And you add to the li.selected a a background image representing the tiny detail, centered, at the bottom. It should overlap the <li> and blend in it.

But, as stated above, you should have a way to figure out what is the current selected page, using either back- or front-end scripting to add the .selected class to the correct <li>

Answered over 9 years ago by Pixelastic
  • This is all standard menu stuff.. the issue (as I added to the original comment) is about adding the detail on the :active item that will be centered regardless of the item height. :( Matthew over 9 years ago
Mottie 1134

Have you looked at the CSS Menus site? The author does use a tiny bit of javascript to make the menus compatible with IE6.

Answered over 9 years ago by Mottie
  • I'm using the suckerfish script (See A List Apart article) to enable IE functionality based on adding the active class to my menu. Matthew over 9 years ago
  • That would be helpful to know. Please include some sample HTML and CSS. The picture makes it harder to help because we have nothing to work with or help you fix. Mottie over 9 years ago