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

FF1+ IE5+ Opr7+

Drop Down Tabs (5 styles)

Author: Dynamic Drive

June 20th, 13': Menus made responsive (by default, to devices with browser width 480px or less).

Description: Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs. The entire interface is rendered in plain HTML, making the script very easy to customize, plus all of its contents are search engine friendly. You can optionally set which tab should be selected by default when the page loads (ie: 1st tab, 2nd tab etc), 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 selected.

Drop Down Tabs comes with 5 sleek examples to let you quickly pick your favourite to use on your site. Customize each example's CSS to modify the look as desired. We got you covered alright!

See also: DD Tab Menu (5 styles)

Demos:

1) Example 1

Note that the CSS for this menu style requires each menu item be wrapped in an additional tag.

 

2) Example 2

3) Example 3

Note that the CSS for this menu style requires each menu item be wrapped in an additional tag.



4) Example 4

Note that the CSS for this menu style requires each menu item be wrapped in an additional tag.



5) Example 5



Directions Developer's View

To get Drop Down Tabs, simply download "dropdowntabs.zip", which contains all the files that make up this menu and its accompanying 5 styles. For your reference, some files included within the zip are shown below:

Customization

Setting up and customizing Drop Down Tabs is very simple, as the entire menu consist of regular HTML and styled using CSS. Logically it makes sense to think of the menu in the following three parts:

1) HTML for the menu tabs:

<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>

As you can see, the menu tabs is simply an ordinary HTML list wrapped inside a DIV. Give this DIV a unique ID to be used to identify it on the page. The arbitrary class attribute provides the desired style for the tabs. Now, to specify that a particular tab carry a drop down menu (shown when mouse rolls over tab), just insert the code rel="unique_id" inside its <a> element, where "unique_id" is the ID of the drop down menu DIV on the page to show (see below). Tabs that don't carry a "rel" attribute will simple be single level in nature.

2) HTML for drop down menu(s):

The drop down menus associated with the desired tabs above are defined as individual DIV tags on the page. For example:

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
"
"

Notice how each DIV carries an arbitrary but unique ID attribute that matches up with the value of the "rel" attribute inside the tab it is to be associated with. The CSS class name is just there to provide styling, and can be modified/ removed as desired.

3) Script to call following the HTML for both of the above to initialize a Tab Menu instance:

Finally, with both parts of a Drop Down Tabs defined, you should call the following script to initialize it on the page:

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
</script>

The first parameter (highlighted in red) should be the ID of the Menu Tab to initialize once the page has fully loaded. The second parameter is optional, and lets you set which tab should be selected by default- enter either an integer (0=1st tab, 1=2nd tab etc), or "auto" to have the script try to automatically select the tab that matches the current page's URL *. And that's it!

* 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!

Responsive menus

The menus (all 5 styles) are designed to collapse elegantly when the window is 480px or less (the maximum width of most mobile phones), for example:

To modify the responsive settings of each menu, edit the following two places:

1) Inside each menu's CSS file (ie: bluetabs.css), at the very end under "Responsive CSS", for example:

/* ######### Responsive CSS ######### */


@media screen and (max-width: 480px){

.bluetabs{
border-bottom-width: 0;
}
"
"

The 480px value means the menu should transform into a stacked menu when the window is 480px or less. The CSS rules that follow make that happen.

2) Then, inside dropdowntabs.js, modify the variable in red below so the responsive window width (ie: 480) matches that specified in the CSS above:

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false
mediabreakpoint: 480, // maximum width of browser window (in pixels) before menu becomes responsive

IMPORTANT:  On mobile devices, webpages are automatically zoomed out to fit the entire contents of the page horizontally. In order for responsive CSS to properly kick in at the specified dimensions (ie: 480px width), you need to add the following tag to the HEAD section of your page to disable auto zooming:

<meta name="viewport" content="width=device-width">

See the tutorial "The viewport meta tag- the key to preparing a page for mobile devices optimization" for more information.