1. The first step is to include the javascript and stylesheet files required by the NavigationBar. Each item in the NavigationBar is represented by Expander widget and we need to include the jqxexpander.js. jqxExpander is a widget that has Header and Content sections and the user can toggle the content’s visibility by clicking the header.
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="jqwidgets/jqxnavigationbar.js"></script>
2. Create the HTML structure. Each NavigationBar item is defined with two DIV tags. The first DIV is the Header and the second DIV tag is the content. In the HTML structure below, we define 4 items.
<div id="jqxNavigationBar">
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='images/mailIcon.png' /></div>
<div style='margin-left: 4px; float: left;'>
Mail</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Contacts</a></li>
<li><a href='#'>Mails</a></li>
<li><a href='#'>Notes</a></li>
</ul>
</div>
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='images/contactsIcon.png' /></div>
<div style='margin-left: 4px; float: left;'>
Contacts</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Business Cards</a></li>
<li><a href='#'>Address Cards</a></li>
<li><a href='#'>Detailed Address Cards</a></li>
<li><a href='#'>Phone List</a></li>
</ul>
</div>
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='images/tasksIcon.png' /></div>
<div style='margin-left: 4px; float: left;'>
Tasks</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Simple List</a></li>
<li><a href='#'>Detailed List</a></li>
<li><a href='#'>Active Tasks</a></li>
<li><a href='#'>Phone List</a></li>
</ul>
</div>
<div>
<div style='margin-top: 2px;'>
<div style='float: left;'>
<img alt='Mail' src='images/notesIcon.png' /></div>
<div style='margin-left: 4px; float: left;'>
Notes</div>
</div>
</div>
<div>
<ul>
<li><a href='#'>Icons</a></li>
<li><a href='#'>Notes List</a></li>
<li><a href='#'>Last Seven Days</a></li>
</ul>
</div>
</div>
3. The next step is to initialize the NavigationBar. The initialization process includes selecting the “jqxNavigationBar’ DIV tag and calling the jqxNavigationBar constructor. Next, we set the navigation bar’s properties. The width of the widget is set to 300px, the expandMode is set to multiple which means that the users can have multiple expanded items. The expandedIndexes property defines which items will be expanded when we start the application. In this case, we will have the third and fourth items expanded by default. The last property that we set is the ‘theme’ property which defines the jqxNavigationBar’s visual style.
$(document).ready(function () {
// Create jqxNavigationBar.
$("#jqxNavigationBar").jqxNavigationBar({ width: 300, expandMode: 'multiple', expandedIndexes: [2, 3], theme: 'classic' });
});
If you need to expand or collapse an item through the NavigationBar’s API, you can use the ‘expandAt’ and ‘collapseAt’ method.
The following example code will expand the first item:
$("#jqxNavigationBar").jqxNavigationBar('expandAt', 0);
The following example code will collapse the third item:
$("#jqxNavigationBar").jqxNavigationBar('collapseAt', 2);