$('.navigation-main').find('li').has('ul').children('a').on('click', function (e) {
e.preventDefault();
// Collapsible
$(this).parent('li').not('.disabled').not($('.sidebar-xs').not('.sidebar-xs-indicator').find('.navigation-main').children('li')).toggleClass('active').children('ul').slideToggle(250);
// Accordion
if ($('.navigation-main').hasClass('navigation-accordion')) {
$(this).parent('li').not('.disabled').not($('.sidebar-xs').not('.sidebar-xs-indicator').find('.navigation-main').children('li')).siblings(':has(.has-ul)').removeClass('active').children('ul').slideUp(250);
}
});
above is my javascript.
HTML part is,
<div class="sidebar-category sidebar-category-visible">
<div class="category-content no-padding">
<ul class="navigation navigation-main navigation-accordion">
<li class="active"><i class="icon-home4"></i> <span>Dashboard</span></li>
<li>
<i class="icon-cogs"></i><span>Settings</span>
<ul>
<li>Add Institution Details</li>
<li>Academic Details</li>
<li>Student Import</li>
<li>Employee Import</li>
<li>Privileges</li>
<li>Assign <?php echo Yii::app()->params['course']; ?>s</li>
<li>Users</li>
</ul>
</li>
<li>
The code is worked for my navigation panel. But after reloading the page to selected submenu, all accordian will close. Code for navigation panel is written in seperate file and include to each page. I want the active class to set to the recently clicked menu after redirection
Related
I am trying to create a custom sidebar menu...I have one page site with section on it...Every sidebar menu link should be connected to a specific section.I have created the menu but have two problems:
1) I want to link the menu items with sections ids with the help of jquery.
2) When user click on the menu item inthe sidebar,it should be closed automatically and scroll the page to that section.
I am new to Jquery and wordpress..Please help me to resolve this issue.
Sidebar Html:
<ul id="primary-menu" class="main-nav" role="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#quote" data-level="1">
<span class="menu-item-text">
<span class="menu-text">Instant Quote</span>
<i class="underline"></i>
</span>
</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#ethos" data-level="1">
<span class="menu-item-text">
<span class="menu-text">Ethos</span>
<i class="underline"></i>
</span>
</a>
</li>
</ul>
Here is my Sidebar:
You have to give your section specific id like <section id="quote">
Then in your main.js write something
$('.menu-item').find('a').click(function(){
var $href = $(this).attr('href');
var $anchor = $($href).offset();
$('body, html').animate({ scrollTop: $anchor.top} ,1500);
return false;
});
For Closing the sidebar It depends on how you made this sidebar.
I have download a navigation bar template and struggling to make it work as I want it to. When a heading is clicked it opens a sub menu to have further links. I do not want all headings to open the sub menu, I want some to just be a link I.E home.
When home is clicked it just highlights home as if opening the submenu and doesnt go to the link. I think this is a js issue.
Below is the html:
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
Home
<li>
Club Information
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>About the Club</h4>
<ul>
<li>About IDMC</li>
<li>Where to Find Us</li>
<li>What We Do</li>
</ul>
<h4>Contacting Us</h4>
<ul>
<li>General Information</li>
</ul>
</div></div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
I believe this is the js causing the issue but not sure what to change:
var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("click",a);b.on("click",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("click").on("click",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();
You want to exclude the items that are just links, not dropdowns. So, add a class of link to the links that have no sub-items. Home
Then change the Javascript to look like this: The code should then not run on the links with a class of link.
var cbpHorizontalMenu=(function(){
var b=$("#cbp-hrmenu > ul > li"), g=b.children("a").not($('.link')), c=$("body"), d=-1;
function f(){
g.on("click",a);
b.on("click", function(h){
h.stopPropagation();
})
}
function a(j){
if(d!==-1){
b.eq(d).removeClass("cbp-hropen");
}
var i=$(j.currentTarget).parent("li"), h=i.index();
if(d===h){
i.removeClass("cbp-hropen");
d=-1
}else{
i.addClass("cbp-hropen");
d=h;
c.off("click").on("click",e);
}
return false
}
function e(h){
b.eq(d).removeClass("cbp-hropen");
d=-1
}
return {init:f}
})();
I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.
The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.
Sidebar without any active class yet
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
It would look like this:
Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops
As you can see Scheduling has a sub-menu.
Then how it would look like if I am on the dashboard. The sidebar would look like this
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu [active]"> //without the []
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
</div>
So the Dashboard would be highlighted in this scenario
And how it would look like if Im on any of the sub-menu under Scheduling
<div class="sidebar-scroll">
<div id="sidebar" class="nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul class="sidebar-menu">
<li class="sub-menu">
<a class="" href="panel-admin.php">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu [active]">
<a href="javascript:;" class="">
<i class="icon-calendar"></i>
<span>Scheduling</span>
<span class="arrow"></span>
</a>
<ul class="sub">
<li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
<li><a class="" href="admin-esl.php">ESL Local</a></li>
<li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.
And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway
Old javascript
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
}
//alert(this.href);
});
});
</script>
The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.
Found the solution with the help of gecco. The javascript is below:
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().closest("li").addClass('active'); //added this line to include the parent
$(this).parent().parent().closest("li").addClass('active');
}
});
});
</script>
I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.
<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$(this).parent().parent().closest("li").addClass('active2');
}
});
});
</script>
The only change I have done here is adding another line to your JS
$(this).parent().parent().closest("li").addClass('active2');
And here is my style sheet
.active2 > a{
color:red; //what ever the styles you want
}
OR
You can do it without a style
jQuery(function($) {
var path = window.location.href;
$('ul a').each(function() {
if (this.href === path) {
$(this).addClass('sub-menu active');
$( this ).parent().parent().closest("li").addClass('active2');
$('.active2 a:first').addClass('active'); //add the active class to the parent node
}
});
});
how to add javascript function to a class of active ??
I do not understand completely about javascript.
if i click menu its like remove and add new class nav active.
<div id="sidebar">
<ul id="mainNav">
<li id="navDashboard" class="nav active">
<span class="icon-home"></span>
Beranda
</li>
<li id="navPages" class="nav">
<span class="icon-document-alt-stroke"></span>
Data Profil
<ul class="subNav">
<li>Peta Lokasi</li>
<li>Site Plan</li>
</ul>
</li>
You can use something like this:
$(selector).click(function(){
$(this).removeClass(your class)
.addClass('active');
});
You have to define the selector you want to do something.
Recently I am having a problem with my jquery code. I was trying to get the elements from the html using the jquery find method but its not working. I have tried changing the elements name but still i cant find where is my mistake.
Here is the following html code:
<div class="navbar-collapse collapse">
<nav>
<ul class="nav navbar-nav navbar-right">
<li class = "dropdown"><span>About Us</span><b class = "caret"></b>
<ul class = "dropdown-menu">
<li data-slide = '1'>Philosophy</li>
<li>Founding Members</li>
<li>Committee</li>
<li>Code of Ethics</li>
</ul>
</li>
<li data-slide='2'>Digital Ecosystem</li>
<li data-slide='3'>Fellow & Members</li>
<li data-slide='4'>SIGs</li>
<li data-slide='5'>Local Chapters</li>
<li data-slide="7">Events</li>
<li data-slide="8">Our Service</li>
<li>
<a href="#" onClick="window.open('logout.php','_self','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes')">
<?php
if (isset($_SESSION['CurrentUser'])) {
echo "Log Out";
}
?>
</a>
</li>
<li>
<a href="#" onClick="window.open('login.php','_self','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes')">
<?php
if (!isset($_SESSION['CurrentUser'])) {
echo "Login/Register";
}
?>
</a>
</li>
</ul>
</nav>
</div>
I have included my jquery code too :
var links = $('.nav, .navbar-nav, .navbar-right').find('li');
Actually what the code does is once it find the 'li' html elements it slides the page each time a 'li' element is being clicked. Now if I click on the 'li' elements my page doesnt scrolls to the selected page. it would be great if someone is there to solve my problem.
Try this (if you really want the "links" tags):
var links = $('.nav.navbar-nav.navbar-right').find('a');