Skip to content


A different type of menu

Today I was trying to beautify a micro-site at work, when I started to fool around with the menu.  I was trying to think of something a bit different, unorthodox, and all together cool.  What came out of my head was this:


If you don’t think that’s kinda cool, you probably won’t bother reading on, however, for those of you with similar thoughts as I in their head, either view the source here, or read the explanation below Note: this probably won’t copy and paste too well, so if you’re looking at doing that, head to the source.

  • To make it so that the selected item is the only one shown, we hide every list item, then make it so that the selected one isn’t hidden by setting the display to anything but block (because that wouldn’t play well with others).
    #d-menu li {
      display: none;
    }
    #d-menu li.selected {
      display: inline-block;
    }
  • And then when the mouse is hovering over the container, we show them all.
    #d-menu:hover li {
      display: inline-block;
    }
  • The last real key item is the absolute positioning.  Without this, the items would push everything around when they become visible again.
    #d-menu:hover ul {
      position: absolute;
    }
  • Most everything else in the css is to make things look pretty. For instance, in the actual menu I created, I added a down arrow as the background of #d-menu li.selected, like so:
    #d-menu li.selected {
      background-image: url(/images/down-arrow.png);
      background-position: center right;
      background-repeat: none;
    }

    For some of these things though, like the arrow, you want to remove them on hover, like so:

    #d-menu:hover li.selected {
      background-image: none;
    }

One more note: this has yet to be tested in IE. It should work in later versions, but I know for a fact that at least in IE6, the hack for hover events on anything other than an <a> tag will need to be added. *shakes fist at IE*

Be Sociable, Share!

Posted in CSS. Tagged with .

2 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. You would need to find a way of getting this to work in IE, it being the largest share of web browser users. It is a unique idea, but you would also need to set expectations of the user too. I would not know that pagination would occur without hovering over the menu item.

    I would like to see how you progress with this, getting it to work in IE (you’ll need to set :hover on only – or alternatively cook up progressive enhancement with a fallback for IE) and setting the expectations of the user.

  2. that should’ve been (you’ll need to set :hover on only the ‘A’ tag so a:hover..)

    I didn’t see you had HTML enabled, sorry!