jqxNavigationBar – NavigationBar widget built with jQuery

jqxNavigationBar is a versatile jQuery widget for building collapsible side-menu systems. It has header and content sections(like tabs). Users can expand or collapse a content section by clicking its associated header. Browse examples: NavigationBar Demos

Features

• Single or Multiple Expanded Items
• Toggle Modes
• Works across devices and browsers
• Web Standards Compliant
• Rich and easy to use JavaScript API
• Easy customization and built-in themes
• Search-Engine Friendly Rendering

Single or Multiple Expanded Items

With jqxNavigationBar, you can choose to have single or multiple expanded items. To switch between the two modes, you need to change only one property – ‘expandMode’. By default, the jqxNavigationBar can have only one expanded item(like Accordion). If the ‘expandMode’ property value is ‘multiple’, users can expand or collapse multiple items at the same time.

Toggle Modes

You can specify the action needed for expanding or collapsing a navigation item. jqxNavigationBar supports the following toggle modes:

• ‘click’ – a navigation item’s content section is expanded or collapsed when the user clicks the item’s header section.
• ‘double click’ – a navigation item’s content section is expanded or collapsed when the user double clicks the item’s header section.
• ‘mouse enter/mouse leave’ – a navigation item’s content section is expanded or collapsed when the mouse cursor is moved over the item’s header section.

Works across devices and browsers

jqxNavigationBar supports all major desktop and mobile web browsers – Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari(IPhone, IPad). jqxNavigationBar automatically detects the browser’s type and adjusts its internal behavior for optimal rendering and best user experience. You can easily use this widget even on touch devices.

Web Standards Compliant

Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript NavigationBar widget based on jQuery, HTML5 and CSS3.

Rich and easy to use JavaScript API

jqxNavigationBar has a rich set of events and built-in functions guaranteeing full control over the NavigationBar. With the NavigationBar API, you can get the expanded navigation item, expand or collapse an item, disable or enable a navigation item or the entire NavigationBar.

Easy customization and built-in themes

jqxNavigationBar ships with 5 professionally designed themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property.

Search-Engine friendly rendering

jQuery NavigationBar uses pairs of DIV tags and CSS for rendering. You can turn your DIV tags into a nice-looking navigationbar by calling a single function. Below is a html markup for building a NavigationBar.

<div id='jqxNavigationBar'>
    <!--Header-->
    <div>
        Early History of the Internet</div>
    <!--Content-->
    <div>
        <ul>
            <li>1961 First packet-switching papers</li>
            <li>1966 Merit Network founded</li>
            <li>1966 ARPANET planning starts</li>
        </ul>
    </div>
    <!--Header-->
    <div>
        Merging the networks and creating the Internet</div>
    <!--Content-->
    <div>
        <ul>
            <li>1981 Computer Science Network (CSNET)</li>
            <li>1982 TCP/IP protocol suite formalized</li>
            <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
            <li>1983 Domain Name System (DNS)</li>
        </ul>
    </div>
    <!--Header-->
    <div>
        Popular Internet services</div>
    <!--Content-->
    <div>
        <ul>
            <li>1990 IMDb Internet movie database</li>
            <li>1995 Amazon.com online retailer</li>
            <li>1995 eBay online auction and shopping</li>
        </ul>
    </div>
</div>