User-friendly Tabbed Mega Menu Plugin For jQuery - nicemenu

nicemenu is a lightweight and easy-to-use jQuery plugin used to create a horizontal or vertical tabbed interface for your mega menu containing tons of nav links.

How to use it:

1. Load the nicemenu plugin's basic stylesheet and JavaScript in your html document.

<link rel="stylesheet" href="nicemenu.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.nicemenu.js"></script>

2. Load a theme CSS of your choice in the header of the document.

• theme-001.css: left menu
• theme-002.css: right menu
• theme-003.css: top menu
• theme-004.css: bottom menu

<link rel="stylesheet" href="theme-001.css">

3. The basic HTML structure for the tabbed mega menu.

<div class="nicemenu verticle" data-pos="list.right" data-classes="active">
  <div class="nicemenu-item">
    <h6>Domains</h6>
    <p>
      <a href="#">.com</a> /
      <a href="#">.net</a> /
      <a href="#">.org</a>
    </p>
    <div class="nicemenu-sub">
      <div class="w-3-1">
        <h6>Find a Domain</h6>
        <p>Domain Name Search</p>
        <p>Bulk Domain Search</p>
        <p>New Domain Extensions</p>
      </div>
      <div class="w-3-1">
        <h6>Domain Services</h6>
        <p>Domain Transfer</p>
        <p>Domain Privacy</p>
        <p>WHOIS</p>
      </div>
      <div class="w-3-1">
        <h6>Auctions</h6>
        <p>Domain Auction</p>
        <p>List A Domain</p>
        <p>Pricing</p>
      </div>
    </div>
  </div>
  <div class="nicemenu-item">
    <h6>Web Security</h6>
    <p>
      <a href="#">SSL Certificates</a> /
      <a href="#">Website Security</a>
    </p>
    <div class="nicemenu-sub">
      <h6>Sub Menu 2</h6>
    </div>
  </div>
  <div class="nicemenu-item">
    <h6>Hosting</h6>
    <p>
      <a href="#">Web Hosting</a> /
      <a href="#">Wordpress Hosting</a>
    </p>
    <div class="nicemenu-sub">
      <h6>Sub Menu 3</h6>
    </div>
  </div>
  <div class="nicemenu-item">
    <h6>Email</h6>
    <p>
      <a href="#">Professional</a> /
      <a href="#">Office</a>
    </p>
    <div class="nicemenu-sub">
      <h6>Sub Menu 4</h6>
    </div>
  </div>
</div>

4. Initialize the nicemenu plugin by calling the function on the top container.

$(".nicemenu").nicemenu();

---

This awesome jQuery plugin is developed by zeupin. For more Advanced Usages, please check the demo page or visit the official website.