JavaScript Menu Plugin for Mobile Web Applications

It's not easy to put all the navigation information in the small space of a website for mobile apps, especially when you have a lot of categories, departments etc...

This JavaScript (jQuery) based dynamic menu could help you with the challenge.

It's small, compact, customizable, easy to deploy and free to use!


Live Example

Example page optimized for the mobile devices with the menu is here.

Menu for Mobile Web Apps #1 Menu for Mobile Web Apps #2


Menu for Mobile Web Apps #3

Get started

Dowload the Menu jQuery Plugin (compressed) or the this whole example.

To deploy the menu on your website you need to include jQuery and the plugin scripts:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="mobileMenu.min.js"></script>

Then to connect a start point on the page (typically a button or a text block) with the plugin:

<script type="text/javascript">
$(document).ready(function() {
  $("#mobileMenuStartButton").mobileMenu("url/to/data.json");
});
</script>

Data structure

As the first parameter of the mobileMenu plugin you have to set an URL to a JSON file containing the menu data in the structure like following:

{
  "menu" : [
      {"name" : "Text 1", "menu" : [
          {"name" : "Text 1.1", "link" : "link1.1"},
          {"name" : "Text 1.2", "menu" : [
              {"name" : "Text 1.2.1", "link" : "link1.2.1"},
              {"name" : "Text 1.2.2", "link" : "link1.2.2"}
          ]},
          {"name" : "Text 1.3", "link" : "link1.3"}
      ]},
      {"name" : "Text 2", "link" : "link2"},
      {"name" : "Text 3", "menu" : [
          {"name" : "Text 3.1", "link" : "link3.1"},
          {"name" : "Text 3.2", "link" : "link3.2"}
      ]} 
  ]
}

As showed in the example data above, the structure starts with the menu record with a value of a list of menu items. Every menu item has a name and a link or a sub-menu of the same structure recursively.

Custom styling

The menu component contains several CSS classes which can be styled by the user.

The easiest way is to download the example CSS style sheet and adjust it.

The important CSS are following: