How To Create a Responsive Navigation Menu In jQuery | MS Word Styles Menu

1. Insert the menuBar plugin’s information into your HTML web page.

<link rel="stylesheet" href="/path/to/jquery.menubar.css" />
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.menubar.js"></script>

2. Create a placeholder for the menu bar.

<div id="menubar"></div>

3. Define your menu gadgets and config the menu bar utilizing the next settings.

var settings = {
    onclick: function (text, worth, menuId) ,
    autoLayout : true
    items: [{
      text: 'Print',
      value: '',
      icon: {
        url: {
          'default': {
            small: 'menu.png',
            big: 'menu.png'
          },
          hover: {
            small: 'menu.png',
            big: 'menu.png'
          }
        },
        // or 
        sprite: {
          'default': {
            small: 'sprite-16-bom-default',
            big: 'sprite-24-bom-default'
          },
          hover: {
            small: 'sprite-16-bom-hover',
            big: 'sprite-24-bom-hover'
          }
        }
      },
      // panel-big small popup-small
      style: 'small',
      onclick : function( text , value ){}
      // sub-menu here
      children: []
    }]
};

4. Initialize the plugin to generate a menu bar contained in the placeholder factor you simply created.

$('#menubar').menubar(settings);

Responsive Menu MS Word jQuery Mobile, Responsive Navigation Menu In jQuery, jquery navbar plugin, jquery navbar responsive, responsive navigation menu css

See Demo And Download