Features
- Auto Open: When the web page loads, the menu item that best matches the current page URL is automatically opened and highlighted.
- Single Source
: Supports using one menu markup file across all pages (including static HTML sites). - Content Container Option: Can also be used as a content container (see the third item in the demo).
HTML
Click here to view the demo's HTML code.
The menu is typically structured using nested <UL> elements, allowing unlimited submenu levels.
JavaScript
Adjust the options in accordion-menu.js as needed to configure the menu's behavior.
var amenuOptions =
{
menuId: "accordion",
linkIdForDataSource: null,
expand: "single", //"single", "multiple", "all" or "alltop"
animation: 150,
};
var amenu = new McAcdnMenu(amenuOptions);
// If you need to dynamically build the menu, you can remove the above line, and add it to the place when it is ready to run.
If your site is a static HTML site, and you want to maintain your website menu in a separate file, set linkIdForDataSource to the ID of a link that points to the external markup file.
Example:
<a id="myMenuLink" href="res/amenu-markup.txt">Menu</a>
Then set linkIdForDataSource: "myMenuLink" in the options.
With this setting, the script loads the menu markup from the linked file and renders the menu in place of the link (the link itself will be hidden).
- single: Only one item can be expanded at a time. Expanding a new item automatically collapses other expanded ones.
- multiple: Allows multiple items to be expanded at the same time.
- all: Same as "multiple", but all submenu sections are expanded when the page loads.
- alltop: Similar to "all", but only the top-level submenu sections are expanded on page load; deeper levels remain collapsed.
Built-in Functions
Sometimes you may need to control which menu item is active programmatically, such as when:
- The current page URL does not exist in the accordion menu, but you still want a related menu item to open and become active.
- A menu item's href partially matches the page URL and becomes active even though it shouldn't.
- You want a specific menu item to open when clicking a button or link outside the menu.
In these situations, you can use the following built-in functions:
-
amenu.open(elementOrId)
Opens (expands) the specified menu item.
- The elementOrId can be a DOM element, or the ID of the element.
- If the target is an <a> element, that link will be shown with an active style.
- If the target is an <li> element, the menu item will expand without applying the active link style.
-
If this accordion is being used as a content container, the target can be any element inside the accordion (not just <li> or <a>).
Example, try click this link: Can I open a specific menu item from outside?
Code for the link:<a href="#" onclick="amenu.open('faq3', true); return false;">Can I open a specific menu item from outside?</a>- The first parameter, faq3, is the target element ID in the accordion:
<p id="faq3">Yes this can ...</p> - The second parameter true (optional) scrolls the page so the target item becomes visible.
- The first parameter, faq3, is the target element ID in the accordion:
-
amenu.close()
Closes all folders and subfolders in the accordion.
Styles
The stylesheet is included in the download package.
Note: the last section of the CSS is for the content container. If you are using the accordion solely as a menu, that section can be safely removed.