I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.
For example, if category1.php page is open, "category" has the deactivated class.
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(url.indexOf(anchor.href) > -1){
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf.
In this code snippet, the active item is the parent of JS, I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js, hence the pathname is /js, and finally, the filename is js.
Check the code and you'll see what I mean
HIH
function updateMenu(url) {
const active = document.querySelector('.menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('.menu-item'));
links.forEach(function(li){
let anchor = li.querySelector("a");
if(anchor.href.indexOf(url) > -1) {
const parentLI = $(li).parents('.menu-item').get(0)
if(parentLI)
parentLI.classList.add("active");
else
li.classList.add("active");
}
});
}
const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/') + 1);
updateMenu(filename);
li.active > a span{
font-weight: bold !important;
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
<div class="header_builder_component">
<nav class="main-menu">
<ul id="menu-main-menu" class="menu">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
</div>
</div>
<!--Mobil-->
<nav class="mobile_menu">
<ul id="menu-top_menu-1">
<li class="menu-item">
<span>Home</span>
</li>
<li class="menu-item">
<span>category</span>
<ul class="sub-menu">
<li class="menu-item">
<a href="Category1.php">
<span>Category 1</span>
</a>
</li>
<li class="menu-item">
<a href="js">
<span>JS too</span>
</a>
</li>
<li class="menu-item">
<a href="Category2.php">
<span>Category 2</span>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<span>gallery</span>
</li>
<li class="menu-item">
<span>about</span>
</li>
<li class="menu-item">
<span>contact</span>
</li>
</ul>
</nav>
Related
I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
I have a menu and in a mobile view.
This is my Javascript:
$('#main-menu li').click(function(e)
{
$(".mobile-menu-class").css("position", "absolute");
var $el = $('ul',this);
$('#main-menu > li > ul').not($el).slideUp();
$el.stop(true, true).slideToggle(400);
});
$('#main-menu > li > ul > li').click(function(e)
{
e.stopPropagation();
});
And this is my HTML:
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Live Timing
<ul class="sub-menu">
<li>MX World/European</li>
<li>MX Austria</li>
<li>SM Austria</li>
<li>MX Slovenia</li>
</ul>
</li>
<li class="parent"> Motosross
<ul class="sub-menu">
<li>
<a class="parent" href="#">MX Austria</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2007</li>
<li>2006</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Slovenia Drzavno</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Slovenia Pokalno</a>
<ul class="sub-menu hidden-submenu">
<li>2016</li>
<li>2015</li>
<li>2008</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX Hrvatska</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li>
<a class="parent" href="#">MX European / World</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2006</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Supermoto
<ul class="sub-menu">
<li><a class="parent" href="#">SM Austria</a>
<ul class="sub-menu">
<li>2016</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Karting
<ul class="sub-menu">
<li><a class="parent" href="#">Kart Slovenia</a>
<ul class="sub-menu">
<li>2016</li>
<li>2008</li>
<li>2007</li>
<li>2006</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
Cross-Country
<ul class="sub-menu">
<li>
<a class="parent" href="#">CC Slovenia</a>
<ul class="sub-menu">
<li>2016</li>
<li>2015</li>
<li>2012</li>
<li>2011</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="search-btn"> <i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
Everything is working fine, But when I click on a menu which has a submenu and which has a submenu that also has some more submenus, they get opened before I click on them.
How can fix this?
i am having an issue with a menu using bootstrap. The small drop down menus open fine and are aligned however the large drop down menus always align left even if the menu heading is on the far right of the screen
i am looking to have one of the following happen
1 - open in the middle below the heading
2 - open to the right if its to far left
3 - open to the left if its to far right
i have created a fiddle of the issue
https://jsfiddle.net/fu847jnw/2/
how can i acheive the above
<div class="navbar-cont">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>Products
</li>
<li>About Us
</li>
<li>Contact Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Large Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
This Is Really Large Title <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Just Another Menu Type<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example using your code. In the HTML I added a class tmenu-menu to your last menu item, like this:
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">
Then added this code in the CSS
#media (min-width: 1200px) {
.tmenu-menu {
right: 0;
left: inherit;
}
}
Now when you view your site and the width of your browser is 1200px or bigger you will see the large menu sit on the right hand side of your screen. Then when you shrink down the menu once below 1200px the menu will go back to the left side. One SO answer provides the various break points sizes but these are also available on the bootstrap website.
You will have to add your own custom classes and position the menus based on where you want them for each width size. I have updated your js.fiddle with my example code (I also left in the different media sizes that BS uses). This code isn't complete but should help you get pointed in the right direction. Hope that helps.
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});
I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>
This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO