MenuStation jQuery Plugin: A Real Unlimited Responsive Menu
MenuStation is a light jQuery plugin that allows you add unlimited menus. With responsive design this plugin can work on almost browsers and platforms.
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:
- Setup MenuStation.
- Call The Plugin.
- MetroStation Structure.
- 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]