One Menu for All Pages

Question:

My site is now at 20 HTML pages and will be growing. Is it possible that I store/manage the navigation menu in one central place? I mean by doing so I don't need to cut and paste the HTML code on every page, and also I don't have to edit the code on every page when a change is made to the menu.

Download Demo
The answer's YES

Let's walk you through how to get it done. We'll start from the package downloaded from Drop Down Menu.

  1. Make a copy of the ddmenu.html document, rename the new copy as ddmenu-source.html. Then open the ddmenu-source.html with Notepad, remove the whole head section, and save it.

    The ddmenu-source.html will look like below after the change:

    <!DOCTYPE html> <html> <body> <nav id="ddmenu"> (...omitted for brevity) </nav> </body> </html>
  2. Open the page ddmenu.html with Notepad, remove all the menu markup <nav id="ddmenu"> ... ... </nav>, and add a link (with id="ddmenuLink") that links to the ddmenu-source.html document: <a id="ddmenuLink" href="ddmenu-source.html">Menu</a>
    • The link should be positioned at the place where you want the menu to appear
    • The link will be set invisible by the script ddmenu.js
    • We intentionally make the menu source in HTML format and be accessible through the link so that all your pages in the menu will be crawled by search bot such as Google, Bing, etc.
  3. Open the script ddmenu.js, and update the linkIdToMenuHtml option with the link ID: "ddmenuLink". var ddmenuOptions= { menuId: "ddmenu", linkIdToMenuHtml: "ddmenuLink", ...... };

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

▲