Linking html pages to the left nav menu options

[prajwala]

I have created a .js file for left nav manu/sidebar.
I am calling this .js file in my .html page so that i dont have to write the code for left menu in each page.

Now if i click on any other link the new html file opens.but i am not able to apply the classes for nav menu on load.


Below is my code:

In my html page i have included this code

$(document).ready(function () {
$("div.sidebar").find('a').click(function(){
    $(this).parent('li').toggleClass('active');
    $(this).next("ul").slideToggle(800);
    $(this).parent('li').prevAll('li').find('ul').slideUp(800);
    $(this).parent('li').prevAll('li').removeClass('active');

    $(this).parent('li').nextAll('li').find('ul').slideUp(800);
    $(this).parent('li').nextAll('li').removeClass('active');
    //$(this).next("ul.sidebarList").slideDown(500).parent('li').siblings("ul.sidebarList").slideUp("slow");
  });

});

in body tag i have written code for left nav menu:

<!-- sidebar -->
        <div class="sidebar-wrapper grey" id="con"></div>
        <!-- Accordion Menu starts -->
			<script src="js/sidebar.js" type="text/javascript"></script>
        <!-- Accordion Menu ends -->
        <!-- sidebar -->

the .js file of sidebar/menu is given below:

document.write("<!-- sidebar -->"+
        "<div class='sidebar-wrapper grey' id='con'></div>"+
        "<!-- Accordion Menu starts -->"+
		"<div class='sidebar'>"+
            "<ul>"+
               "<li><a href='#'>Admin <span>&nbsp;</span></a>"+
                	"<ul class='sidebarList'>"+
                    	"<li class='dottedBorder'><a href='#'>Add User</a></li>"+
                        "<li><a href='#'>Find User</a></li>"+
                    "</ul>"+
                "</li>"+
                "<li><a href='#'>Manage Consumer <span>&nbsp;</span></a>"+
                	"<ul class='sidebarList' >"+
                    	"<li class='dottedBorder activeLink'><a href='#'><span style='cursor:default'>Search Consumer</span></a></li>"+
                        "<li><a href='new-connection.htm'>Add New Connection</a></li>"+
                    "</ul>"+
                "</li>"+
                "<li><a href='#'>Delivery Process <span>&nbsp;</span></a>"+
                	"<ul class='sidebarList'>"+
                    	"<li class='dottedBorder'><a href='#'>Import Delivery Allocation</a></li>"+
                        "<li><a href='#'>Manage delivery Allocation</a></li>"+
                    "</ul>"+
                "</li>"+
                "<li><a href='#'>Reports <span>&nbsp;</span></a>"+
                	"<ul class='sidebarList'>"+
                    	"<li><a href='#'>Delivery Reports</a></li>"+
                    "</ul>"+
                "</li>"+
            "</ul>"+
		"</div>"+
        "<!-- Accordion Menu ends -->"+
        "<!-- sidebar -->");

[VIPStephan]

Oh my, this is a terrible way to do it. Why don’t you create your entire website with JS so that people without JS enabled/available see nothing at all?

Seriously, you should look into Server Side Includes (also available in PHP and other languages).

[prajwala]

this is clients requirement...i cant make any changes in it

[VIPStephan]

What exactly is the client’s requirement? That you create a menu entirely with JavaScript and insert it with document.write()?