jQuery Amazon like menu – mega sidebar menu plugin

Here we present a jQuery Amazon like menu. It’s a great plugin of sidebar menu, in Amazon’s style.

jQuery Amazon like menu in action

This plugin allows us to create a menu similar to Amazon’s website, providing a flexible, content-rich fold out menu.

This mega menu supports infinite number of sub menus. Additionally, the menu is responsive in smaller screen and mobile devices. Just a robust menu this is, and across multiple platforms!

An example of jQuery Amazon like menu
An example of jQuery Amazon like menu

How to use

1. Add necessary following external files:

– jQuery (at least 1.4)

– amazonmenu.js

– amazonmenu.css

=>

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="amazonmenu.css">
<script src="jquery.min.js"></script>
<script src="amazonmenu.js">

2. Create HTML structure for the menu:

<nav id="mysidebarmenu" class="amazonmenu">
    <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Folder 0</a>
        <div>
          ...

          <ul>
          <li><a href="#">Sub Item 0.1</a></li>
          <li><a href="#">Sub Item 0.2</a></li>
          <li><a href="#">Sub Item 0.3</a>
          <li><a href="#">Sub Item 0.4</a>
                <div>
                  Some content ....
                </div>

          <li><a href="#">Sub Item 0.5</a></li>
          </ul>
        </div>
    </li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a>
            <ul>
                <li>Sub Item 1.3.1</li>
                <li>Sub Item 1.3.2</li>
            </ul>
        </li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.1</a></li>
      ...
      </ul>
    </li>
    <li><a href="#style/">Item 4</a></li>
    </ul>
</nav>

3. Init the plugin:

jQuery(function() {
    amazonmenu.init({
        menuid: 'mysidebarmenu'
    })
})

That’s it!

Docs & demos:

http://www.javascriptkit.com/script/script2/amazonsidebarmenu.shtml

Find jQuery Amazon like menu plugin source on GitHub:

https://github.com/dynamicdriverepo/amazonsidebarmenu

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1