On my website europebathroom.com I have a horizontal main menu. When I hover over one of the menu-items a dropdown appears. When I hover over another menu-item the drop-down of that menu-item appears, as it should of course.
However, I don't want this to happen when you accidentaly quickly touch another menu-item.
I want it to be like the horizontal menu on the following link: badkamerwinkel.nl.
So, there should be a delay in the change of the dropdown by some milliseconds on hover, to avoid annoying situations if you accidentaly touch another menu-item.
Is there a script I can use to do this? I am not very experienced yet, my apologies.
Thank you so much in advance, and please know this is my first post on this great support site, so any criticism and tips are welcome to make my next posts better!
Mike
EDIT:
The menu works approximately like the menu below.
<ul class="main">
<li class="item1">
<div class="submenu1">...</div>
</li>
<li class="item2">
<div class="submenu2">...</div>
</li>
<li class="item3">
<div class="submenu3">...</div>
</li>
</ul>
.submenu1{
display:none;
}
.main .item1:hover .submenu1{
display:block;
}
.submenu2{
display:none;
}
.main .item2:hover .submenu2{
display:block;
}
So if you hover item1 the submenu1 shows, if you hover item2 the submenu2 shows immediately. Is there a way to delay this action by a few milliseconds? Thanks!
You can use JQuery hoverIntent plugin to delay the animations. I have used this to create a similar kind of behavior.
check it out here
Related
I am trying to close the nav dropdown menu on scroll but I don't think I am targeting the class on the button correctly with jQuery as it is not working.
I am trying to target the .nav-menu-list class.
main.js and index.html
$(window).on('scroll', function() {
$('.nav-menu-list').prev().dropdown("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header" class="navbar-toggleable-md sticky clearfix fixed ">
<header id="topNav">
<div class="container">
<div class="row">
<nav>
<ul class="desktop-nav-links ">
<li class="list-group-item" >
Home
</li>
<li class="list-group-item">
<button class="dropdown-toggle nav-menu-list" type="button" id="" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu " aria-labelledby="content"> Content </div>
</li>
</ul>
At first I tried using $('.dropdown-toggle').prev().dropdown("toggle"); which worked and closed the menu on scroll. The issue this gave me though was that it also targeted all of the dropdown-toggles on the page causing things to break.
Any suggestions will be really appreciated, thank you.
Update
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open using -
$('li.show .nav-menu-list').dropdown("toggle");
So it is going to target the dropdown that is open.
Thank you everyone for helping me with this issue.
To target a class in jQuery, you must specify a class selector:
$('.nav-menu-list').prev().dropdown("toggle");
Note the leading . in front of nav-menu-list, which you were missing.
Thank you everyone for helping me with this issue.
After trying a few different ways of targeting the open dropdown menu to close on scroll, I found the best way for me was to explicitly target the class when the menu dropdown is open with
$('li.show .nav-menu-list').dropdown("toggle");
So it is only going to be on the dropdown that is open.
I will add as an update to my question.
I hope this may also help anyone else with similar issues
I have a dropdown menu that currently displays the dropdown unordered list on hover, which are lists of links. Hover is problematic for users and I want to change the to 'click' or 'toggle'. Here is the code currently in the site:
$("#main_nav .dropdown").hover(function() {
$('.dropdown-menu', this).fadeIn("fast");
$('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
$(this).addClass('active');
},
function()
{ $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
});
if I switch the .hover to .toggle the drop down menus work as I would expect them to. The problem is it now breaks my links. When I click on them they do nothing and go nowhere. Here is the HTML:
<ul class="nav_main">
<li class="active">Home</li>
<li class="dropdown">
Decisions <b class="caret"></b>
<ul class="dropdown-menu mega-menu" id="decisions">
<li class="mega-menu-column">
<ul>
<span>
<li>Our Decision on CanLII</li>
<li>SCC Decisions</li>
<li>Canada Supreme Court Reports (PDF)</li>
<li>vLex Canada Open</li>
<li>Sask Cases Judicially Considered</li>
</span>
<span>
<li>Federal Court</li>
<li>Quebec (translated decisions)</li>
<li>Tax Court of Canada</li>
</span>
<span>
<li class="list-heading">Tribunals</li>
<li>Automobile Injury Appeal Commission</li>
<li>Law Society of Saskatchewan</li>
<li>Labour Arbitration Awards – Sask</li>
<li>Sask LRB (CanLII)</li>
<li>Sask LRB</li>
</span>
</ul>
</li>
</ul>
Is there any easily explainable reason as to my this simple switch in code is causing the links to stop working completely?
Thanks in advance!
I was unable to precisely reproduce the issue with the code you provided, but I did observe issues clicking some of the links.
Removing the invalid span elements from the ul seems to have corrected the observed issue.
Try removing those span tags from the ul.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Allowed child elements of ul
My guess would be that your .toggle is hijacking the click event for the whole container. So when you click a link it's toggling the menu rather than firing the default click for a link. You may try stopping propagation on the links, so it doesn't fire the click event on the parent menu:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
I recently updated the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8.
I thought it wouldn't make much of a difference but my SideNav is not working right anymore. When I click on the menu, it does slide out but the dark overlay is on the entire screen and I cannot click anything. This is what it looks like:
It looks like the 'sidenav-overlay' div with the opacity is above the sideNav. Also, I cannot click on any menu inside this sideNav.
The implementation of this is basically similar to what is mentioned in the documentation. I'm not sure what changed over here.
EDIT1:
My code -
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="slide-out" class="side-nav hide-on-med-and-down print-hidden">
<li>Upload<i class="material-icons right">cloud_upload</i></li>
<li class="divider"></li>
<li class="div-title">Admin</li>
<li>Users</li>
<li>Roles</li>
</ul>
<i class="material-icons">view_headline</i>
LOGO
</div>
</nav>
</div>
What fixed this was that my side-nav ul list was inside the navbar-fixed div. This wasn't an issue in the previous version but for some reason, this broke in the current 0.97.8 version.
Just moving the side-nav outside the navbar section fixed this for me. Hopefully this helps someone else in the same situation.
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.
Also if the mouse is hovered on the LI then check them menu down.
As you can see it just slides down and back up once you leave the "div".
Im stuck... and have tried for hours searching for if statements etc, i just cant get the syntax correct.
my example
Here is a working example
HTML
<div id="leftWrap">
<div id='accordion'>
<ul>
<li><div>Absorption</div>
<ul style="display: none;">
<li>Accessories</a>
<ul style="display: none;">
<li>AA500AFG</li>
<li>AA500F</li>
<li>AA500G</li>
<li>AA990F</li>
</ul>
</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
<li><div>Fluorescence</div>
<ul style="display: none;">
<li>Accessories</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript/JQuery
jQuery(document).ready(function() {
$('#accordion ul > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
});
If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.
jQuery(document).ready(function() {
$('#accordion ul:first-child > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
$('#accordion ul:not(:first-child) > li').click(function(){
$(this).children("ul").slideToggle('slow');
});
});
Make it a child of the <div>, then it won't cancel the event when you leave it.
Also I should note that it's more semantic to make a navigation out of nested lists (such as
Category ItemItem
<ul>
<li>Category
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
I tried to fiddle in your fiddle, but the markup and css are a lot confusing.
As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.
It does everything you want. However for the customizations and others things, I will leave it up to you.
http://jsfiddle.net/dttdB/13/
You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.