HTML : Separate Sidebar and contents page

Question

I am using Bootstrap sidebar and... How do I avoid repeating the sidebar HTML code for sub-html files? Because if I suddenly want to change the sidebar menu titles, I have to manually change them all in each of sub-html files.

Basically what I want is to keep the sidebar and let the user scroll down the contents page. And I have several separate html files that are linked from the side-bar.

  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li><a href="algorithm.html">Algorithm</a></li>
      <li><a href="algorithm01.html">01: Algorithm & Sort</a></li>
      <li><a href="algorithm02.html">02: Data Structure 1</a></li>
      <li><a href="algorithm03.html">03: Data Structure 2</a></li>
      <li><a href="algorithm04.html">04: Graph 1</a></li>
      <li><a href="algorithm05.html">05: Graph 2</a></li>
      <li><a href="algorithm06.html">06: Greedy Algorithm</a></li>
      <li><a href="algorithm07.html">07: Dynamic Programming</a></li>
      <li><a href="algorithm08.html">08: N Queen</a></li>
      <li><a href="algorithm09.html">09: Programming Challenge 1</a></li>
      <li><a href="algorithm10.html">10: Programming Challenge 2</a></li>     
    </ul>
  </div>

And for contents for each algorithm01 ~ 10 file,

  <div id="page-content-wrapper">

As mentioned above, I want to separate the sidebar code and still want to keep the sidebar for several sub-html files under the sidebar.

Thanks,

Answer 1

What you are looking for sounds like a way to include a separate file. This can be done in a number of ways (assuming your menu is in a separate file named menu.html):

PHP:

<?php include("menu.php"); ?>

jQuery:

$(function(){
  $("#includedContent").load("menu.html"); 
});

HTML:

<object type="text/html" data="menu.html"></object>

or just using ajax.. which would look something like this:

$.ajax({
        url: "menu.html",
        async: false,
        success: function (data){
          // do somerthing
        }
    });

That way you'd only have to maintain your menu.html and changes apply everywhere you included it.

Answer 2

A well known method for avoiding loads of html files for navigation purpose is the use of PHP. Though it may make the code look messy (you are integrating many html files into one!) but it saves you from having to change common code in all html files.

So basically, you echo only that section which is selected in your sidebar. That would help.

In case of a single page website, use of scrollspy which is inbuilt in twitter-bootstrap could be of help.