Manage Navigation Menu in One Central Place

Question:

My site has many static HTML pages. Can I store the navigation menu code in one central place so that each time I update the menu I just need to update one HTML code file?

Download Demo
The answer's YES

Let's walk you through how to get it done. We'll start from the source code that you can download from McMenu.

  1. Make a copy of the mcmenu.html document, rename the new copy as mcmenu-source.html.
  2. Open the mcmenu-source.html with a text editor, remove all tags except <title>Menucool McMenu</title> in the head section.
  3. Remove the demo wrapper element. It is removing the opening tag: <div id="menuDemo"> <!--start McMenu--> and its closing tag: <!--end McMenu--> </div>

  4. Save it. Now the mcmenu-source.html will look like below after the change:

    <!DOCTYPE html> <html> <head> <title>Menucool McMenu</title> </head> <body> <div class="menu-icon-wrapper"> (...omitted for brevity) </div> <div id="mcmenu"> (...omitted for brevity) </div> </body> </html>
    We intentionally make the menu source a valid HTML page and be accessible through a link that will be built in next step, so that all your pages in the menu will be crawled by search bot such as Google, Bing, etc.
  5. Open the page mcmenu.html with a text editor, remove all the menu-icon-wrapper element's inner content, and leave only its wrapper there: <div class="menu-icon-wrapper"></div>
  6. Also remove all the menu markup <div id="mcmenu"> ... ... </div>, and add a link (with id="mcmenulink") that links to the mcmenu-source.html document: <a id="mcmenulink" href="mcmenu-source.html">menu</a>
    • The link should be positioned at the place where you want the menu to appear. It is not necessarily be located immediately afther the menu-icon wrapper.
    • The link will be set invisible by the script mcmenu.js
  7. Open the script mcmenu.js with text editor, and update the linkIdToMenuHtml option with the link ID: "mcmenulink". var ddmenuOptions= { menuId: "mcmenu", ...... linkIdToMenuHtml: "mcmenulink", ...... };

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

▲