Arrow icon position: left   right

Expand: single   multiple   full

Accordion Menu CSS templates



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

Open Locations
Open Tech. Solutions
Close

Accordion Menu

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 web 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 Store menu HTML code in another document
  • Support Create menu dynamically
  • Supported by all major browsers
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • License Fee: $20.00
    About License
You can create your menu HTML structured as below, and either
  • embed the code into your web pages
  • or, as described in Store menu HTML code in another document, create an amenu-source.html file with the menu markup 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/1.jpg" style="width:190px;height:87px;" /></li> </ul> </li> <li>Support <ul style="background:transparent url(2.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="3.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 dynamically
  • The root element of the menu is div with id="acdnmenu".
    You can use nav instead of div if you like: <nav id="acdnmenu"> ... </nav> The script accordionmenu.js has made this HTML5 tag work in all browsers including old IEs.
  • 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 accordionmenu.js
Release v2013.3.18 (9KB)

Step 2: Customize the script:

Open the accordionmenu.js with notepad and you will see

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

You can customize it to your requirement.

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

Using the built-in 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 on 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 or in the body section of the page), but not before the link to the accordionmenu.js

Download CSS file

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 stylesheet.


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; right: auto; }
    or
    #acdnmenu div.arrowImage { left: auto; right:8px; }

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 menu HTML in a separate file.

Step 3: License

  • License is required before the menu goes live on web server. Otherwise a purchase reminder may appear on the page.
  • You do not need a license for development or evaluation when using localhost server or local file path. The menu is fully functional.
  • The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains are also allowed.
    License Fee: $20.00
  • The license is valid for this Accordion Menu only; Using other Menucool menus or UI components may require separate licenses.
  • You can use the licensed widget multiple times within the website for which you've purchased the license.
  • When you have acquired the license, open the accordionmenu.js file with Notepad, and update the license value accordingly. var amenuOptions = { ... ... license: "mylicense" };

FAQ about License

  1. How the license works? Does it go to another web service to verify? Answer
  2. Will it work for sub-domains? Answer
  3. My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
  4. Do you provide developer license that can be applied to multiple websites? Answer
  5. I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
  6. Do I need to renew the license for future upgrades/releases of the widget? Answer
You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).
Yes. License is required for intranet websites, and you can apply for license for intranet domains.
No. It is on a per-domain basis only.
Yes, it is supported. The following links are the instructions:

For JS Image Slider     For Ninja Slider     For ddmenu     For JS Tooltip

Note:
  • If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
  • If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input 1/2 of the price for the second domain, 1/3 for the third domain and so on.
No. The license will be valid forever for your domain with no requirement to renew.

QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.