One Menu for All Pages using ddmenu and Bootstrap

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 nices if you could make that change once, and have it reflected on all pages of the website? I will be showing here how to accomplish this task, and I will be demonstrating it with an example.

The 7z file below contains a website with 3 pages, where each page has the same menu bar. This will serve as our starting point. Our goal would be create a menu par that we can update centrally and have the changes reflected on all pages using that menu bar. Download and unzip the archive to your Desktop.

The tutorial is based on this response to a question. The linked example uses CSS class names that are incompatible with bootstrap CSS. Here, I will be showing here how to painlessly integrate the code in the linked example with an existing menu created with Bootstap CSS.

Because we already have our website and menu bar, we don't need most of the code provided in the linked example above. The only file needed is ddmenu.js. Download and place this file in the js folder.

Next, create a new HTML file menuBar.html which contains only the code corresponding to the menu bar and the associated linkages to CSS and JavaScript files. This is best accomplished by making a copy of one of the three html files and then deleting the parts that are not needed. After this, the new HTML file should have the same contents as those in the file attached below.

Open page1.html and delete all the code in the Navigation section:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Logo and responsive toggle -->
        <div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
                <span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
                    <ul class="dropdown-menu">
                        <li><a href="#">Item1</a></li>
                        <li><a href="#">Item2</a></li>
                        <li><a href="#">Item3</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">AnotherItem</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Header:</li>
                        <li><a href="#">MoreItems</a></li>
                        <li><a href="#">MoreItems</a></li>
                        <li><a href="#">MoreItems</a></li>
                    </ul>
                </li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Replace the deleted code with a link to menuBar.html with anchor id=ddmenuLink as shown:

<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 pages to load 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. Now, you can make changes to the menu bar globally. The 7z file below contains the final result.