Accordion Menu

arrow image position:

expand:

Using the open or close function to programmatically open or close a sub-menu. details...

Open Locations
Open Tech. Solutions
Close

Accordion Menu CSS templates

[Update] new release
Release v2013.3.18

When web page is loaded, accordion menu leaves the sub-menu open if the sub-menu contains the current page link, making it very convenient for users to navigate through other items in the sub-menu. It is for this great convenience that accordion menus are used widely in navigation.


Features:

  • Unlimited sub-menus
  • The menu item that matches the current page URL will be automatically selected and displayed.
    This URL matching mechanism can be overrided by the built-in open or close functions that can mannually open or close a menu item on page load.
    They are useful when the currunt page URL has not been included in the menu links but you still want a certain sub-menu to be expanded at page load. more ...
  • Expand/collapse options: single, multiple, or full (see Directions for details)
  • Support HTML menu in separate file
  • Support Create menu on the fly
  • Supported by all major browsers cross browser
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
You can create your menu HTML structured as below, and either
  • embed the code into your web pages
  • or, as described in HTML menu in separate file, create an amenu-source.html file with the menu code, and add a link in every page that links to the amenu-source.html
<div id="acdnmenu"> <ul> <li>Categories <ul> <li>Sub Categories <ul> <li><a href="?0">Accordion Menus</a></li> <li><a href="accordion-menu">Web Menus</a></li> <li><a href="?1">Sliding Menus</a></li> </ul> </li> <li><a href="?2">Product 2</a></li> <li><img src="../img/demo/coffee1.jpg" style="width:190px;height:87px;" /></li> </ul> </li> <li>Support <ul style="background:transparent url(coffee2.jpg) no-repeat 160px bottom;"> <li><a href="?3">Product Support</a></li> <li id="li22">Locations <ul> <li><a href="?4">How-To Resources</a></li> <li><a href="?5">Product Support</a></li> </ul> </li> <li><a href="?6">Opening Time</a></li> </ul> </li> <li id="li3">Technical Solutions <ul> <li><a href="?b">Javascript Code</a></li> <li><a href="?c">CSS Code</a></li> <li><img src="coffee3.jpg" style="width:190px;height:84px;" /></li> </ul> </li> </ul> </div>
If your menu HTML is NOT available on the page load, but will be generated dynamically at a later time, you can refer to Create menu on the fly
  • The root element of the menu is div with id="acdnmenu".
    You can use nav instead of div:
    <nav id="acdnmenu"> ... </nav>
    The menu's JavaScript has made this HTML5 tag work in all browsers.
  • Sub-menus are organized with ul and li tags. There is a heading text before each ul. The submenu (ul) will expand/collapse when the heading is clicked.

    You can also set the heading text within a hyperlink(<a href="..."> ... </a>).
    In that case, its submenu (if any) will not be collapsed at the page load so that the submenu items are visible and accessible without the need of clicking on the heading.

Step 1: Download the accordionmenu.js (9KB)

Step 2: Customize the JavaScript:

This step is optional in your website development phase because the menu is fully functional in your local or localhost environment even if a valid license has not been acquired yet.

Open the accordionmenu.js file with Notepad and you will see:

var amenuOptions = { menuId: "acdnmenu", linkIdToMenuHtml: null, expand: "single", // or "multiple", "full" license: "mylicense" };

menuId:  the menu id specified in the HTML markup

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 a link ID that links to the separate menu file. Please refer to HTML menu in separate file for details.

expand:   "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: Only one item can be expanded at a time. The expanded area occupies the entire height of the menu.

license:  place to put your license   Click the Installation tab on top for details.


 

Using the open or close function

The built-in open and close functions will override the default mechanism that the menu link that matches the current page URL pattern will be automatically selected and opened at page load.

They are useful when the currunt page URL has not been included in the menu links but you still want a certain sub-menu to be expanded at page load.

  • amenu.open(li_id, closeOthers)

    li_id: The id of the LI element that you want to open (the LI should have been assigned with an id in the menu HTML)

    closeOthers: true if you want other sub-menus are not expanded; otherwise, false to leave other sub-menus as they are

    For example:

    <script> amenu.open("li22", true); amenu.open("li31", false); </script>
  • amenu.close(slide)

    It will close the top-level expanded sub-menu.

    slide: true if you want a sliding effect during the closing; otherwise, false.

    Here is a sample implementation:

    <script> amenu.close(false); </script>
You can place the script any where on the page (either in the head section or in the body of the page), but not before the link to the accordionmenu.js

Two Important Style Settings in the CSS file

  • Menu height:
    Usually it is prefered to give the menu a fixed height in the CSS file, such as:
    #acdnmenu { height: 280px; width: 220px; }
    If you set: "height:auto;", the content below the menu will be pushed down or up accordingly following the accordion menu's collapsing or expanding.
  • Arrow image position:
    Arrow image of the top heading can be positioned to the left or to the right by the CSS settings:
    #acdnmenu div.arrowImage { left:8px; }
    or
    #acdnmenu div.arrowImage { right:8px; }

Download

The CSS file is fully customizable. Most of the styles are self-explanatory and easy to customize.

Visit Accordion Menu CSS templates to download the CSS.

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

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

Step 2: Add the menu HTML markup to the page, or add a hyperlink that links to the menu HTML file as described in HTML menu in separate file.

Step 3: Before your accordion menu going live on the production server, purchase a menu license from us and replace the license key in the accordionmenu.js file with the acquired license:

var amenuOptions = { ... ... license: "mylicense" };
License Fee: US$20.00
Buy License Now
  • License is issued on a per-domain basis (valid for one domain and its sub-domains)
  • The license is valid for this Accordion Menu only; Using other Menucool menus or UI components may require separate licenses.
  • The license is valid forever for future updates/upgrades with no requirement to renew
  • The acquired license should be set to the license property in the accordionmenu.js file. The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. So the JavaScript file itself will do the checking and no other services will be involved. The menu will periodically show a purchase reminder if the verification fails.
  • You do not need a license for development or evaluation when using localhost server or local file path. The menu is fully functional.

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...