Store menu HTML code in another document

If your website is not written with server-side technology that lets you include the same code in multiple pages from a single external file, there is a solution for Menucool accordion menu that allows you to store the menu code in a separate HTML file, and you just need to include a link to the file in every page.

Demo

The demo 6 that you can download from Accordion Menu

Instructions

  1. Create an amenu-source.html document with the menu HTML code

    <!DOCTYPE html> <html> <body> <div id="accordion"> <ul>...omitted for brevity...</ul> </div> </body> </html>

    Note: Use absolute path for the links in the menu.

  2. Create a page following the instructions on page Accordion Menu, but don't include the menu HTML code in the page. Instead, just add a link (with id="amenuLink") that links to the amenu-source.html document: <a id="amenuLink" href="amenu-source.html">Menu</a>
    Note:
    • The link should be positioned at the place where the menu should display
    • The link will be set display:none by the script accordionmenu.js
    • We intentionally make the menu source as an HTML document and to be accessible through the hyperlink so that all your pages in the menu will be crawled by search bot such as Google, Bing, etc.
  3. Open the script accordionmenu.js with Notepad, and update the linkIdToMenuHtml option with the link ID: "amenuLink". var amenuOptions = { menuId: "acdnmenu", linkIdToMenuHtml: "amenuLink", expand: "single", license: "mylicense" };

We're done. The menu will be populated on every page if the page includes the three links (accordionmenu.js, accordionmenu.css, and amenu-source.html).

▲