Ive wrote some Jquery to work on tables & Desktop which drops down with a hover or a click - it almost works great except it doesn't return (go back up) once dropped down.
Would it be correct to use a mouse leave on the following code to change display to hidden?
Here is the code I have wrote:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(
function(){$(this).click();
}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide();
}
$('ul.sub-menu', this).show();
}
);
})
I also have this in Codepen to show better:
http://codepen.io/anon/pen/jPbJMJ
Thank you
I managed to do this by changing the following:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide(); }
$('ul.sub-menu', this).show();
$("#menu-main-menu").mouseleave(function(){
$("ul.sub-menu").hide();
});
}
);
})
As you can see I used the mouseleave function in Jquery to remove the ul.sub-menu if the #menu-main-menu div was not selected with the mouse.
I hope this helps anyone trying to write a WordPress dropdown Sub navigation menu
Related
I am using the following jquery to create a drop down toggle effect on my side menu (link: http://wp.gattoweb.com/gattotestfour/)
jQuery(document).ready(function(){
jQuery('.site-navigation ul ul').hide();
if(jQuery('.menu-item-has-children').length > 0) {
jQuery('.menu-item-has-children').click(function(event) {
jQuery(this).addClass('toggled')
if(jQuery('.menu-item-has-children').hasClass('toggled'))
{
jQuery(this).children('ul').toggle();
}
return false;
});
}
});
This seems to be doing the job for the toggle effect but when I try to click on one of the drop down links, the menu disappears and doesn't go to the linked page.
Try this as a full replacement for your script:
$(document).ready(function(){
$( '.sub-menu' ).hide();
$( '.menu-item-has-children' ).click( function() {
var $this = $( this );
$this.find('.sub-menu').slideToggle();
$this.find('.sub-menu').click( function(e) {
e.stopPropagation();
});
});
});
* Edited *
Also, I would add he following to CSS and remove the first line of this script:
.sub-menu {
display: none;
}
If it's not there, it's fine.
Lastly, there is the issue of design decisions. Do you want "Weddings" to trigger the sub-menu or go to the weddings page? The way it is now, it will load the sub-menu for a split second while the weddings page loads, but your visitor will never really have the opportunity to see your engagement portfolio.
Maybe try using a custom link of "Portfolios" with a link URL in the wordpress admin of "#" and move weddings to a child position under that.
Here's a fiddle of the fix: https://jsfiddle.net/cr46nekL/1/
I have created a Mega Menu, and I am not proficient in javascript/jquery.
I have applied .slideToggle to bring out the dropdown on click. I want to close the first drop-down automatically if someone clicks on the second drop-down while bringing the 2nd drop-down. I tried Google before asking here. Below is the script I used as well as the link to Codepen.
Codepen link for Mega Menu
Any help would be appreciated. Thanks a ton in advance.
$(function(){
$(".about").click(function(){
$(".mainSub").slideToggle("slow");
$(".one").toggleClass("aboutClick");
})
$(".hf").click(function(){
$(".hfnav").slideToggle("slow");
$(".two").toggleClass("aboutClick");
})
$(".cntct").click(function(){
$(".three").toggleClass("aboutClick");
})
})
Edit: I want the About Us drop-down to close if someone clicks on Housing Finance, and the content of Housing finance drop-down should come up.
I think based on your codepen link, you're looking for
$(function(){
$(".about").click(function(){
$(".mainSub").slideToggle("slow");
$('.mainNavSub>*').removeClass('aboutClick');
$(".one").addClass("aboutClick");
});
$(".hf").click(function(){
$(".hfnav").slideToggle("slow");
$('.mainNavSub>*').removeClass('aboutClick');
$(".two").addClass("aboutClick");
});
$(".cntct").click(function(){
$('.mainNavSub>*').removeClass('aboutClick');
$(".three").addClass("aboutClick");
});
});
It removes the class from the other objects and adds the class to the current object.
I think this should do it.
var mainSubs = $(".mainNavSub > li .mainSub");
$(function(){
$(".mainNav").on("click", ".mainNavSub > li", function() {
var self = $(this),
currentSub = self.find(".mainSub");
if(currentSub.is(":visible")) {
mainSubs.slideUp("slow");
} else {
$.when(mainSubs.slideUp("slow"))
.then(function() {
currentSub.slideDown("slow");
});
}
});
});
I have built a simple accordian style menu. It works, but I would like it to have a specific section toggled open when in a path related to that menu. So if I would be in the "Mens" part of the clothing store, the Mens section of the menu with the child would be visible or toggled. Right now you can click and toggle open each section, but they are all closed when the page first loads. The website section I am referring to is here: http://bemidjisports.designangler.com/men The menu is on the left side.
I assume it has something to do with the jQuery .toggle() method, but I am not sure. Could someone give me an example of this based on the code below?
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(e) {
e.preventDefault();
$(this).siblings("ul").slideToggle("fast");
});
});
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(f) {
var href = this.href;
window.location = href;
});
});
$(document).ready(function() {
$("#nav_1489829 li.selected").ready(function(g) {
$("li.selected").toggle();
});
});
Try
$("#nav_1489829 li.selected a").trigger('click');
I have added a nice (jquery + css) navigation menu to my website, but there's a small problem. When I click on a menu item, the light blue box jumps back to the first item, and I would like the box to stay on the clicked item, but I have no clue how to make it happen.
Here's an example: http://jsfiddle.net/Stylock/ta8g4/
In that example, it actually works how I want, but on my website it doesn't work for some reason. Any help would be much appreciated.
You could add a class to the item like .selected
And in your css you apply the same style to the .selected than the :hover
http://api.jquery.com/addClass/
Or you cloud also modify the css using jQuery. But the first solution is more flexible.
Edit: Use the callback function to add/remove class, after your effect
This might be a solution to the right direction:
Onclick check if the menu already has a classname to get the background changed
remove that class from there
Add the class where you clicked
some minor css changes are needed and u will have solved it
have a great day
you can add a class when other page loads like to add on all pages like
this is bad one
<script type="text/javascript">
$(window).load(function () {
$("#index").toggleClass("highlight");
});
$(window).unload(function () {
$("#index").toggleClass("highlight");
});
</script>
site i used this at http://www.hoteloperaindia.com/
or like this short one to add this to master page
<script>
$(function () {
var loc = window.location.href; // returns the full URL
if (location.pathname == "/") {
$('#home').addClass('active');
}
if (/index/.test(loc)) {
$('#home').addClass('active');
}
if (/about/.test(loc)) {
$('#about').addClass('active');
}
if (/accommodation/.test(loc)) {
$('#accommodation').addClass('active');
}
if (/gallery/.test(loc)) {
$('#gallery').addClass('active');
}
if (/tariff/.test(loc)) {
$('#tariff').addClass('active');
}
if (/facilities/.test(loc)) {
$('#facilities').addClass('active');
}
if (/contact/.test(loc)) {
$('#contact').addClass('active');
}
});
</script>
site where i used this one http://rtshotel.in/
change it with your code
every jQuery plugin I've found is based on <li> elements to generate the menu items.
I have <div id = "menubutton"> element that represents the menu button and another, not-related (maning it is not a child) <div id = "menucontent"> that contains the menu items (mixed stuff, images etc). I want this second, hidden div to appear when I click on the button. it should hide back when i leave the button OR when i leave the content div, in case i'm selecting items or doing stuff there.
Now, this is the code I have so far, but the clearTimeout thing doesn't seem to work. Any help? Pointing out a plugin to help my work would work as well.
Thanks!
var timer;
$('#menubutton').click(function() {
$('#menucontent').show();
});
$('#menubutton').mouseout(function() {
timer = setTimeout('$("#menucontent").hide()', 500);
});
$('#menucontent').mouseover(function() {
clearTimeout(timer);
}).mouseout(function() {
setTimeout('$("#menucontent").hide()', 300);
});
EDIT SOLUTION
I solved the problem using hover insted of mouseover / mouseout
Try this:
$('#menubutton').click(function() {
$('#menucontent').show();
});
$('#menubutton').mouseout(function() {
$(this).data('myTimer', setTimeout('$("#menucontent").hide()', 500));
});
$('#menucontent').mouseover(function() {
clearTimeout($(this).data('myTimer'));
}).mouseout(function() {
setTimeout('$("#menucontent").hide()', 300);
});