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 v2018.6.12)

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. What if no menu item is matching the current page URL?
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", "full,180px", "multiple", "all" or "alltop"
    license: "mylicense"
};
var amenu = new McAcdnMenu(amenuOptions);

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:

License is required before the slider goes live on web server. Otherwise a trial version alert might display.
The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains should also be licensed.

License Fee: $9.00
You do not need a license for development or evaluation when using localhost server or local file path. The menu is fully functional.
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

How the license works? Does it go to another web service to verify? Answer
Do I need a license for my dev and testing domain that is different from the final client's domain? Answer
Will it work for sub-domains? Answer
My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
Do you provide developer license that can be applied to multiple websites? Answer
I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
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.

If the validation failed(the domain name doesn't match the license key), the UI component may periodically display a trial version alert, or even disable some functionalities.

The code is fully functional even if the script is not licensed (though it may periodically show a trial version alert). So usually you don't need the license in your dev phase.

If you are developing under the domain localhost, either the trial version alert will be disabled, or we have provided a license for the localhost that you can find in the License section of the product's main page.

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 domains, and you can enter your intranet domain into the For website box after clicking the Buy Now button.

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 the regular price for the first domain, and input 1/2 of the price for the others.

No. The license will be valid forever as long as your domain is not changed.

If your domain name is changed, you need to purchase a separate license for the new domain.

Skins

Expand Mode

Caret Position

Other Demos

Accordion Menu

Features

HTML

JavaScript

Built-in event handlers and functions

init([elementOrId])

expand(elementOrId)

close()

Stylesheet

License:

Question Title

Horizontal

Vertical

Tooltip Menu

CSS Tooltip Generator

JavaScript Tooltip

Responsive Slider

JS Image Slider

Thumbnail Slider

Tabbed Content

Responsive Tabs

Float Panel

Super Panel

Color Picker

Responsive Image Grid

Skins

Expand Mode

Caret Position

Other Demos

Accordion Menu

Features

HTML

JavaScript

Built-in event handlers and functions

init([elementOrId])

expand(elementOrId)

close()

Stylesheet

License:

Question Title