I making a single page website. When I open my menu and click on a li item, I want my menu to close.
For the moment it is working when I click back on the "menu-burger-wrapper" and I want to set the same thing when I click on items li.
There is my code:
$(document).ready(function() {
$('#menu-burger-wrapper').click(function(e) {
e.preventDefault();
$this = $(this);
if ($this.hasClass('is-opened')) {
$this.addClass('is-closed').removeClass('is-opened');
} else {
$this.removeClass('is-closed').addClass('is-opened');
}
})
});
<nav class="menu-base" id="menu-base">
<ul class="menu-item">
<a id="en-cours" class="work_menu link link--over">
<li>works</li>
</a>
<a class="about_menu link link--over">
<li>about</li>
</a>
<a class="link link--over">
<li>contact</li>
</a>
</ul>
</nav>
<!-- Header -->
<div id="header">
<!-- Menu -->
<div id="menu-burger-wrapper">
<div id="menu-burger">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</div>
Try this - just attach the click handler to the li elements.
var clickHandler = function (e) {
e.preventDefault();
$this = $(this);
if ($this.hasClass('is-opened')) {
$this.addClass('is-closed').removeClass('is-opened');
} else {
$this.removeClass('is-closed').addClass('is-opened');
}
};
//attaching the event to both, together.
$('#menu-burger-wrapper, ul.menu-item li').on('click', clickHandler);
You can use toggleClass to toggle class.
You can use , to separate the elements on which you want to bind event.
$('#menu-burger-wrapper, .menu-item').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('is-opened is-closed');
});
$('.menu-item').on('click', 'li', function() {
$('#menu-burger-wrapper').trigger('click');
});
Demo: https://jsfiddle.net/tusharj/7c5nd7rj/1/
Related
Having trouble closing the Menu after clicking the hamburger button. What's the best way to close the entire menu screen once any of the items are clicked?
My HTML is:
`<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">>
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>`
I've tried using jQuery but havent had success. Here's the js code:
`$('.toggler').on('click', function () {
$('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
$('.menu-wrap').toggleClass('open');
});`
Or if there's a simpler way using CSS to close the menu?
Here's the codepen to run: https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5
https://jsfiddle.net/h7et0qnv/
this menu style work on input chechbox situation. If checked your hamburger menu get visible else get hidden . so just need to change its situation
wrote one function in your script.
function toggle(){
$(".toggler").prop("checked", false);
}
then put this function to onclick event of menu list
<li><a onclick="toggle()" href="#Home">Home</a></li>
<li><a onclick="toggle()" href="#About">About</a></li>
<li><a onclick="toggle()" href="#">Menu</a></li>
<li><a onclick="toggle()" href="#">Contact</a></li>
If you want to do it with vanilla js, I would suggest you to use CustomEvents. There might be other ways of doing it in frameworks like React.
For every menu item I would emit a custom event -
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
The 'menu' can then react to this custom event and close itself if open -
var menu = document.querySelector('.menu')
if (menu) {
menu.addEventListener('closeMenu', function (e) {
e.currentTarget.classList.remove('open');
});
}
You can have the usual menu 'toggler' for opening and closing the menu when it is clicked.
Update:
I figured things were not very clear. So here I am adding some sample code.
Note: I added the toggler and subsequently changed the menu eventHandler slightly.
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
menu.addEventListener('closeMenu', function(e) {
menu.classList.remove('open');
toggler.checked = false;
});
toggler.addEventListener('click', function(e) {
menu.classList.toggle('open');
});
}
.menu {
background-color: white;
display: inline-block;
padding-right: 1rem;
}
.menu.open {
visibility: visible;
}
.menu {
visibility: hidden;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler" checked>
<div class="hamburger">
<div></div>
</div>
<div class="menu open">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
I am trying to show the .list-menu div show on click and then hide on click when the .hamburger anchor is clicked. Right now nothing is happening.
$('document').ready(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).show() {
});
$( ".hamburger" ).click(function() {
$( ".list-menu" ).hide() {
});
});
});
<div class="logo">
<div class="about-me-button">
<img src="/img/menu.svg" alt="hamburger menu">
</div>
<div class="list-menu">
<ul>
<li>About Me</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
There is a function named .toggle() that "display or hide the matched elements" and you need only 1 .click() event.
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">
<div class="about-me-button">
<a href="#" class="hamburger">
<img src="/img/menu.svg" alt="hamburger menu">
</a>
</div>
<div class="list-menu">
<ul>
<li>About Me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
</div>
$(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).toggle();
});
});
I think the easiest way would be is the use jquery .toggle() method.
$(".list-menu").hide();
//toggle way
$(".hamburger").click(function () {
$(".list-menu").toggle();
});
or if you would like to go an alternative route you can try something like this
//jquery alternative to toggle
var toggle = false;
$(".hamburger").click(function () {
if (!toggle) {
$(".list-menu").show();
toggle = true
} else {
$(".list-menu").hide();
toggle = false
}
});
I created a fiddle so that you can see how both would work.
https://jsfiddle.net/maenucze/
i have this html and javascript for my menu button
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
i changed the ".icon" for an "a" so the menu closes as soon as i picked any option, now anytime i clicked on the scroll down button, contact and any other tag button the menu opens, is there any way to stop this from happening?
$("a") selects all links on the page.
Instead you only want the select .icon + the links in the .mobilenav, so you need to do $(".icon, .mobilenav a").
Note that JQuery selectors work almost the same as CSS selectors.
$(document).ready(function () {
$(".icon, .mobilenav a").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
I have a function for main menu :
$('.main-menu-left > li > div').each(function(){
if( $(this).next('.sub-menu').length ){
$(this).on('click', function(e){
e.preventDefault();
$(this).parent('li').find('.sub-menu').slideDown('slow');
});
}
});
And a function for slide up menu:
$('body').on('click', function(){
if( $('.sub-menu').is(':visible') ){
$('.sub-menu').slideUp();
}
});
<ul id="menu-left" class="main-menu-left">
<li>
<div class="group-menu"><span>Browse</span><a id="first-li"><p class="menu-text"><i class="icon-small-arrow-gold"></i>Blinds</p></a></div>
<ul class="sub-menu">
<li><span>Explore</span><u>+</u>Wooden Blinds<b>(18 collections)</b>
<ul class="list-products">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<li><a class="title">Next day<p class="details">no Samples of Verticals Blinds</p></a></li>
<li><a class="title">Blackout<p class="details">96 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Pattern<p class="details">120 Samples of Verticals Blinds</p></a></li>
<li><a class="title">Wipeable<p class="details">30 Samples of Verticals Blinds</p></a></li>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<p class="text-explore">&explore all <s>Vertical Blinds</s> </p>
</div>
</div>
</div>
</ul>
</li>
<li><span>Explore</span><u>+</u>Venetians Blinds<b>(20 collections)</b></li>
</ul>
</li>
<li class="hidden-md hidden-sm hidden-xs"><a><p class="menu-text"><i class="icon-small-arrow-gold"></i>Roman</p></a></li>
</ul>
This is html code, for my menu.
It's opening and closing simultaneously. And how can i do to close an li and open other on click ?
You need to bind as different functions so that you can unbind the body click and the fire the slide open, slide closed separately. This is how I would write it:
//Wrap it in a function to avoid conflict. Pass in menu as an object we will use inside
(function ($, menu, undefined) {
//this is the initialiser function
menu.init = function() {
//Store the subNavs as a jQuery array so we can loop them
var subNavs = $('.sub-menu');
//Check there are members in the array
if( subNavs.length > 0 ){
//for each member run the initialiser
$(subNavs).each(function(i, subNav) {
//Select the head of the sub-menu in the DOM. In this case it is a sibling
$(subNav).siblings('.group-menu').on('click', function(e){
//prevent the default action of the click and stop it propagating up to the body
e.preventDefault();
e.stopPropagation();
//test if this is an open menu or closed and send each one to a different handler
if ($(subNav).hasClass('open')) {
menu.clickOff($(subNav));
}
else {
menu.clickOn($(subNav));
}
});
});
}
};
menu.clickOn = function(el) {
//set the element as 'open'
el.addClass('open');
//bind the body click handler
$('body').on('click', menu.clickBody);
//Do the slide down!
el.slideDown('slow');
};
menu.clickOff = function(el) {
//set the element as not 'open'
el.removeClass('open');
$('body').unbind('click', menu.clickBody);
//Do the slide up!
el.slideUp('slow');
};
menu.clickBody = function(e) {
//check if the target is the open menu item itself or part of it
if ($(e.target).closest('.sub-menu.open').length == 0) {
//If not, pass it through to the close handler
menu.clickOff($('.sub-menu.open'));
}
};
//call the initialiser() on page load
menu.init();
}(jQuery, window.menu = window.menu || {}, ""));
You can view the fiddle of this here: http://fiddle.jshell.net/h6Xnb/2/
Hope it helps.
I have two buttons on my website, they should show content when someone clicks on the button. But instead of showing content, the button takes me back to the top of the page.
jQuery Code
/********************
* Enable Vacature Dropdown
* *****************/
var vacatureClickHandler = $(function(){
$(".vacatures li").on("click", "a", function(event){
if(event.target.attr('id') == 'link-0'){
$('#content-0').toggleClass('active').fadeToggle();
event.preventDefault();
} else if(event.target.attr('id') == 'link-1'){
$('#content-1').toggleClass('active').fadeToggle();
event.preventDefault();
}
});
});
$(".vacatures li").on("click", "a", vacatureClickHandler);
HTML for the jQuery
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA's</span></h3>
<ul>
<li>
<a id="link-0" href=""><span>OPEN SOLLICITATIE</span><span><img src="../../img/arrow_down.png"</span></a>
<p id="content-0">Blablabla</p>
</li>
<li>
<a id="link-1" href=""><span class="strike">ALLROUND DESIGNER</span><span class="hired">HIRED!</span><span><img src="../../img/arrow_down.png"/></span></a>
<p id="content-1">Blablabla</p>
</li>
</ul>
</div>
Here's the jsFiddle, what it has to do: someone clicks on the dropdown button and then the content shows.
1) You're forgot to include jQuery in jsFiddle
2) Place event.preventDefault(); outside of your if else condition
3) Use this.id instead of event.target.attr('id')
Final code for your click function look like:
$(".vacatures li").on("click", "a", function (event) {
event.preventDefault();
if (this.id == 'link-0') {
$('#content-0').toggleClass('active').fadeToggle();
} else if (this.id == 'link-1') {
$('#content-1').toggleClass('active').fadeToggle();
}
});
Updated Fiddle
If you just have one sibling next to the link you don't need the id's, don't need to "switch" and can use the siblings() method. See this (jsfiddle below):
JS
$('ul.nav > li > a').on('click', function(e){
e.preventDefault()
$(this).siblings().slideToggle();
})
CSS
.content {
display:none;
}
HTML
<div class="section vacatures">
<h2>VACATURES</h2>
<h3>OP ZOEK NAAR NIEUWE <span>COLLEGA's</span></h3>
<ul class="nav">
<li>
<span>OPEN SOLLICITATIE</span>
<p class="content">Blablabla</p>
</li>
<li>
<span class="strike">ALLROUND DESIGNER</span>
<p class="content">Blablabla</p>
</li>
</ul>
</div>
http://jsfiddle.net/josfaber/W835D/