Cookie-enabled jQuery Accordion Menu Plugin - Auroramenu

Cookie-enabled jQuery Accordion Menu Plugin - Auroramenu
File Size: 5.86 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Auroramenu is a super light jQuery plugin used for creating a vertical accordion menu from html unordered lists that has the ability to persist the open/close states using cookies.

How to use it:

1. Include the jQuery Auroramenu plugin's core stylesheet in the head section of your html document.

<link rel="stylesheet" href="auroramenu.css">

2. Create the accordion menu using nested unordered lists as shown below:

<ul class="auroramenu auroramenu-default">
  <li>
      <a href="#">Menu 1</a>
      <ul>
          <li><a href="#">Menu 1 Item 1</a></li>
          <li><a href="#">Menu 1 Item 2</a></li>
          <li><a href="#">Menu 1 Item 3</a></li>
          <li><a href="#">Menu 1 Item 4</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Menu 2</a>
      <ul>
          <li><a href="#">Menu 2 Item 1</a></li>
          <li><a href="#">Menu 2 Item 2</a></li>
          <li><a href="#">Menu 2 Item 3</a></li>
          <li><a href="#">Menu 2 Item 4</a></li>
      </ul>
  </li>    
  <li>
      <a href="#">Menu 3</a>
      <ul>
          <li><a href="#">Menu 3 Item 1</a></li>
          <li><a href="#">Menu 3 Item 2</a></li>
          <li><a href="#">Menu 3 Item 3</a></li>
          <li><a href="#">Menu 3 Item 4</a></li>
      </ul>
  </li>   
  <li>
      <a href="#">Menu 4</a>
      <ul>
          <li><a href="#">Menu 4 Item 1</a></li>
          <li><a href="#">Menu 4 Item 2</a></li>
          <li><a href="#">Menu 4 Item 3</a></li>
          <li><a href="#">Menu 4 Item 4</a></li>
      </ul>
  </li>       
</ul>

3. Include jQuery JavaScript library and the jQuery Auroramenu plugin's JavaScript at the end of the html document. That's it.

<script src="//code.jquery.com/jquery.min.js"></script>  
<script src="jquery.auroramenu.js"></script>

4. Apply your own CSS styles to the accordion menu as you seen in the auroramenu.css


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