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,

Are you sure you don't want all the numbered list items to be sub items of the first one? Seems more logical. — Bram Vanroy, Dec 14 '13 at 13:41

score 3 · Accepted Answer · answered Dec 14 '13 at 13:37

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.

Thanks, this works, but html way I tried is a little bit tricky to still keep the same layout with bootstrap so I can't fit in the way it was. THanks though — , Dec 16 '13 at 00:56

score 0 · Answer 2 · answered Dec 14 '13 at 13:36

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.

HTML : Separate Sidebar and contents page

2 Answers2

Linked