I have two different pages with a common sidebar menu. When I click on the menu, it will redirect to another page and a class should be added to the parent menu. Even when I refresh the page.
Check this code
Here is my js code:
$(document).ready(function () {
$("#sidebar-menu a").each(function () {
var pageUrl = window.location.href.split(/[?#]/)[0];
console.log(pageUrl);
if (this.href == pageUrl) {
$(this).addClass("active");
$(this).parent().addClass("active"); // add active to li of the current link
$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
$(this).parent().parent().parent().parent().prev().click();
$(this).parent().parent().prev().click(); // click the item to make it drop
}
});
});
menuother.html
<link rel="stylesheet" href="http://themepixels.me/slim1.1/css/slim.css">
<style>
</style>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Dashboard
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' >Page 01</a></li>
<li class="nav-sub-item">Page 02</li>
<li class="nav-sub-item">Page 03</li>
<li class="nav-sub-item">Page 04</li>
<li class="nav-sub-item">Page 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Menu
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Menu 01</li>
<li class="nav-sub-item">Menu 02</li>
<li class="nav-sub-item">Menu 03</li>
<li class="nav-sub-item">Menu 04</li>
<li class="nav-sub-item">Menu 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-book-outline"></i> Pages
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
Pricing
<ul>
<li class="sub-sub-link"><a href="" >Pricing 01</a></li>
<li class="sub-sub-link">Pricing 02</li>
<li class="sub-sub-link">Pricing 03</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Hi
<!-- slim-sidebar -->
<script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
$(".menu").click(function(){
localStorage.setItem("menu", this.getAttribute('data-number'));
});
// For default Activation
var data = localStorage.getItem('menu');
if(!data)
localStorage.setItem("menu", 1);
console.log("Default Configuration ");
console.log(data);
// console.log( $('.menu').eq(data).html());
console.log( $('.menu').eq(data-1).css({background: 'red'}));
$('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
</script>
menu.html
</style>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Dashboard
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="menu.html" class="nav-sub-link menu" data-number='1' > Page 01 </a></li>
<li class="nav-sub-item">Page 02</li>
<li class="nav-sub-item">Page 03</li>
<li class="nav-sub-item">Page 04</li>
<li class="nav-sub-item">Page 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Menu
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Menu 01</li>
<li class="nav-sub-item">Menu 02</li>
<li class="nav-sub-item">Menu 03</li>
<li class="nav-sub-item">Menu 04</li>
<li class="nav-sub-item">Menu 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-book-outline"></i> Pages
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
Pricing
<ul>
<li class="sub-sub-link"><a href="" >Pricing 01</a></li>
<li class="sub-sub-link">Pricing 02</li>
<li class="sub-sub-link">Pricing 03</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- slim-sidebar -->
<script src="http://themepixels.me/slim1.1/lib/jquery/js/jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
$(".menu").click(function(){
localStorage.setItem("menu", this.getAttribute('data-number'));
});
// For default Activation
var data = localStorage.getItem('menu');
if(!data)
localStorage.setItem("menu", 1);
console.log("Default Configuration ");
console.log(data);
console.log( $('.menu').eq(data-1).css({background: 'red'}));
$('.menu').eq(data-1).parent().parent().prev().css({background: 'red'})
</script>
Actually, You give me only html and js code so I used the local storage for this solution. you can solve this problem using many way.
Related
I have a sample code below
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
If one of the li has a class active how can I also add a class active on the parent li or this part
<li class="treeview">
You can use jquery to achieve this. Please find the snippet below.
$('.treeview-menu li').on('click', function() {
$(this).addClass('active');
$(this).closest('li.treeview').addClass('active');
})
.active>a {
color: green;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul>
If you need the entire treeview ancestry of an active <li> to have the class .active, you can use jQuery's :has:
$('.treeview:has(li.active)').addClass('active');
$('.treeview:has(li.active)').addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you need only the immediately closest treeview, you can use .closest():
$('.treeview li.active').closest(".treeview").addClass('active');
$('.treeview li.active').closest(".treeview").addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4 (Active)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You don't want to select any li.active outside of the .treeview tree hierarchy:
$('.treeview li.active').closest('.treeview').addClass('active');
I have 2 different pages with common sidebar menu. In my example, you can see Parent Menus with Submenus. In Dashboard I've page1 sub-menu, when I click on it, redirects to other pages, I want in sidebar Parent menu should add a class. Even I refresh the page.
Here is my HTML code
Check this fiddle
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Dashboard
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Page 01</li>
<li class="nav-sub-item">Page 02</li>
<li class="nav-sub-item">Page 03</li>
<li class="nav-sub-item">Page 04</li>
<li class="nav-sub-item">Page 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-home-outline"></i> Menu
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item">Menu 01</li>
<li class="nav-sub-item">Menu 02</li>
<li class="nav-sub-item">Menu 03</li>
<li class="nav-sub-item">Menu 04</li>
<li class="nav-sub-item">Menu 05</li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<i class="icon ion-ios-book-outline"></i> Pages
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item sub-with-sub">
Pricing
<ul>
<li class="sub-sub-link">Pricing 01</li>
<li class="sub-sub-link">Pricing 02</li>
<li class="sub-sub-link">Pricing 03</li>
</ul>
</li>
</ul>
</li>
</ul>
Since you're using jQuery, you could use the jquery lib js-cookie to add the selected menu to the cookies then read it in the other pages and attach the class.
But I suggest another way based on the URL of the page target the related anchor them activate the parent sidebar menu item.
Add the following line to the top of your ready function :
$(document).ready(function() {
$('a[href="'+window.location.pathname+'"]').closest('.sidebar-nav-item').find('.sidebar-nav-link').addClass('active');
...
});
I have a menu with two menu items and I want to use JQuery to display sub-menu for each menu item when the user clicks on menu item.
What happens is both submenues are displayed (where class="dropdown-content"). How can I modify my code to just display the submenu that is
under the menu item clicked. Is there any way to do that without having to specify id?
Below is my menu:
$('.menu-item').on('click', function() {
$('.dropdown-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
you need to use children() function to toggle the children of particular DOM
so use $(this).children("ul").toggle(); to accomplish what you are looking for
$('.menu-item').on('click', function() {
$(this).children("ul").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'>
<span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
The main problem is you should use this to identify the li you are cliking, and then use find() to traverse downwards along descendants of DOM elements.
$('.menu-item').on('click', function() {
$(this).find(".dropdown-content").toggle();
});
.dropdown-content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-mobile">
<li class="menu-item">
<img src="images/img1.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span id="lblLinks">Links</span></a>
<ul id="linksdrop" class="dropdown-content">
<li>Link1</li>
<li>Link2</li>
</ul>
</li>
<li class="menu-item">
<img src="images/img2.png"/>
<a class="hide-on-med-and-down white-text" href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
I have a side menu with some menu items.
One menu items can have some submenu items
Here is how I realize this
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
I need to click on a menu item and it will show submenu items if I click once again it will hide them. How can I realize this?
See here I apply click even on li not on because on anchor you add a url of other pages, so 22 event not fired on same element.Checkout and if any issue let me know
$(document).ready(function() {
$('.main_wrapper li').on('click', function() {
$(this).children('.submenu').slideToggle();
});
});
.submenu {
display: none;
}
ul li {
background-color: #000;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<ul class="main_wrapper">
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
<li>Patient Database</li>
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
</ul>
if you use bootstrap then it will be easy to do with it.
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<!-- my changes starts here -->
<li data-toggle="collapse" data-target="#test">Calendar
<ul class="submenu collapse" id="test">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
source: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
I have two dropdown options:
<ul class="menu">
<li hidden class="inicio"><a href "#">Inicio</a>
</li>
<li class="dropdown">
OPTION 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 1.1
</li>
<li>Option 1.2
</li>
</ul>
</li>
<li class="dropdown">
OPTION 2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 2.1
</li>
<li>Option 2.2
</li>
</ul>
</li>
</ul>
When i tried to create the Javascript to toggle it, they both opened:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
})
Should I create a function and invoke it on the html or can I call the toggle event for a specific id?
You can use jQuery's next method:
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li hidden class="inicio"><a href "#">Inicio</a>
</li>
<li class="dropdown">
OPTION 1<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 1.1
</li>
<li>Option 1.2
</li>
</ul>
</li>
<li class="dropdown">
OPTION 2<b class="caret"></b>
<ul class="dropdown-menu">
<li class="bd-ric">Option 2.1
</li>
<li>Option 2.2
</li>
</ul>
</li>
</ul>