jQuery Plugins Plugins 

MenuStation jQuery Plugin: A Real Unlimited Responsive Menu

SONHLAB , , , ,

MenuStation is a light jQuery plugin that allows you add unlimited menus. With responsive design this plugin can work on almost browsers and platforms.

 

Buy Now

 

 

Demos:

MenuStation Responsive Navigation Menu Demo

 

 

MenuStation Features:

  • Real Unlimited Menus.
  • Responsive Design.
  • Light weight.
  • Many Colors to Change.
  • Submenu with HTML Content for Multi Purposes.
  • 1 to 4 Columns in Submenu.
  • Support Almost Browsers and Platforms.
  • Easy Customize Orientations.

 

Change Log:

17 Oce 2012 – Version 1.1:

  • Add new feature: AJAX load.
  • Fix Bugs on some devices.

 

24 Sep 2012 – First Release.

 

Credits:

This plugin is developed by SONHlab and used below third parties:

  • jQuery Library.
  • jQuery UI.
  • TouchPunch Plugin.

 

Table Of Content:

  1. Setup MenuStation.
  2. Call The Plugin.
  3. MetroStation Structure.
  4. Parameters.

Section 1: Setup Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at top of the page.

Include the following code into HEAD section of the page.

Include CSS files:

<link rel="stylesheet" href="css/menustation.css" type="text/css" />
<meta name="viewport" content="width=device-width, user-scalable=no" />

For Internet Explorer 8 work well:

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/menustation-ie.css" type="text/css" />
<![endif]-->

Include Javascript files:

   <!-- jQuery Library -->
   <script type="text/javascript" src="js/jquery/jquery.min.172.js"></script>
   <!-- jQuery UI -->
   <script type="text/javascript" src="js/jquery/jquery.ui.1823.custom.min.js"></script>
   <!-- Touch Punch -->
   <script type="text/javascript" src="js/touchpunch.min.js"></script>
   <!-- MenuStation Plugin -->
   <script type="text/javascript" src="js/menustation.min.js"></script>

Setup done.

 

Section 2: Call The Plugin.

To call the plugin we need to add a script like bellow into the <head> tag.

 <script type="text/javascript">
 $(window).load(function() {
   $('#menustation').menustation({
      disableDrag: false
   });
 })
 </script>

Call plugin done.

 

Section 3: Menu Structures.

This section should be read along with the example file ( “menustation.html” file ) also contained in the download package.

Create Main Menu:

<div id="menustation">

	<!-- Start Main Menu -->
	<ul class="ms-mainmenu">

		<!-- Create A Menu Item -->
		<li class="ms-mainitem" data-mssub="submenuID">
			<a href="javascript:void(0);">
				<img src="icon-link" alt=""><span>Menu Title</span>
			</a>
		</li>
		<!-- End A Menu Item -->

	</ul>

 </div>

Note: data-mssub attribute is used to determine which submenu will be showed when the main menu item is clicked. In this case, the submenu with id=submenuID will be showed.

Create Submenu:

<!-- Start Sub Menu -->
<div id="ms-station">

    <!-- Create A Sub Menu Content -->
    <div class="ms-submenu" id="submenuID">

        <!-- Add Submenu Title -->
        <div class="ms-subheader">
            <span>SUBMENU TITLE</span>
        </div>

        <div class="column-class">
            <div class="ms-video-holder">
        	<iframe src="video-link" class="ms-responsive-video"></iframe>
            </div>
        </div>

        <div class="column-class">
            <div class="ms-img-holder">
            <img src="image-link" class="ms-responsive-img" />
            </div>
        </div>

    </div>
    <!-- End A Sub Menu Content -->   

</div>

*Replace column-class by ms-column-2/ms-column-3/ms-column-4.

ms-reponsive-video to make iframes display well on all resolutions.

ms-responsive-img to make images display well on all resolutions.

 

Section 4: Parameters.

In current version this plugin has only one parameter.

Parameters Default Value Description
disableDrag false This param is used to disable Drag event

 

 

[endedwords product=””]http://talk.sonhlab.com/room/menustation-jquery-plugin[/endedwords]