I have dropdown menu. In the top level item has a background image ( Carrot indicator ) applied to the href tag on mouse over. I would like to keep or reset the same background image on the parent li href item when the cursor is on the sub menu items. I am a newbie with jQuery please help!
I tired to following but obviously don't know what I am doing
$('ul.sub-menu').parent('li a').hover(
function() {
$(this).css('background-image','/wp-content/themes/wp-crumblemagazine/images /bg/carrot.gif');
}, function() {
$(this).css('background-image','none');
});
});
});
Here is the url to the page
http://mec.staging.wpengine.com/
Firstly, your selector didnt return any objects,so its probably wrong...and secondly, i wouldnt make the arrow disappear when entering the submenu in the first place.
+ you also need to position the background image, not just enable it.
but ... a sample with color is below
jQuery('ul.sub-menu').parent().find('li>a').hover( function(){
jQuery(this).parent().parent().parent().find("a.sf-with-ul").css('color','red');
},
function(){
jQuery(this).parent().parent().parent().find("a.sf-with-ul").css('color','white');
}
);
Related
I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!
You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});
You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.
So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...
$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});
I get some issue when opening the menu1 dropdown and directly after mouseover the menu2 to open it without closing de menu1.
If I open the menu1 and move the cursor out from the nav to close the dropdown and then mouseover the menu2 it works fine.
If I go directly from menu1 to menu2 or inversely, the menu2 dropdown appear under the menu1 dropdown.
I thinks that I have a mistake in my html or it can be fix with a jquery function but I don't know how to solve this. I wish to add more menu, in the actually there are only two.
I hope that you understand my problem,
Any help would be appreciated
$(document).ready(function () {
var menu = $('.menu')
menu.hide();
$("#mainbutton").mouseenter(function(){
$(".menu").stop().slideDown("fast");
});
$("#nav").mouseleave(function(){
$(".menu").stop().slideUp("fast");
});
var menu2 = $('.menu2')
menu2.hide();
$("#secondboutton").mouseenter(function(){
$(".menu2").stop().slideDown("fast");
});
$("#nav").mouseleave(function(){
$(".menu2").stop().slideUp("fast");
});
});
Here the JSFiddle
I would suggest to add a general class name to all menus .menu and a specific selector for each individual menu (#menu1 or .menu1) as well as an indicator for the active state .active. this way you can simply close all .menu.active
see the following fiddle as a simple proof of concept:
https://jsfiddle.net/ad3a5qyw/2/
EDIT:
I've abstracted the fiddle so you can add data-menu attributes to the nav-items to indicate the associated menu.
I see what's going on here:
It's easy with jQuery and the code you've written already, and here's an example with a new menu item to show how easy it is: https://jsfiddle.net/xyqoj24m/2/
What's going on is that the mouseleave functions are only run when the mouse leaves the entire #nav element. So what needs to be done is handle the hiding/showing of the menus like so:
When the mouse hovers over a menu item, close all other dropdowns and show the correct one.
When the mouse leaves the dropdown or the menu item, close the dropdown.
Take a look at this Javascript and see what that means:
$("#mainbutton").mouseenter(function(){
$(".menu").stop().slideDown("fast");
$(".menu2").stop().slideUp("fast");
$(".menu3").stop().slideUp("fast");
});
$("#secondbutton").mouseenter(function(){
$(".menu2").stop().slideDown("fast");
$(".menu").stop().slideUp("fast");
$(".menu3").stop().slideUp("fast");
});
// leave the first menu dropdown
$("#mainbutton, .menu").mouseleave(function() {
$(".menu").stop().slideUp("fast");
});
// leave the second menu dropdown
$("#secondbutton, .menu2").mouseleave(function() {
$(".menu2").stop().slideUp("fast");
});
Feel free to ask questions!
I am trying to create a customized bootstrap dropdown menu that opens and closes on hover (which I have working), but also stays open if the search bar is focused in the Events dropdown menu until it loses focus or the users clicks away from the dropdown.
Here is my js code:
$('ul.nav li.dropdown').hover(function() {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open'); },
function() {
$("#search-query").focusin(function() {
$('.events').addClass('search-active');
});
if ($('.events').hasClass('search-active')) {
return;
} else {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
Here is a codepen so you can see the rest of my code: http://codepen.io/webinsation/pen/bfDsB
I have tried several different ways to solve this using jquery’s is(':focus') selector with no results.
I appreciate any help or ideas you may have.
Thanks,
– Caleb
You can use :focus to find if the search box has focus in the second hover function, without any need to give things additional events. .size() will return 1 if it has focus and 0 otherwise, and then the ! casts those to true and false, respectively, before negating. Then in the first hover function, check to make sure there are no currently open menus before opening.
$('ul.nav li.dropdown').hover(function() {
if (!$(".dropdown-menu:visible").size()) {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open');
}
},
function() {
if (!$(".navbar-search input:focus").size()) {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
CodePen demo
I'll have my try.
I've used the hover() function and it's callback.
function () {
if (!$("#search-query").is(':focus')){
$(this).removeClass('open');
} else if ( !$( '.events' ).is( ':hover' ) ) {
$("#search-query").blur();
$('.dropdown-menu').hide();
}
});
on hover it's pretty much the same, You can set it back to closest as it was before.
On the callback (no hover) I check if not the .events gets hovered (so it'll show each of the other menu items drop down menus and also hiding the .events menu when hover removed. (you can set it to click if you want).
Here is a Fiddle, Hope it assists.
Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.
You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});
You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/
if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!
So I am trying to create a drop down menu using .hover() and .toggle(). While Have managed to get the menu to appear when the user rolls over the link, it disappears when the user moves off the link to select an item from the menu. Is there a method or technique for keeping the menu toggled even when the user isn't still hovering over the link?
Here is the JS:
<script type="text/javascript">
$(document).ready(function() {
$("#menu_link").hover(function () {
$("#the_menu").toggle();
});
});
</script>
Put the menu element inside the link.
The solution can vary greatly depending on the HTML markup you're using. But a general solution to these kinds of things is to let the body element detect "mouseenters" and detect which element the event originated from. If it's not either #menu_link or #the_menu, then hide the menu.
$("body").mouseenter(function (e) {
var eventParents = $(e.target()).parents();
if (eventParents.index($("#menu_link")) == -1 &&
eventParents.index($("#the_menu")) == -1) {
$("#the_menu").hide();
}
});
$("#menu_link").mouseenter(function () {
$("#the_menu").show();
});
This gives you flexibility in, for example, placing the menu link in a different container div to the menu itself.