| prajwala |
12-19-2012 09:21 AM |
Linking html pages to the left nav menu options
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
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:
Code:
<!-- 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:
Code:
document.write("<!-- sidebar -->"+
"<div class='sidebar-wrapper grey' id='con'></div>"+
"<!-- Accordion Menu starts -->"+
"<div class='sidebar'>"+
"<ul>"+
"<li><a href='#'>Admin <span> </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> </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> </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> </span></a>"+
"<ul class='sidebarList'>"+
"<li><a href='#'>Delivery Reports</a></li>"+
"</ul>"+
"</li>"+
"</ul>"+
"</div>"+
"<!-- Accordion Menu ends -->"+
"<!-- sidebar -->");
|
