Skins






Expand Mode



Other Demos

Click the links in the side menu below

Accordion Menu

Menucool Accordion Menu will automatically open and highlight the sub-menu item that contains the current page link when the page is opened, making it easier for users to find and navigate to other items in the sub-menu.

Download
Demos & source code  (Release v2016.9.1)

Features

HTML

Add the CSS and Javascript links into the head section of the page:

<link href="/(directory)/accordion-menu.css" rel="stylesheet" type="text/css" /> <script src="/(directory)/accordion-menu.js" type="text/javascript"></script>

Then add your accordion menu markup. You can either:

<div id="accordion"> <ul> <li> <div>Sollicitudin</div> <ul> <li><a href="?11">Lorem ipsum</a></li> <li><a href="?12">Dolor sit</a></li> <li> <div>Commodo Rhoncus</div> <ul> <li><a href="?131">Consectetur</a></li> <li><a href="demo.html">Current</a></li> </ul> </li> </ul> </li> <li> <div>Quis Porttitor</div> <ul> <li><a href="?21">Finibus Bonorum</a></li> <li><a href="?22">Sed ut</a></li> <li><a href="?23">Neque porro</a></li> </ul> </li> <li> <div>Odio Ac</div> <ul> <li><a href="?31">Minima veniam</a></li> <li><a href="?32">Voluptate velit</a></li> </ul> </li> <li> <a href="?4">Sapien quam</a> </li> </ul> </div>

JavaScript

Open the accordion-menu.js with Notepad, and customize the options:

var amenuOptions = { menuId: "accordion", linkIdToMenuHtml: null, expand: "single", //"single", "full,180px", "multiple", "all" or "alltop" license: "mylicense" }; var amenu = new McAcdnMenu(amenuOptions);
linkIdToMenuHtml:  null by default. If you want to store your website menu in a separate file so that you do not need to cut and paste the menu HTML code on every page, you can assign linkIdToMenuHtml with the ID of a link that links to a separate file containing the menu's markup. Please refer to get menu from another file for details.
expand mode:   "single", "full,180px", "multiple", "all" or "alltop"
  • single: Only one item can be expanded at a time. Expanding an item will collapse the previously expanded one.
  • full,180px: Only one item can be expanded at a time. The item (the sub-UL) will expand to the specified height (need to change the 180px to your desired value).
  • multiple: More than one item can be expanded at a time.
  • all: Similar to the "multiple" option, but all sub-menu sections are expanded initially when page is loaded.
  • alltop: Similar to the "all" option, but only the top-level sub-menu sections are expanded initially when page is loaded.

 

Built-in event handlers and functions

If you need to manipulate the accordion menu with your customized functions:

Stylesheet

The width and background-color of the accordion menu are not set in the accordion-menu.css. They can be inherited from the parent element of the menu, or can be defined through the #accordion selector.

License:    


 

Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.