Friday, April 27th, 2007

DD Tab Menus

Category: CSS

DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.

Highlights of this script are:

  • Standards compliant, with menu tabs and sub contents defined using
    plain HTML, making customization a breeze. Five styles to choose from by
    default, or customize the tabs yourself.
  • Entire menu and its contents search engine friendly.
  • Set which menu tab should be selected by default when the page loads
    (ie: 1st tab, 2nd tab etc). If the tab contains a sub content, that
    content is shown as well. Or, have the script automatically
    select a tab when the page loads based on a match between the current
    page’s URL and one of the menu tabs’. If there is a match, that tab is

Note that the “auto select tab” feature mentioned above is rudimentary
and isn’t meant to replace directly selecting or using server side
scripting to identify which tab corresponds to the current page. It
won’t account for all possibilities where two URLs are the same. Use it
as a convenience and fallback plan!

DD menus

Posted by Dion Almaer at 5:13 am

3.9 rating from 79 votes


Comments feed TrackBack URI

Wow. that has NEVER been done before. Especially not with proper keyboard support or the ability to bookmark or drag and drop changes of the menu. *

*May contain sarcasm

Comment by Chris Heilmann — April 27, 2007

I concur with Chris Heilmann. This is as groundbreaking as the term “Ajax” was. I suggest just for this little gem!*
* Probably contains sarcasm ;-)

Comment by Marcel — April 27, 2007

This has been done before *
* Probably contains understatement

Comment by stu — April 27, 2007

listen, just because the two of you knew about it doesn’t mean that everybody does. I knew of another way to do it, but seeing it on Dynamic Drive means (to me at least) that it’s gotten to a point where it’s relatively easy to replicate. Easy for the masses, no tinkering and scratching your head saying “where’s that syntax error coming from”.

Comment by jason — April 27, 2007

Sites like Dynamic Drive have delivered copy and paste DHTML solutions for years, and that also gave us a lot of interesting navigations that broke as soon as a new browser came out. The problem is that an interface element is not a technical issue but first and foremost a usability and information architecture challenge. This is where design patterns describe the problem and the solution for your implementation and you build the solution accordingly.

Furthermore there is no way you will not encounter errors with scripts, ever, so knowing what is going on under the hood is more important than how shiny the skin is.

If you want to know about building web interfaces, you cannot get around understanding HTML semantics and what makes a good tabs construct. We’ve trusted “Magic Bullet Solutions” far too long. If you want to develop, then develop. And also think of people who use a keyboard instead of a mouse.

Comment by Chris Heilmann — April 27, 2007

Jason: point taken.

Comment by stu — April 27, 2007

For me, this script is very helpful because of the nice tab interfaces it comes with. This lets me quickly tweak it to get the exact effect I want. Different people will find different aspects of something useful. But the bottom line is, this is a relatively attractive and functional menu. Sure, keyboard navigation would have been nice, but I can add that in myself.

Some people need to learn to stop viewing a cup as half empty all the time IMO.

Comment by Mathew — April 28, 2007

Mathew: had that for years and explains how.

Comment by Chris Heilmann — April 29, 2007

Leave a comment

You must be logged in to post a comment.