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");
});
}
});
});
Related
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
I am trying to do the following code which works fine:
/*
** SHOW OR HIDE A MENU DEPENDING IF I CLICK OUTSIDE OR INSIDE
*/
function showBasket(){
var $basket=$('#basket');
var nstyle=$basket.css("display");
if (nstyle=='none'){
$basket.fadeIn(false,function(){//showing the basket
$('html').bind("click",function(){
$basket.fadeOut();//hidding the basket
$("html").unbind("click");
});
});
}
}
Is there possible to avoid that the layer 'basket' doesn't hide when i click on it? My problem is that when i click in the html documen,t it hides, and i want that, but i also dont want to include the layer 'basket' in that event, because i have controls to use in the layer.
I would appreciate any help or idea,
thank you in advance!!
try this
function showBasket(){
var $basket=$('#basket');
var nstyle=$basket.css("display");
$basket.on('click',function(e){
e.stopPropagation();
return false;
}
if (nstyle=='none'){
$basket.fadeIn(false,function(){//showing the basket
$('html').bind("click",function(){
$basket.fadeOut();//hidding the basket
$("html").unbind("click");
});
});
}
}
I am struggling with trying to make a link in a separate div container open a panel in a completely different div container (which if you click on the second div containers link, the panel also opens and the link itself has an active state) - I got the part down where if I click on a link in the first div container, the panel opens up from the second div container, but am struggling with making that first div containers link activate the active state in the second div container...
If you take a look at the demo, simply click on the {Ñا} Members tab, as the other 2 are inactive atm...Once you click on that tab, a panel opens (not the one I am talking about though), now that; that panel is open, look at the very bottom, on the left side in the div container that holds the info title: "Official Roster", there is a link in there that says "rank", if you click on that specific link, the O.F. panel opens up like it should, however, the active state selects them all rather than just the 1 that is selected...I'm getting close, but am seriously stuck and can't seem to figure it out...
Demo: http://jsfiddle.net/Djdzw/2/
I believe it is pure javascript that would be needed, however, it could also be the css as well. I'll provide what code I have atm below, however - I'll only provide the javascript since posting all the code that is required would simply be too much...So, if you could simply take a look at the demo above, it might be easier on the eyes ;)
JAVASCRIPT:
/* ===== The section below is what needs to be edited ===== */
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a').addClass('active');
});
Did you mean this?
$('.info_box p a').click(function () {
var id = this.id; //get the id of the clicked item
var a = $('#profile_list a[href="#' + id +'"]'); //construct the selector to select the menu item which has the same href
$('#profile_list a').not(a.addClass('active')).removeClass('active'); //now do the add/remove class
});
Fiddle
I did this and it worked. I hope it is what you're looking for:
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a.panel[href=' + $(this).attr('href') + ']').addClass('active');
});
jsFiddle
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');
Will try to explain what i mean :)
I have two hidden divs that opens with jquery, they both works quite good... when I'm using them separated... But if I open the div when the other one is open, the first one keeps being open in the background... I would like that one to close.
Is there an if else function i can use ?
This is what i have so far.
$(document).ready(function(){
$(".contactDiv").hide();
$(".show_hide_contact").show();
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
});
});
$(document).ready(function(){
$(".loginDiv").hide();
$(".show_hide_login").show();
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
});
});
I have created a jsfiddle to show some more.
http://jsfiddle.net/h2Hfg/
Just slide the other div too:
$('.show_hide_contact').click(function() {
$(".contactDiv").slideToggle();
$(".loginDiv").slideUp();
});
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
$(".contactDiv").slideUp();
});
Very nice of you to include the jsFiddle :)
I am not sure there is a function exactly that does that but you can do it manually. Check it out
$(document).ready(function(){
$(".contactDiv").hide();
$(".loginDiv").hide();
$(".show_hide_contact").show();
$(".show_hide_login").show();
$('.show_hide_contact').click(function(){
$(".loginDiv").hide();
$(".contactDiv").slideToggle();
});
$('.show_hide_login').click(function(){
$(".contactDiv").hide();
$(".loginDiv").slideToggle();
});
});
Found out how to.
I just added the hide function to the divs.
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
$(".loginDiv").hide(); /* there is hiding prev opened tag*/
});