Keep Menu Source in One Place

If you are not using a server side language to develop your website such as PHP or ASP.NET, you may think you have to cut and paste the menu code on every page. It will be really a hard work if ever you need to change your links or add new pages to your website.

Download DemoFortunately there is a solution to it.

  1. Grab the source code from Tab Menu

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

    The tabmenu-source.html will look like below after the change: <!DOCTYPE html> <html> <body> <ul id="tabmenu"> (menu content omitted) </ul> </body> </html>

    Use absolute path for each link in the menu. For example:

    <a href="/folder1/page1.html">Tab Menu</a>

    Not use: <a href="page1.html">Tab Menu</a>

  3. Open the page tabmenu.html with Notepad, remove all the menu markup <ul id="tabmenu"> ... ... </ul>, and add a link (with id="tabmenuLink") that links to the tabmenu-source.html document: <a id="tabmenuLink" href="tabmenu-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 tabmenu.js
    • We intentionally make the menu source as 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.
  4. Open the script tabmenu.js, and update the linkIdToMenuHtml option with the link ID: "tabmenuLink". var ddmenuOptions= { menuId: "tabmenu", linkIdToMenuHtml: "tabmenuLink", preview: true, delay: 200, speed: .04, license: "mylicense" };

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

Please click the Download Demo button above and play with it. Note it can only be tested through HTTP on a web or localhost server. It will not work if opened from local file path.

▲