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.

Free Download
Demos & source code  (Release v2015.12.5)

Features

  • Pure JavaScript. jQuery is NOT required.
  • Auto Open: When web page is loaded, the menu item that matches the current page URL will be automatically opened and highlighted.
  • Responsive & Mobile friendly: The menu can be configured to become a menu button on smaller screens or mobile devices, as shown in responsive side menu.
  • Unlimited sub-menu levels
  • Can be used to used to display collapsible content such as FAQ template
  • Supported by all major browsers (including IE8) and platforms.
  • License Fee: $9.00
    About License

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:

  • embed the code into your web pages
  • or, as described in get menu from another file, create an amenu-source.html file with the menu markup, and add a link in every page that links to the amenu-source.html
<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>
  • If you want the menu to slide out from the left or right side of the screen, you can wrap it with a Super Panel: <div id="panel1">...(the menu markup)..</div> For details please visit side navigation panel.

     
  • If you want the menu to be float so that it is always present regardless of the scroll position, you can wrap it with a Float Panel: <div class="float-panel">...(the menu markup)..</div> For details please visit floating navigation bar.

     
  • If the menu HTML is NOT available on the page load, but will be generated dynamically at a later time, read build menu after page load

JavaScript

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

var amenuOptions = { menuId: "accordion", linkIdToMenuHtml: null, expand: "single", // "single", "multiple", or "full,180px" 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", "multiple" or "full".
  • single: Only one item can be expanded at a time. Expanding an item will collapse the previously expanded one.
  • multiple: More than one item can be expanded at a time.
  • 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).

 

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
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.