Blogs

In order to create nested navigation bars, you can do the following: 1. Include the jQuery Framework(jquery-1.7.2.min.js), jQWidgets Framework(jqxcore.js), jqxNavigationBar(jqxnavigationbar.js) and jqxExpander(jqxexpander.js).

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.7.2.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 Navigation Item is represented by two DIV tags – the first one is the header and the second one is the content. To add a nested Navigation Bar, we need to add the structure of the nested bar inside the content of the container Navigation Bar. In the HTML markup below, the jqxNavigationBar2 is added to the content of the jqxNavigationBar’s first item.

<div style='overflow: hidden;' id='jqxNavigationBar'>
	<div>Header 1</div>          
	<div>
		<div style="margin: 20px;" id="jqxNavigationBar2">
			<div>Sub Header 1</div>
			<div>Sub Content 1</div>
			<div>Sub Header 2</div>
			<div>Sub Content 2</div>
		</div>
	   </div>          
	<div>Header 2</div>          
	<div>Content 2</div>          
</div>

3. Initialize the Navigation Bars

<script type="text/javascript">
  $(document).ready(function () {
    $("#jqxNavigationBar").jqxNavigationBar({ width: 350, height: 350, sizeMode: 'fitAvailableHeight' });
    $("#jqxNavigationBar2").jqxNavigationBar({ width: 300, height: 250, sizeMode: 'fitAvailableHeight'});
  });
</script>