javascript keep sub navigation bar open on hover - javascript

I created a fiddle
jsfiddle.net/ExaLM/1
Now the sub navigation bar is closing on mouse leave event.
But if I hover on sub link bar then also sub link bar closes.
So what changes should I make in my code for that?
code is
$(document).ready(function(){
$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.main-link").removeClass("active");
$(this).addClass("active");
$("#sub-link-bar").animate({
height: "40px"
});
$(".sub-links").hide();
$(this).siblings(".sub-links").fadeIn();
});
$("#main-nav li a").mouseleave(function(){
$("#main-nav li a.main-link").removeClass("active");
$(".sub-links").fadeOut();
$("#sub-link-bar").animate({
height: "10px"
});
});
});

I updated your Fiddle
Basically, what you want is to avoid hiding the elements when the mouseleave event is fired. To do so, you could bind on both the a.main-link and its <ul> element, or you can do it like I did: bind your jQuery events on the whole <li> so mouseleave is not triggered until you leave both the main link or the sub-links, as it is contained in the whole <li>. I had to change hover to mouseenter to avoid it being fired repeatedly.
I also had to add some .stop() to avoid the animation repeating entirely every time the mouse gets out of the menu and bounce a few times before finally stopping. You should also remove the .hide() because sometimes when moving the mouse fast, the elements are still visible when they are hidden and it makes it look jerky.
I hope this is enough for you to figure out how to fix your menu.

Related

Mouseover triggering underlaying sibling?

I have 2 sibling divs. One div is a sub-navigation that partially overlays the slider div. I have a mouseover event on the slider, which hides the sub-navigation.
The problem is, as soon as I mouse over the sub-navigation, the slider mouseover event is triggered even though my mouse isn't touching the slider yet - although the mouse is technically over the slider - it's just being overlayed by the sub-navigation.
Hopefully I explained this well that someone will understand. Is there any way around this issue?
Thanks.
If you are trying to hide the second sibling, this will work. Just replace the css class names (subNav, slider) with whatever they actually are. Also, instead of left:100px do whatever you wanted to do here to the second div.
div.subNav:hover + div.slider {
left: 100px;
}
The plus sign (+) is a "adjacent sibling selector" in css.

Using Javascript to toggle an overlay on and off

I have a div called "navbar_menu". When clicked I want the div "nav_overlay" to fade in and then when clicked again, I want it to fade back to not being visible.
At the moment I have set the div 'nav_overlay" to 'display: none' and then using the following javascript, it shows itself when "navbar_menu" is clicked.
$(document).ready(function(){
$(".navbar_menu").click(function(){
$("nav ul").toggleClass("showing");
$("#nav_overlay").fadeTo("fast", 0.8);
});
});
The tag "nav ul" is just a menu that is sliding when "navbar_menu" is clicked. The point is to have an overlay covering the content when the menu slides out and then when the menu slides in again, the overlay disappears.
I'm thinking that I need an if statement testing whether the div is visible or not? I'm just wonering if there is anyone who can help with the best solution for this.
Thanks very much.
Something like this should work:
$("#nav_overlay").fadeToggle()
See the documentation for the options.
PS: I assuming that the overlay has necessary styles to cover the whole page with position: fixed or something.
if( $('#your-element').is(":visible") ){
// #your-element is visible.
} else {
// #your-element is not visible
}
That should test if something is visible or not but a link or jsfiddle to your html as well would be helpful.
Assuming CSS class 'showing' only makes the element appear. You can use the .toggle function to make it hide and reappear on its own.
http://api.jquery.com/toggle/
http://api.jquery.com/fadetoggle/
// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");

JQuery hover fadeIn/fadeOut on different divs

I have lists inside a div called header which I want to expand the lists on hover over each list, but I want all the lists which have been hovered over to stay open until the mouse is moved out of the header div. So far I have fadeIn/fadeOut for each list individually or I can get each list to fadeIn and stay open but not fadeOut whenever I move out of the div.
here is the code that I am using: http://jsfiddle.net/jTCdg/11/
The line commented out in the javascript is what changes between all the lists staying visible or the list fadeIn/fadeOut on hover.
This is my first time using javascript so help would be greatly appreciated. thanks
jQuery hover is a shortcut for the mouseenter and mouseleave event handlers. You can define both separately.
$(document).ready(function() {
$("#header ul").mouseenter(function() {
$(this).find("li").fadeIn();
});
$("#header").mouseleave (function() {
$(this).find("li").fadeOut();
});
});
Also see the updated jsfiddle.

jQuery menu effect gone wrong

I am seeking for a way to fade a submenu in a list-ordered navigation as I want it to fade:
There is always an active menu item - and if the active menu item is in the submenu - also an active menu parent. So, at init the submenu with an active current item or current parent item should be visible. If I hover an other menu item, its submenu will fade in, the active one fades out. After leaving the whole menu, the active submenu fades in again. Plus, I used the jQuery plugin hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html) to give a timeout for each hover action.
This is what I got so far, but it's really buggy. For some reasons, submenus are sometimes just disappearing completely, also when hovering two items without leaving the navigation, two submenus overlap. Does anyone have an idea or tip for me? =) Please see a demo HERE: http://jsfiddle.net/BQuPz/
Problems with CSS: It's best not to play with display:none and opacity yourself, leave it up to jQuery and use the proper functions for fadeIn() and fadeOut().
Instead of putting display:block; float:left; on the menu's <li> elements, you should use display:inline-block. If you float the <li>s, that effectively tears them out of their parent container, leaving the ul with zero size, hence it is impossible to listen to mouseleave events unless you explicitly set its size.
Problems with code: In the hoverIntent plugin, timeout might not be what you're looking for. Timeout automatically fires the out event after a certain amount of time. To delay the hover effect, use sensitivity and interval instead. Check out the documentation page.
If you apply the above fixes, the only events needed are hoverIntent's over and the main navigation's mouseleave. The over event fades in the current submenu and fades out the rest, the mouseleave fades in the active submenu when the user hovers off the navigation. Look at your modified jsfiddle demo: http://jsfiddle.net/BQuPz/4/
// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();
// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
over: function(){
// Find the hovered menu's sub-menu
var $submenu = $(this).find('.sub-menu');
// Stop the animation and fade out the other submenus
$('.sub-menu').not($submenu).stop(true,true).fadeOut(260);
// Fade in the current one
$submenu.fadeIn(260);
}
});
// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
// Fade out all inactive submenus
$('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);
// Fade in the active one
$('.current-menu-parent .sub-menu').fadeIn(260);
});
Instead of using animate in $(this).find("ul").animate({'opacity': '1'}, 250);
I would have used fadeIn and fadeOut functions with callbacks. Then you're sure your fadeIn animation begins after the fadeout ends
element.fadeOut(250,function(){otherElement.fadeIn(250)})

How to get a link to take priority over toggle effect

I have a jquery animation that toggles the width of a div. Within the div, I have a span that has a link in it. Every time i click the link, instead of being directed to the link url the div's with is toggled instead.
I have a simple demo here: http://jsfiddle.net/ewWFc/
if you expand the orange block and hover over the bottom part, there should be a more link. How do I change my code so the the more link will take me to the corresponding url and take priority over the toggle effect?
Add a click handler that stops the click from bubbling up to the containing div:
$('#slider .more a').click(function(e){
e.stopPropagation();
});

Categories

Resources