Way 2 Web

Web development tips


 
Dynamic Tabs

Introduction

The two-click rule indicates that no page on your site should be more than two clicks away.

Obviously, this presents some difficulties for site navigation. How do you fit all the links - the sections and sub sections - onto one page AND save your visitors confusion, data overload and potential epileptic fits?

And so the unsightly three-level hierarchical pop-out navigation menu was born!

Thankfully there are other solutions, and we'll discuss one of them here: use DHTML to change menu options using the onmouseover event - without redirecting the visitor and wasting one of those precious clicks.

Our implementation uses two horizontal rows: section headers - in the form of tabs, which are linked to the second row of links for a single section.

As with previous examples, we store the tabs and links in ul tags, and indicate a selected tab / link row / link using a Css class with the inventive name active.

The actual behavior is handled, you guessed it, by a JavaScript object.

API

Constructor

DynamicTabs(HeaderElementArray, ContentElementArray);
HeaderElementArray
Array of tab element IDs - the IDs of the li elements for the tabs
ContentElementArray
Array of navigation link list IDs parallel to HeaderElementArray - the IDs of the uls for each section's links.
[Top of page]

Demo

Content tabs

Place the mouse cursor over a tab to view its related links.

By default, the second tab and second link are selected. You will need to add the code that selected the section tab, link list and link for each page load, i.e. to add the "active" Css classes.

[Top of page]

Code

HTML

<div class="main-nav">
    <ul>
        <li id="tab-1"><a href="#">Tab 1</a>
        </li>
        <li id="tab-2" class="active">
            <a href="#">Tab 2</a>
        </li>
        <li id="tab-3">
            <a href="#">Tab 3</a>
        </li>
    </ul>
</div>
<div class="sub-nav">
    <ul id="sub-nav-1">
        <li><a href="#">Link 1-1</a></li>
        <li><a href="#">Link 1-2</a></li>
        <li><a href="#">Link 1-3</a></li>
    </ul>
    <ul id="sub-nav-2" class="active">
        <li><a href="#">Link 2-1</a></li>
        <li class="active"><a href="#">Link 2-2</a></li>
        <li><a href="#">Link 2-3</a></li>
    </ul>
    <ul id="sub-nav-3">
        <li><a href="#">Link 3-1</a></li>
        <li><a href="#">Link 3-2</a></li>
        <li><a href="#">Link 3-3</a></li>
    </ul>
</div>

Javascript

<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_DynamicTabs.js"></script>
<script language="javascript">
    var arrayTab  = ["tab-1","tab-2","tab-3"];
    var arraySubNav = ["sub-nav-1","sub-nav-2","sub-nav-3"]; 
    var tabRelationship;  
    
    window.onload = MyOnLoad;  
    
    function MyOnLoad(){					  
        //tabRelationship = new DynamicTabs(arrayHeaders, arrayContents, 0);
        tabRelationship = new ylib.widget.DynamicTabs(arrayTab, arraySubNav);
    }
</script>

Css

 /* nav main tabs */
    .main-nav ul {  
	    display: block;
	    width: 400px;
        list-style-type: none;
	    clear: right;
        margin:0;padding:0;
        padding: 4px 0 4px 15px;;
        border: 0;
    }
    .main-nav li {
        display: inline;
        margin-left: 3px;
    }
    .main-nav a { 
        display: inline;
        padding: 3px 10px 3px 10px;
        margin:0;
        text-decoration: none; 
        cursor: pointer;
        background-color: white;
        color: black;
        border: solid 1px lightblue;
        border-bottom: 0;
    }
    .main-nav li.active {
    }
    .main-nav li.active a {
        padding-bottom: 5px;
        background-color: lightblue;
        color: #990000;
    }
/* nav sub tabs */
    .sub-nav ul { 
	    width: 400px;
        list-style-type: none;
        padding: 5px 5px 5px 15px;
        margin:0;   
        background-color: lightblue; 
        display: none; 
    }
    .sub-nav ul.active { 
        display: block;      
    }
    .sub-nav li { 
        display: inline;
        padding-right: 15px;      
    }
    .sub-nav a { 
        text-decoration: none;      
        cursor: pointer;
        font-weight: bold;
    }
    .sub-nav li.active a { 
        color: #990000;        
    }

This effect could be used for content panes as well, along the lines of our Tabbed Content widget. However, the onmouseover effect seems more intuitive for navigation than for content, where onclick will do the job nicely.

[Top of page]

Files

[Top of page]