Click here to Skip to main content
Click here to Skip to main content

jQuery Tab Menu

, 26 Dec 2011
Rate this:
Please Sign up or sign in to vote.
Nice looking and easy to use jQuery Tab Menu plugin

Introduction

The jQuery Tab Menu is a small and nice looking menu plugin which you can add to your web site very easily. It has built-in selection animation effect, customizable open trigger and optional open and selection callbacks. By default, the drop down menus are opened when the mouse enters a top-level anchor element, but you can configure the open behavior and make the drop downs open after a click.

Using the Code

To show the jQuery Tab Menu, you need to add two .JS files. The first .JS file is the latest version of jQuery. The second file is the jqwidgetstabmenu.js which is the implementation of the plugin. After that, you need to add the style.css file which includes classes for styling the jQuery Tab Menu. The final step is to initialize the menu by using the jqwidgetstabmenu function and pass a DIV container element's id as parameter.

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jqwidgetstabmenu.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jqwidgetstabmenu("tabmenuid");
    });
</script> 

You can also pass an optional second parameter to the jqwidgetstabmenu function which represents the open trigger, i.e., when the dropdown menu should be opened (after click, double-click or mouse-enter).

Below is a sample HTML markup for the Tab Menu:

<div id='tabmenuid'>
    <ul>
        <li><a href="#1">Home</a></li>
        <li><a href="#2">Solutions</a></li>
        <li><a href="#3">Products</a></li>
    </ul>
    <div class="container">
    Home Container</div>
    <div class="container">
        <div style="float: left; width: 50%;">
            <ul>
                <li>
                    <h3>
                        Solutions</h3>
                </li>
                <li><a href="#">Education</a></li>
                <li><a href="#">Financial services</a></li>
                <li><a href="#">Government</a></li>
                <li><a href="#">Manufacturing</a></li>
                <li><a href="#">All industries and solutions</a></li>
            </ul>
        </div>
        <div style="float: left; width: 50%;">
            <ul>
                <li>
                    <h3>
                        Software Solutions</h3>
                </li>
                <li><a href="#">Consumer photo and video</a></li>
                <li><a href="#">Mobile</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <ul>
            <li>
                <h3>
                    Products</h3>
            </li>
            <li><a href="#">PC products</a></li>
            <li><a href="#">Mobile products</a></li>
            <li><a href="#">All products</a></li>
        </ul>
    </div>
</div>

In order to create the menu, you need to pass the DIV container's id to the jqwidgetstabmenu function and you need to set the class of the drop downs to "container".

Working with the API:

trigger

The trigger member specifies when a drop down should be opened.

The following code configures the sub menus to be opened after click:

var tab = jqwidgetstabmenu("tabmenuid", "click");

opencallback

The opencallback is called when a drop down is opened.

var tab = jqwidgetstabmenu("tabmenuid", "click");

selectioncallback

The selectioncallback is called when the selected tab is changed.

var tab = jqwidgetstabmenu("tabmenuid");tab.selectioncallback = function (args) 
{ var index = args.selected; var selectedanchor = args.anchor;}

closeall

closeall function closes all drop downs.

var tab = jqwidgetstabmenu("tabmenuid");tab.closeall();

openmenu

openmenu function opens a drop down by index.

var tab = jqwidgetstabmenu("tabmenuid");tab.openmenu(0);

Implementation

When we pass the id to the jqwidgetstabmenu constructor, it tries to find the DIV container by that id.

var menu = $("#" + tabmenu.menuid);

Then we find the top-level anchor tags and the DIV elements with class 'container'. Each top-level anchor tag should have an associated DIV element with 'container' class.

var anchors = $(menu).find('ul:first a');var submenus = $(menu).find('.container');

After that, we loop through the anchor tags. Inside the loop, we need to create a wrapper around each container DIV element. This wrapper is added to the document's body with absolute positioning. Inside the loop body, you will also see a function called 'move'. The purpose of this function is to move a semi-transparent selection background when the user selects a tab and position it over the tab with smooth animation effect.

anchors.each(function (index) {
    var $anchor = $(this)
    var $submenu = $(submenus[index]);
    $submenu.wrap('<div class="wrapper" style="z-index: 9999;
    position:absolute;top:0;left:0;visibility:hidden">
    <div style="position:absolute;overflow:hidden;left:0;top:0;width:100%;
    height:100%;"></div></div>')
            .css({ visibility: 'inherit', top: -$submenu.outerHeight() })
            .data('timer', {})
    var $wrapper = $submenu.closest('div.wrapper').css
    ({ width: $submenu.outerWidth() + offset[0], height: $submenu.outerHeight() + 
    offset[1] })
    $wrapper.appendTo(document.body);

    // moves the selection to the selected item.
    var move = function ($el) {
        selection.show();
        var dims = {
            'left': $el.offset().left,
            'top': $el.offset().top,
            'width': $el.outerWidth(),
            'height': $el.outerHeight()
        };

        $el.addClass('menu-item-selected');
        selection.stop().animate(dims, 250, function () {
        });
        if (tabmenu.selectioncallback) {
            tabmenu.selectioncallback({ selected: index, anchor: $anchor[0] });
        }
    };

    // opens a sub menu.
    tabmenu.submenus[index] = function () {
        tabmenu.closeall();
        var offset = menu.offset();
        move($anchor.parents('li'));
        $wrapper.css({ visibility: 'visible', left: offset.left, 
    top: offset.top + menu.outerHeight(), width: menu.outerWidth() })
        $submenu.css('top', 0);
        menu.removeClass('jqx-rc-all');
        menu.addClass('jqx-rc-t');
        if (tabmenu.opencallback) {
            tabmenu.opencallback({ opened: index });
        }
    }

    $anchor.bind(tabmenu.trigger, function (e) {
        tabmenu.submenus[index]();
        return false;
    })
})

In the above code, we bind each anchor tag to a trigger specified by the tabmenu.trigger member. The value of this member is passed as second parameter to jqwidgetstabmenu function. If you omit it, the default value is equal to 'mouseenter', i.e., a drop down will be opened when the mouse cursor enters into a tab's bounds.

  $anchor.bind(tabmenu.trigger, function (e) {
        tabmenu.submenus[index]();
        return false;
    })

The following code shows a drop down menu below the Tab Menu. It shows the wrapper element and positions it below the menu's root container element.

 tabmenu.submenus[index] = function () {
        tabmenu.closeall();
        var offset = menu.offset();
        move($anchor.parents('li'));
        $wrapper.css({ visibility: 'visible', left: offset.left, top: 
offset.top + menu.outerHeight(), width: menu.outerWidth() })
        $submenu.css('top', 0);
        menu.removeClass('jqx-rc-all');
        menu.addClass('jqx-rc-t');
        if (tabmenu.opencallback) {
           tabmenu.opencallback({ opened: index });
        }
    } 

History

  • 24th December, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The MIT License

About the Author

jqwidgets
jQWidgets
United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey31-Jan-12 21:42 
GeneralRe: My vote of 5 Pingroupjqwidgets2-Feb-12 2:22 
thanks!
Questionhow to close submenu on mouseout? PinmemberChuck Baa4-Jan-12 7:10 
AnswerRe: how to close submenu on mouseout? Pingroupjqwidgets6-Jan-12 1:34 
GeneralMy vote of 3 PinmemberMonjurul Habib26-Dec-11 6:44 
GeneralRe: My vote of 3 Pingroupjqwidgets26-Dec-11 8:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 26 Dec 2011
Article Copyright 2011 by jqwidgets
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid