I'm developing a horizontal menu with submenus. I need to use Javascript to show the submenu when the user hovers over the parent menu.
I wrote an example in JSFiddle, but it appears to fail in FireFox! In Chrome, IE and Safari is running!
Here's the test page:
www.andreferreira.eu5.org
Here's the code:
jsfiddle.net/R2ySL/
<script>
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function() {
$('li', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#FFF", "color":"#debe65"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"", "color":"#FFF"});
}
);
});
</script>
You can make that without changing css rules via javascript just add the following to your stylesheet
#menu li:hover > a {
color: #debe65;
background-color: #FFF;
text-decoration:none;
}
and javascript should looks like
$(document).ready(function () {
var $nav = $('#menu > li');
$nav.hover(
function () {
$('li', this).stop(true, true).slideDown('fast');
},
function () {
$('ul', this).slideUp('fast');
});
});
Related
If you go to the JSFiddle, and click "About" and then "Contact" in rapid succession, the drop-down options (which appear to the right of the parents) appear appended to each other although only one parent is selected - this is not desired. I'm trying to only allow a new selection to be made once the appear/disappear animation has been completed, avoiding any appending of the children's content.
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
console.log("A");
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
});
} else {
console.log("B");
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
});
I tried adding this code after the opening of the function, but it only gave me the alert.
$('#nav .nav-ul li').click(function(){
var $this = $(this);
if(!$this.data('disabled')){
$this.data('disabled', true);
alert('next click enable only in 5 seconds');
setTimeout(function(){
$this.data('disabled', false);
}, 5000);
}
});
All
Following code is not working with Internet Explorer. As I would like render hover event on class in document.load or document.ready event. But i could not succeed
jQuery(window).load(function () {
var maxHeight = 250;
jQuery(".dropdown").hover(
function () {
jQuery("li.firstmenu ul li").removeClass("XYZ");
jQuery("li.firstmenu ul li").removeClass("ABC");
jQuery('.dropdown-menu', this).stop(true, true).fadeIn("500");
jQuery(this).toggleClass('openDemo');
jQuery(this).addClass("active-Demo");
jQuery("div#MegaMenu").find("li.secondLI").removeClass("DEF").addClass("hideJIJO");
//jQuery('.active-global-tab > a').removeClass("default-fontcolorD").addClass("default-fontcolorB");
jQuery('ul.dropdown-menu > li.col-sm-4').each(function () {
jQuery(this).height(maxHeight);
});
},
function () {
jQuery('.dropdown-menu', this).stop(true, true).fadeOut("500");
jQuery(this).toggleClass('open');
jQuery(this).removeClass("active-tab");
//jQuery('.global-nav-item > a').removeClass("default-fontcolorB").addClass("default");
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
you can use window.onload instead.
This method automatically called when page load.
Example
window.onload = function(e){
var maxHeight = 250;
jQuery(".dropdown").hover(
function() {
jQuery("li.firstmenu ul li").removeClass("XYZ");
jQuery("li.firstmenu ul li").removeClass("ABC");
jQuery('.dropdown-menu', this).stop(true, true).fadeIn("500");
jQuery(this).toggleClass('openDemo');
jQuery(this).addClass("active-Demo");
jQuery("div#MegaMenu").find("li.secondLI").removeClass("DEF").addClass("hideJIJO");
//jQuery('.active-global-tab > a').removeClass("default-fontcolorD").addClass("default-fontcolorB");
jQuery('ul.dropdown-menu > li.col-sm-4').each(function() {
jQuery(this).height(maxHeight);
});
},
function() {
jQuery('.dropdown-menu', this).stop(true, true).fadeOut("500");
jQuery(this).toggleClass('open');
jQuery(this).removeClass("active-tab");
//jQuery('.global-nav-item > a').removeClass("default-fontcolorB").addClass("default");
}
);
}
I recently bought a website and am having trouble with editing it to make it fit to my needs. The thing I'm trying to achieve is that making the side navbar toggle to hide the nav list when the window size gets smaller than 800 px. I'm sure this must be a ludicrously easy task to complete for many of you but I'm quite new in playing around with such codes. I hope you can take time to help with it.
Thanks in advance,
Here is the jQuery code needs to be edited.
$(document).ready(function() {
"use strict";
$("nav ul li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
}
});
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("nav ul").slideToggle(200);
});
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("nav ul").show();
} else {
$("nav ul").hide();
}
$("nav ul li").unbind('mouseenter mouseleave');
$("nav ul li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
});
if ($(window).width() < 800) {
$("nav ul li a").click(function() {
"use strict";
$("nav ul").slideToggle(200);
});
}
I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link
Tried jquery:
$('.dropdown-toggle').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
But it is not working...
In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into
.navbar .btn-group:hover > .dropdown-menu {
display: block;
}
it should work with your example code.
You can use inner Bootstrap API:
$(document)
.on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)
Try this
jQuery(function ($) {
$('.navbar .dropdown').hover(function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function () {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function () {
location.href = this.href;
});
});
I have a menu that when hovered, shows the subnav of the current hovered item by adding .stick to the submenu and removing it on mouseleave. If not hovering on another menu item I want the last hovered menu item to stay open for another 2 seconds before hiding.
Here's what I have. I know that the mouseleave() called on the container won't work since it's within the handlerOut of the ul#main-nav > li hover function but I left it to show you where I last left off.
$('ul#main-nav > li').hover(function() {
var $this = $(this);
clearTimeout(window.menustick);
$this.find('ul.submenu').addClass('stick');
}, function() {
var $this = $(this);
if($this.siblings().hover()) {
$this.find('ul.submenu').removeClass('stick');
} else if ($('#main-nav').mouseleave()) {
window.menustick = setTimeout(function(){
$this.find('ul.submenu').removeClass('stick');
}, 2000);
}
});
Here's the jsFiddle.
Thanks in advance!
JS:
$("ul#main-nav > li").hover(
function(){
$(this).children('ul').hide().fadeIn(500);
},
function () {
$('ul.submenu', this).fadeOut(2000);
});
Fiddle: http://jsfiddle.net/3F7bJ/3/
You had a couple of issues with your scripts and CSS.
Firstly, your CSS had the following rule:
nav ul#main-nav li:hover > ul.submenu {
display: block;
}
This needs to be modified to:
nav ul#main-nav li > ul.submenu.stick {
display: block;
}
This meant that your CSS was controlling the visibility rather than the class 'stick'.
As you mentioned the use of .hover() and .mouseleave() in the script code is incorrect and not required. As at that point you are already in the mouseleave (handlerOut) of the hover.
The below code appears to perform the desired effect you were looking for:
var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
$('#main-nav ul.submenu').removeClass('stick');
$this.find('ul.submenu').addClass('stick');
}, function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
menuStickTimeoutId = setTimeout(function () {
$this.find('ul.submenu').removeClass('stick');
}, 2000);
});
Working demo:
http://jsfiddle.net/3F7bJ/2/