Easy Mobile Style Menu

Width = px

Easily apply a responsive mobile-style layout to your main navigation menu. Created with jQuery and CSS. The menu can be styled with predefined CSS classes. Tested and renders well in all browsers.

Use these elements in your project by previewing the HTML code examples and downloading the CSS and JS source files.

Compatible With:

HTML

!DOCTYPE html
html
head
meta charset="UTF-8"
title Page Title /title

Include link to the jQuery library
script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"/script

Link the "sji-responsive-mobile-nav.css", "jquery-ui.min.js" and "sji-responsive-mobile-nav.js" files to your document.
link rel="stylesheet" type="text/css" href="sji-responsive-mobile-nav.css"
script type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.min.js"/script
script type="text/javascript" src="sji-responsive-mobile-nav.js"/script

/head
body

This comment pertains to the following "div" wrapper below ...
The menu must be contained within a wrapper block element, such as a "div".
You may apply your own custom styling to this element.

The wrapper block element must contain a CSS class called "sji-menu-to-mobile" (e.g. div class="sji-menu-to-mobile").

Four different attributes may be attached to the wrapper element to control the color and positioning of the mobile style menu.

Attributes for wrapper element are ...
• browser-width : (Accepts a numerical value that represents the broswer width at which the nav menu will switch between layouts)
• menu-color : (Accepts a CSS color value, such as a hexadecimal color code or rgba() value)
• menu-icon-align : (Accepts values "left" or "right". Positions the collapsed menu icon to the left or right of the browser window)
• menu-indent-icon : (Accepts values "light" or "dark". Sets the highlight color of the arrow icons for the indented sub-navigation menus)

div class="sji-menu-to-mobile" browser-width="800" menu-color="#333333" menu-icon-align="left" menu-indent-icon="light"

This comment pertains to the following "ul" below ...
The menu and it's sub-menus must be constructed using an un-ordered list tag "ul".
You may apply your own custom styling to this.

ul
  lia href="#"Home/a/li
  lia href="#"About Us/a/li
  lia href="#"Services/a
    ul
      lia href="#"Design/a/li
      lia href="#"Development/a/li
      lia href="#"Illustration/a/li
    /ul
  /li
  lia href="#"Location/a/li
  lia href="#"Contact/a/li
/ul

/div

Note: By referencing the CSS classes "sji-menu-mobile", you will have the option to style the mobile nav menu.

/body
/html

Easy Mobile Style Menu

HTML

CSS

Javascript