JavaScript NavigationBar

Invoke the insert method of the jqxNavigationBar. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxnavigationbar'>

</div>

JavaScript

var navBarElements=
    [
        { "header": "Header 1", "content": "Content 1" },
        { "header": "Header 2", "content": "Content 2" },
        { "header": "Header 3", "content": "Content 3" },
        { "header": "Header 4", "content": "Content 4" },
        { "header": "Header 5", "content": "Content 5" },
        { "header": "Header 6", "content": "Content 6" },
        { "header": "Header 7", "content": "Content 7" }
    ];

function createNavBar(navBarElem){
    var navBar = navBarElem;
    var navBarSize = navBarElem.length;
    var navBarHtml = "";
    
    for (var i=0; i<navBarSize; i++){
        navBarHtml = navBarHtml + "<div>" + navBar[i].header + "</div>" + "<div>" + navBar[i].content + "</div>";           
    };
    $("#jqxnavigationbar").append(navBarHtml);

};

createNavBar(navBarElements);


$("#jqxnavigationbar").jqxNavigationBar({
      width: 400,
      height: 'auto',
      theme: 'energyblue'
  });
  $("#jqxButton").jqxButton({
      height: '30px',
      width: '130px',
      theme: 'energyblue'
  });