I have a burger icon that when clicked turns into an X. When clicked again turns back into the 3 lines. I have it working so when the links are clicked the menu goes away, but the burger menu doesn't return back to 3 lines. Nothing I have tried is working. Here is what I have.
var burgerIcon = $('.burger-icon');
function toggleBurger(){
burgerIcon.click(function(){
if(burgerIcon.hasClass("is-active") === true)
{
burgerIcon.removeClass("is-active");
//console.log("remove");
}
else
{
burgerIcon.addClass("is-active");
//console.log("add");
}
});
}
toggleBurger();
$('.toggle-nav').click(function() {
$('body').toggleClass('show-nav');
return false;
});
$('nav ul li > a').click(function(){
//console.log("clicked");;
$('body').trigger( "click" );
burgerIcon.trigger( "click" );
});
HTML:
<nav>
<ul data-magellan-expedition="fixed">
<li data-magellan-arrival="work">
Work
</li>
<li data-magellan-arrival="about">
About
</li>
<li data-magellan-arrival="shadow">
Shadow CC
</li>
<li data-magellan-arrival="clients">
Clients
</li>
</ul>
</nav>
Here is a fiddle of what I'm trying to explain: jsFiddle
Since you are using jQuery in your code you can leverage that and then really ALL you need I believe is this:
$('nav ul li > a,.c-hamburger').click(function () {
console.log("clicked");
$('body').toggleClass('show-nav');
if ($('body').hasClass('show-nav')) {
$('.c-hamburger').addClass("is-active");
} else {
$('.c-hamburger').removeClass("is-active");
}
});
Updated fiddle: http://jsfiddle.net/qe38m0t9/2/
NOTE: this uses two selectors, one for the "hamburger" thing and another for the menu separated by a comma then does the same thing depending upon which is clicked.
Related
I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get:
CodePen example.
jquery:
$(document).ready(function() {
$('.expand').click(function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
$('section').mouseleave(function(){
$(this).hide();
});
I've also tried the following:
$('section').hide();
$('.section').on('mouseout',function(){
$(this).hide();
})
Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?
Working example.
You should use setTimeout()/clearTimeout() functions to solve your problem so you've to attach mouseleave event to the button with class dropbtn and both mouseleave/mouseleave events (using hover()) to the div dropdown-content so when the mouse leave the button to any other element you should check if the mouseenter is inside the dropdown, if yes clear the timeout the hide_dropdown so it will not hide the div, else your time out will hide the dropdown after 50ms :
var hide_dropdown;
$('.dropbtn').mouseleave(function(e){
var _this = $(this);
hide_dropdown = setTimeout(function(){
_this.next('.dropdown-content').removeClass('show');
},50);
});
$('.dropdown-content').hover(
function(){
clearTimeout(hide_dropdown);
},
function(){
$(this).removeClass('show');
}
);
Hope this helps.
you code it's confusing so i made a simple example for what you want.
see here snippet >
$(".dropbtn").click(function(){
var showMe = $(this).siblings(".drop-menu"),
visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
$(showMe).slideDown()
$(visibleDrop).slideUp()
$(showMe).mouseleave(function(){
$(this).slideUp()
})
})
ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul { display:none;position:absolute;top:100%;left:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="dropbtn"> Has Children1</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a class="dropbtn"> Has Children2</a>
<ul class="drop-menu">
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
</ul>
</li>
<li><a>No children</a></li>
<li><a> No children</a></li>
</ul>
or fiddle > jsFiddle
let me know if it helps
<div>
Menu
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
Page 1<br />
Page 2<br />
Page 3<br />
</div>
link:-http://jsfiddle.net/5SSDz/
In your codepen example, I have added the following code snippet inside ready callback which seems to work.
$('.expand').on("mouseleave", function(e){
e.preventDefault();
$('section').slideUp('normal');
});
Here is the complete js code
$(document).ready(function() {
$('.dropbtn').on("mouseleave", function(e){
$(".dropdown-content").removeClass("show");
});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('section').hide();
});
So the first block of code opens and closes the .main-navigation while putting the shadow overlay over the page at the same time. But what I would like to accomplish is to click anywhere outside the navigation to do the same action(close the menu and remove the overlay) only if the menu is opened and overlay is over the page - so if those two classs are applied.
Fiddle: https://jsfiddle.net/bfgb951w/
<header id="ovlay">
<span class="nav-toggle eq">≡</span>
<nav class="main-navigation">
<span class="nav-toggle">×</span>
<ul class="menu">
<li>About</li>
<li>Works and stuff</li>
<li>Contact</li>
</ul>
</nav>
</header>
$(document).ready(function(){
$('.nav-toggle').on('click', function(){
$('.main-navigation').toggleClass('open');
$('#ovlay').toggleClass('overlay');
});
});
$(document).click(function(){
if($('.nav-toggle').hasClass('open')) {
$('.main-navigation').toggleClass('open');
$('#ovlay').toggleClass('overlay');
}
});
You never set the open class to the .nav-toggle element so while the $(document).click() fires, the if-statement within it always yields false. Change it to:
$(document).ready(function(){
$('.nav-toggle').on('click', function(){
$('.main-navigation').toggleClass('open');
$('#ovlay').toggleClass('overlay');
return false;
});
});
$(document).click(function(event){
if($('.main-navigation').hasClass('open') && $(event.target).closest(".main-navigation").length == 0) {
$('.main-navigation').toggleClass('open');
$('#ovlay').toggleClass('overlay');
}
});
Check this fiddle: https://jsfiddle.net/1n78d9jq/
Note the added check in the document.click that prevents closing when the click is on the main menu itself.
I have a simple menu that has an arrow within the anchor. I have jQuery that adds a class to show the arrow on click. However I need it to NOT "show the arrow" on click if the clicked li a doesn't have a submenu. Here's a rough example of my menu:
<ul id="menu">
<li>TopLevel_LinkOne <img src="img/down-carat.png" class="down-carat"></li>
<li>TopLevel_LinkTwo <img src="img/down-carat.png" class="down-carat"></li>
<li>TopLevel_LinkThree <img src="img/down-carat.png" class="down-carat">
<ul class="sub-menu">
<li>Submenu Link One <img src="img/down-carat.png" class="down-carat"></li>
<li>Submenu Link Two <img src="img/down-carat.png" class="down-carat"></li>
<li>Submenu Link Three <img src="img/down-carat.png" class="down-carat"></li>
</ul>
</li>
</ul>
In this example I do not want the arrow to show, if "TopLevel_LinkOne" or "TopLevel_LinkTwo" is clicked. I can't remove the arrow image because it's being added automatically by the nav walker in Wordpress.
Here's my jQuery:
$('#menu li a').click(
function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if('some jquery here that checks if THIS has submenu') {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
Try this:
if($(this).parent().find('ul').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
If your HTML allows you to make certain assumptions, you can do this really easily.
For example, if it's a safe assumption that your list items will only ever contain either "just a single <a> element", or "a single <a> element followed by a submenu", then you can just do:
if( this.parentNode.children.length > 1)
But if you want robustness, you could do this:
if( $("ul",this.parentNode).length)
Try,
if($(this).closest('li').find('.sub-menu').length > 0)
Full code:
$('#menu li a').click(function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if($(this).closest('li').find('ul.sub-menu').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
try this way
JQUERY CODE:
$('#menu li a').click(function() {
$('ul li a').removeClass('show-arrow'); // Remove any previous arrows
if($(this).siblings('ul').length) {
$(this).addClass('show-arrow'); // Show the arrow image
}
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/MHg67/3/
Happy Coding :)
This one might just work for you:
$('#menu > li').click(function () {
$('ul li a').removeClass('show-arrow');
$(this).has('ul.sub-menu').addClass('show-arrow');
}
You can modify it accordingly to suit your needs. Thanks!
I've got a simple dropdown script and I want it to hide all open dropdowns on a click outside of the menu. But it does not seem to work, does anyone know why?
You can find it here: http://codepen.io/dr-potato/pen/rLleC?editors=101
HTML
<ul>
<li>Home</li>
<li class="Navigation-listItem is-dropdown">
About
<ul class="Navigation-list is-dropdown is-hidden">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="Navigation-listItem is-dropdown">
Contact
<ul class="Navigation-list is-dropdown is-hidden">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
CSS
.Navigation-list {
display: block;
}
.Navigation-list.is-hidden {
display: none;
}
JS
$(document).ready(function() {
$('.Navigation-listItem').click(function() {
$(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
});
});
/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$(".Navigation-listItem.is-dropdown").addClass('is-hidden');
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$(".Navigation-listItem.is-dropdown").click(function(e){
e.stopPropagation();
});
Working Fiddle
jQuery Code
$(document).ready(function () {
$('.Navigation-listItem').click(function () {
$(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
});
/* Anything that gets to the document
will hide the dropdown */
$(document).on('click', function (event) {
if ($(event.target).closest('#menu').length == false) {
$(".Navigation-list.is-dropdown").addClass('is-hidden');
}
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$(".Navigation-listItem.is-dropdown ").click(function (e) {
e.stopPropagation();
});
});
With help from this answer
You can change the display property of your dropdown in this manner. This is just a rough code.
if(dropDownShow.css('display') != 'block'){
dropDownShow.css('display', 'block');
dropDownShow.css('position', 'absolute');
}
else{
dropDownShow.css('display', 'none');
}
With the info you gave and the codepen I can't see it working, but I suppose that $(document).click(function() to hide won't work because the drop down is inside the document so when you click it, it'll disappear. I recommend you to see this post How to hide/show drop down list content in HTML.
I am trying to register clicks using jQuery and there seems to be an issue with the padding.
Here's a jsFiddle to help with seeing it.
I'm trying to get clicks on an open menu to do nothing while clicks anywhere else will close all the menus. It works well, but the biggest problem is if you click above the <li> but still within the <div> it fails. It seems to be that the padding isn't counted as part of the div or something.
The code is here as well:
HTML
Main
<div id="mainMenu" class="menu">
<ul>
<li class="menuItem">item 1
</li>
<li class="menuItem">item 2
</li>
<li class="menuItem">item 3
</li>
<li class="menuItem">item 4
</li>
<li class="menuItem">item 5
</li>
</ul>
</div>
Menu 2
<div id="menuTwo" class="menu">
<ul>
<li class="menuItem">item 1
</li>
<li class="menuItem">item 2
</li>
<li class="menuItem">item 3
</li>
<li class="menuItem">item 4
</li>
<li class="menuItem">item 5
</li>
</ul>
</div>
JS
$(document).ready(function () {
//Attach a handler to the document for clicks.
$(document).on("click", function (e) {
//Get the click's target and convert to $ object.
$target = $(e.target);
//Find out if the click occurred on a menu.
$parents = $target.parents(".menu");
if ($parents.length > 0) {
console.log(["Menu click", e]);
return;
} else {
//If it wasn't on a menu close the open menu.
console.log(["Non-menu click", e]);
$('.menu').hide();
}
});
//Handle showing the menu.
$('.menuLink').on("click", function (e) {
//Close all other menus.
$('.menu').hide();
console.log("Started");
e.stopPropagation();
e.preventDefault();
var targetMenu = $(e.target).attr("href");
$(targetMenu).show();
});
});
CSS
#mainMenu {
background-color: lightblue;
}
#menuTwo {
background-color: lightgreen;
}
.menu {
display: none;
border: 1px solid black;
}
Your problem is with this line:
$parents = $target.parents(".menu");
Change it to this:
$parents = $target.closest(".menu");
The div doesn't have a parent with the class .menu, so if you click that, it doesn't find anything. closest includes the selected element in the search.
http://jsfiddle.net/ecnGr/
Use closest to solve your issue
$parents = $target.closest(".menu");
If you still want to use parents then add an extra check to see if the clicked element is the div.
if ($parents.length > 0 || $target.is('.menu')) {
Check Fiddle
The problem with your code was that parents method does not include the element in question. So you have to do that check explicitly, or use closest which includes the element in question as well.
You can just consume all clicks on the menu, which will do the trick.
$(document).ready(function () {
//Attach a handler to the document for clicks.
$(document).on("click", function (e) {
$('.menu').hide();
});
$('.menuLink').on("click", function (e) {
$('.menu').hide();
e.stopPropagation();
e.preventDefault();
var targetMenu = $(e.target).attr("href");
$(targetMenu).show();
});
//Handle showing the menu.
$('.menu').on("click", function (e) {
e.stopPropagation();
});
});
http://jsfiddle.net/MightyPork/UCwAt/8/