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

menuBar is a jQuery plugin that helps you create a responsive, dynamic, customizable, multi-level dropdown menu bar impressed with MS Word toolbar.

responsive navigation bar, jquery horizontal menu examples with source code, responsive navigation menu css, responsive menu jquery, responsive navigation menu css free download

How to Make Use of it

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.


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

Official Website(huang-qing): Click Here

This superior jQuery/javascript plugin is developed by huang-qing. For extra Advanced Usages, please go to the official website.

Leave a Comment