New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Db List Menu

Note: Updated August 29th, 06. Overhauled CSS of tabs for easy configuration.

Description: dbMenu is a menu script that uses different CSS to create the different menu types seen above. The JavaScript in no way changes for any of the menus.

  • Standards compliant, with menu tabs and sub contents defined using plain HTML, making customization a breeze.
  • Entire menu and its contents search engine friendly.
  • Set which menu tab and optional sub content should initially be shown when the page first loads.
  • Easily toggle between a two level (default) and single level tabs menu. For the later, the entire second level is hidden, allowing you to use this script simply as basic tab links.

We know you'll have fun with this menu!

Demo:

Return to the frontpage of Dynamic Drive.
See the new scripts recently added to Dynamic Drive. Click here.
Original, practical CSS codes and examples such as CSS menus for your site.

Directions Developer's View

Step 1: Insert the below CSS and script into the HEAD section of your page:

Select All

The CSS above allows you to control all visual aspects of the tab menu and content in one central location. A variable within the DHTML script also lets you specify which tab and content should be initially selected when the page loads.

Step 2: Add the below HTML to where you wish the tab menu to appear on the page:

Select All

More information

The code of Step 2 contains the plain HTML that will render the menu. Structurally it is broken up into two parts:

1) The menu tabs:

<div id="ddtabs" class="basictab">
<ul>
<li><a href="http://www.dynamicdrive.com" onMouseover="expandcontent('sc1', this)">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" onMouseover="expandcontent('sc2', this)">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" onMouseover="expandcontent('sc3', this)">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

Each tab is implemented as a list link. Here the first 3 tabs have a sub content associated with them, which you specify by inserting the "onMouseover..." code inside the links' A tag. Read on for more info.

2) The menu contents:

Following the tabs is a DIV that contains the sub contents associated with select tabs above:

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
2nd level content 1 here.
</div>

<div id="sc2" class="tabcontent">
2nd level content 2 here.
</div>

</DIV>

Each sub content is defined by wrapping it inside a DIV with an arbitrary but unique id (ie: sc1), in which this ID should match up with that specified in the "OnMouseover..." code of the tab link above:

<div id="sc1" class="tabcontent">
2nd level content 1 here.
</div>
Note that all sub content DIVs should be defined within the master DIV with id="tabcontentcontainer".

And that's it!