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

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


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).


  • 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


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

<!-- MENU sTYLES -->
<link rel='stylesheet prefetch' href=''>
<link rel='stylesheet prefetch' href=''>
<script src='//'></script>
<script src=''></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>
      <a href="#">About</a>
      <ul class="sub-menu">        
        <li><a href="#"><span>The author</span></a></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>
    <li><a href="#">Download</a></li>
      <a href="#">Support</a>
      <ul class="sub-menu">
        <li><a href="#">Premium support</a></li>
        <li><a href="#">Forums</a></li>
    <li><a href="#">Blog</a></li>

3. Call javascript

			markCurrentItem: true,
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8



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