I have an overlay Menu that has 3 dropdowns.
When you click on one of the parent items if it has a dropdown , a class is added to the child to "activate" the dropdown and it expands and shows. Currently it works fine , and on click the class is added and removed if clicked again.
The problem is currently you can have all dropdowns active and open at the same time. What I need to happen is to have only one dropdown be able to be active at a time.
if one dropdown is active , and the user clicks on another , the original active dropdown closes and the newly clicked one becomes active.
Also if the dropdown is active and user clicks on the same parent item again the dropdown closes.
Current HTML
I have excluded all other list items except for the ones that have dropdowns.
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
Current Jquery
Here is the original Jquery I was using to do a basic toggle of active class, Basically just using the toggleClass on the child UL of the clicked trigger.
Commented out , I previously tried removing all active classes and then instead of toggling the class on click element I was adding, but removing all classes , only to add it to the clicked one made it not possible to close a dropdown by clicking the same trigger again.
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
// Active css Class for dropdowns in Main Overlay
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Attempt to to remove all active classes on UL's prevents dropdown from
// being able to close if the same trigger is clicked twice
// $('ul.dropdown--overlay-is-active').removeClass($overlayClasses.OverlayDdActive);
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
Thank you for the help in advance, I know there are a lot of questions that relate to this problem on here, I did a lot of searching but could not find any that would help me with this specific case.
i hope this will work plz comment if it cause any problem.
<html>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if($(this).find('ul').hasClass('dropdown--overlay-is-active')){
$overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
$overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
}else{
$overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
$overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
$(this).find('ul').addClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').addClass($overlayClasses.ButtonIconIsRotated);
}
});
</script>
<style>
.dropdown--overlay{
display:none;
}
.dropdown--overlay-is-active{
display: block !important;
}
</style>
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
Figured Out a solution that works as wanted.
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Toggle Class On clicked Element
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
// Remove all Active Dropdowns From all Siblings
$(this).siblings().children('ul').removeClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
Related
in my web project, I used a free theme https://themewagon.com/themes/free-bootstrap-4-html-5-admin-dashboard-website-template-skydash/
Here in the nav bar, I customized it as
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link elements" href="~/Home/Index">
<i class="icon-grid menu-icon"></i>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index","SelfService")">
<i class="ti-menu-alt menu-icon"></i>
<span class="menu-title">Our Services</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("OnProcessTasks","SelfCareTasks")">
<i class="ti-timer menu-icon"></i>
<span class="menu-title">In Process Tasks</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("CompletedTasks","SelfCareTasks")">
<i class="ti-file menu-icon"></i>
<span class="menu-title">Completed Tasks</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("OnProcessTasks","SelfCareTasks")">
<i class="ti-face-smile menu-icon"></i>
<span class="menu-title">My Profile</span>
</a>
</li>
</ul>
</nav>
My issue is When I run this, on load first 2 items showed as Active and both items are highlighted. I checked with the sample, but it runs without this issue, also I tried removing the href and then the nav bar showed only one item as active.
I still couldn't figure out why this happening. Any comments?
I can't see what is wrong other than just this thing:
<a class="nav-link elements" href="~/Home/Index">
Change it to:
<a class="nav-link elements" href="#Url.Action("Index", "Home")">
The reason for this change is because you're following the Razor Syntax.
I have a sidebar in my cPanel, And this sidebar has a menu toggle.
for example ==>
When clicking on the 'Account setting' there are some links or options under it.
And this is my code
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-dock-top"></i>
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
Note : I'm working in Angular 14
I have a html code below, the jsfiddle link is https://jsfiddle.net/Debra321/b0d4Lupn/
<html>
<body>
<div class="side-collapse in" id="site-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" target="_self">
Home
</a>
</li>
<li class="dropdown dropdown-hover open">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Store <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a class="itemlistChange" data-url="/store/products" target="_self">
All Products
</a>
</li>
<li class="">
<a class="itemlistChange" data-url="/store/cart" target="_self">
My Cart
</a>
</li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/promotions">Promotions</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/patches">Patches</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/skincare">Skin Care</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/maintenancekits">Maintenance Kits</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/salestools">Sales Tools</a></li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Commissions <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/commissions" target="_self">
Commissions
</a>
</li>
<li class="">
<a href="/rank" target="_self">
Rank Advancement
</a>
</li>
<li class="">
<a href="/volumes" target="_self">
Volumes
</a>
</li>
<li class="">
<a href="/commissions/myearnings" target="_self">
Earnings
</a>
</li>
<li class="">
<a href="/commissions-earnings" target="_self">
Commissions Earnings
</a>
</li>
<li class="">
<a href="/commissions/incomestatement" target="_self">
Income Statement
</a>
</li>
<li class="">
<a href="/commissions/commissionspaycard" target="_self">
Commissions Pay Card
</a>
</li>
<li class="">
<a href="/volume-maturity-calendar" target="_self">
Volume Maturity Calendar
</a>
</li>
<li class="">
<a href="/carry-over-volume-calendar" target="_self">
Carry Over Volume Calendar
</a>
</li>
<li class="">
<a href="/commissions/matchingbonus" target="_self">
Bonus Qualification
</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Organization <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/app/enrollmentredirect" target="_blank">
<i class="fa-plus"></i>
Enroll new...
</a>
</li>
<li class="">
<a href="/prepopulatedcartlist" target="_self">
Pre Populated Cart Builder
</a>
</li>
<li class="">
<a href="/personally-enrolled-team" target="_self">
Personally Enrolled Team
</a>
</li>
<li class="">
<a href="/upcoming-promotions" target="_self">
Upcoming Rank Promotions
</a>
</li>
<li class="">
<a href="/new-distributors" target="_self">
New Distributors List
</a>
</li>
<li class="">
<a href="/recent-activity" target="_self">
Recent Activity List
</a>
</li>
<li class="">
<a href="/retail-customers" target="_self">
Retail Customers
</a>
</li>
<li class="">
<a href="/preferred-customers" target="_self">
Preferred Customers
</a>
</li>
<li class="">
<a href="/reps" target="_self">
Reps
</a>
</li>
<li class="">
<a href="/binary-tree-viewer" target="_self">
Binary Tree Viewer
</a>
</li>
<li class="">
<a href="/organization/enrollertreeviewer" target="_self">
Enroller Tree Viewer
</a>
</li>
</ul>
</li>
<li>
<a href="/events" target="_self">
Events
</a>
</li>
<li>
<a href="/AutoOrder" target="_self">
Monthly Subscription Orders
</a>
</li>
<li>
<a href="/orders" target="_self">
Orders
</a>
</li>
<li>
<a href="/resources/resourcelist" target="_self">
Resources
</a>
</li>
<li class="visible-xs">
<a href="/logout" target="_self">
Sign out
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
I expect to select Organization>Binary Tree Viewer, but cannot do that successfully. Since Organization is the direct 3rd child of the ul, I try to retrieve it by
document.querySelector('#site-navigation-navbar-collapse ul > li:nth-child(3)')
But what I got is always "Promotions" in "Store". How to select the Binary Tree Viewer by CSS selectors? Any suggestions are appreciated.
How can I add another level to this menu structure from the HTML at the bottom of the page?
Current
Test
--->a
--->b
what I'm trying to do
Test
--->a
--->1
--->2
--->b
--->1
--->2
html
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<i class="glyphicon glyphicon-circle"></i> Facebook
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
<ul>
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
<ul class="list-unstyled collapse" id="submenu">
<li> 1 </li>
<li> 2</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
</ul>
I believe you just need to create another collapse element with a unique Id. using the <a> element as your toggle.
Bootstrap navbar Active State is not working.
I have bootstrap v3.
I use the class="active" on mynavbar on its submenu when I collapse none work.
Here is my code with js/css/bootstrap files I have included:
<li class="active">
<a href="javascript:;" data-toggle="collapse" data-target="#demoadmin">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul id="demoadmin" class="collapse in">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
You didn't show us enough HTML to see exactly what you are doing wrong, but it looks like you're trying to get the active class to work on a bootstrap dropdown-menu.
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
DEMO
Try this
$(document).ready(function(){
$(".active").removeClass("active");
$(".dropdown-menu li").addClass("active");
});