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.




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.



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" />

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() {
      disableDrag: false

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>
		<!-- End A Menu Item -->



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 class="column-class">
            <div class="ms-video-holder">
        	<iframe src="video-link" class="ms-responsive-video"></iframe>

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

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


*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



That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!