One of the most common annoyances when developing a website is having to make the same change to a menu on all pages of the website. Wouldn't it be nice if you could make that change once, and have it reflected on all pages of the website? Looking around the web for a solution to this common problem, this article was the best thing I could find. Unfortunately however, the example presented in the article uses CSS class names that are incompatible with the Bootstrap CSS framework. So I decided to write this tutorial where I will be showing via an example how to seamlessly integrate Boostrap CSS and with ddmenu.
NOTE for Chrome Users: This solution works equally well on both Firefox and Chrome when the page is loaded from a server. However, if the page is loaded from your local machine rather than a server, then for some reason Chrome does not display it properly. Thus, as you are working through this totorial, use Firefox rather than Chrome.
Suppose we have a website consisting of 3 HTML pages designed with Bootstrap, and suppose each of those 3 HTML files contains a copy of the same menu bar. Our task is to remove the menu bar code from from all 3 HTML pages, and replace with with a "link" to menu bar that lives in a separate file called menuBar.HTML. In that way, whenever we need to make changes to the menu, we would only update the single file menuBar.HTML and that change would be reflected in all pages of our website.
To make this tutorial easy to follow, I went ahead and created the starting condition of the problem (3 web pages with indivisual identical menus), and the solution to it (3 web pages with a single centralized menu). You are encouraged to download the file Problem.7z and then work through the tutorial to get to the solution. You can then compare your progress with the file Solution.7z. To unzip the files, you can download 7zip.
Unzip the file Problem.7z, and then locate the folder named js. Inside of that folder, place the file ddmenu.js. To download the file, right click on the link below and choose "Save link as" from the context menu.
Create a new HTML file named menuBar.html in the folder where your other HTML files are located. This will be just a standard HTML page containing only the menu bar and the links that it needs to CSS and JS files. One way to do this is by making a copy of any of the three HTML files from the example and then editing out all parts that are not needed for the menu to operate properly. Here is what you should end up with (Right click on the link and choose "Save link as" to save the file and inspect it in the code editor of your choice):
Open page1.html, delete all code in the <!-- Navigation --> section, and replace it with a link to the file menuBar.html as follows:
<!-- Navigation --> <a id="ddmenuLink" href="menuBar.html"></a>
Finally, add a reference to the ddmenu.js file, by placing the following line of code after the meta tags at the top of the html file. (Alternatively, you can place this code at the bottom of the file, right before the closing </body> tag if you want your page to load a bit faster.)
<script src="js/ddmenu.js" type="text/javascript"></script>
Upon confirming that page1.html works properly after these changes, go ahead and apply the same changes to page2.html and page3.html.