Smart Responsive Menu | example

Example | Files | Style Builder | Random | Dark Styles | Light Styles

This is typical menu example using Smart Responsive Menu for jQuery & CSS. To make it work, you need to load the files, write some markup and call jQuery plugin for the menu. Step by step info is bellow the menu.

Step 1: Loading styles - add the following lines into header of the page, and adjust paths to match the location for files:

<link rel="stylesheet" type="text/css" href="dist/menu.min.css">
<link rel="stylesheet" type="text/css" href="dist/menu.styles.all.css">

Step 2: Enhancing menu markup - envelop your standard UL/LI menu structure with DIV with styles for menu:

<div class="smart-responsive-menu srm-gradient-chrome srm-textshadow srm-nosubmenu-textshadow srm-transition-ease srm-fatbase srm-style-red srm-arrows">
  <ul class="srm-menu">
    <li ....
  </ul>
</div>

Step 3: Load & run jQuery plugin - You need to load jQuery and both touchMenuHover and Smart Responsive Menu scripts:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.izilla.touchMenuHover.min.js"></script>
<script type="text/javascript" src="dist/menu.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery(".smart-responsive-menu").smartResponsiveMenu();
  });
</script>

And here is the same menu with font icons from FontAwesome:

The icons are added directly into markup, and they have nothing to do with Smart Responsive Menu, but it shows that menu will work just with them, and will look at least 20% better.

To see more example of Smart Resposnive Menu, check out the links on the top of this page. Enjoy!

Smart Responsive Menu v1.7 © 2008-2013. Milan Petrovic - SMART Plugins | dev4Press.com
Screen: 1024 x 1024 | Client: 1024 x 1024