How to create multi-level menu for desktop and mobile with SmartMenus jQuery

INTRODUCTION

SmartMenus jQuery is a successor to one of the oldest website menu scripts which was released back on August 2, 2001. Although the name of the project remains the same, the jQuery plugin is a completely new open-source script designed and developed from scratch. It's main goal was to create a script that supports equally well widest possible variety of browsers running on all kinds of platforms and devices - desktop computers, tablets, mobile phones.

Due to the fact that the SmartMenus jQuery menu definitions are embedded on the page in the form of standard list-based markup, the links in the menus are fully accessible to all other browsers like search engines, text-mode browsers and assistive technology (like screen readers).

FEATURES

Optimized for mobile and desktop browsers supporting touch, mouse or both inputs at the same time
Section 508 compliant and fully accessible to assistive technology like screen readers
List-based (search engine friendly) markup - can be easily generated from any kind of database
Completely CSS driven with fully customizable menu styles
Unlimited menu trees on the same page and unlimited sub menu levels supported
Horizontal or vertical main menu items arrangement
Absolute/relative/fixed positioning for the main menus supported
Right-to-left and bottom-to-top display of the sub menus is possible
Full support for RTL text/pages (e.g. Hebrew, Arabic)
Full window size detection - the menus will always be kept inside the window's boundaries
Automatically adjustable width for the sub menus is possible (including min/max settings)
Keyboard navigation friendly (Tab key)
Compact optimized code

USAGE

1. Include JS & CSS to your <head> tag

<!-- MENU sTYLES -->
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/vadikom/smartmenus/0.9.6/src/css/sm-core-css.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/vadikom/smartmenus/0.9.6/src/css/sm-blue/sm-blue.css'>
<!-- JAVASCRIPTS -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/vadikom/smartmenus/0.9.6/src/jquery.smartmenus.js'></script>

2. Add menu HTML: I have 3-level menu as an example

<div id="nav">
  <ul id="main-menu" class="sm sm-blue">
    <li><a href="#"><span>Web68 Blog</span></a></li>
    <li>
      <a href="#">About</a>
      <ul class="sub-menu">        
        <li><a href="#"><span>The author</span></a></li>
        <li>
          <a href="#">The company</a>
          <ul class="sub-menu">
            <li><a href="#"><span>Who are we</span></a></li>
            <li><a href="#"><span>What we do</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Download</a></li>
    <li>
      <a href="#">Support</a>
      <ul class="sub-menu">
        <li><a href="#">Premium support</a></li>
        <li><a href="#">Forums</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
  </ul>  
</div>

3. Call javascript

$(function(){
  $('#main-menu').smartmenus({
			markCurrentItem: true,
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
});

DEMO

See the Pen SmartMenus jquery by Thanh Nguyen (@genievn) on CodePen.

Recent Post