We Keep Coding

How do I get a hamburger menu to hide when clicking a menu item that links to a section on the page?

$('.menu-icon').click(function(event) {
if ( $( '.menu-icon' ).hasClass( 'open' ) ) {
$('.menu-icon').toggleClass('open');
$('header').toggleClass('remove-bg');
$('nav').fadeOut();
$('#dot').show();
} else {
$('.menu-icon').toggleClass('open');
$('header').toggleClass('remove-bg');
$('nav').css("display", "flex").hide().fadeIn();
$('#dot').hide();
}
});
The menu stays open but I want it to close when I click a menu item like About which links to #about

Try this code below
$('.full-screen a').on('click', function() {
$('.menu-icon').toggleClass('open');
$('header').toggleClass('remove-bg');
$('nav').fadeOut();
$('#dot').show();
})

jQuery On Click Requiring Two Clicks After The First

I have looked at similar questions and read the proposed solutions, but it seems each case regarding this issue is different.
Very simply when I press my menu icon the first time, my slideout menu appears. Each time after the first requires two presses or two clicks to activate the slideout menu.
The jQuery -
$('.slideout-menu-toggle').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
});
$('.slideout-menu-close').on('click', function(event){
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
} else {
slideoutMenu.animate({
left: "0px"
});
}
});
You can see a demo of the problem viewing through a smartphone at www.chrismazzochi.com.
Thanks for you help,
Chris

You are facing this problem because you toggle class before checking for class "open" using hasClass(). Just toggle class "open" after condition check.
Try this :
$('.slideout-menu-toggle').on('click', function (event) {
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
slideoutMenu.toggleClass("open");
// slide menu
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: "0px"
});
} else {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
}
});
$('.slideout-menu-close').on('click', function (event) {
event.preventDefault();
// create menu variables
var slideoutMenu = $('.slideout-menu');
var slideoutMenuWidth = $('.slideout-menu').width();
// toggle open class
if (slideoutMenu.hasClass("open")) {
slideoutMenu.animate({
left: -slideoutMenuWidth
}, 250);
} else {
slideoutMenu.animate({
left: "0px"
});
}
// toogle class after condition check
slideoutMenu.toggleClass("open");
});

Page jumps up when clicking on hamburger menu

I am building a template which can be seen here: http://www.alessandrosantese.com/aldemair-productions/
when you scroll down and you click on the hamburger menu to open the off-canvas menu (foundation 6) the page jumps up.
This is my js so faR:
$(document).foundation();
$(document).ready(function(){
function carouselInit() {
if($('.single-project').length > 4 && !$('.slick-initialized').length) {
$('.single-item').slick({
responsive: [
{
breakpoint: 1024,
settings: 'unslick'
}]
});
}
else {
console.log('4');
}
}
$('.hamburger').on('click', function(){
if($('header').hasClass('fixed')){
$('header').removeClass('fixed').addClass('absolute');
$(this).toggleClass('open');
}
else {
$('header').removeClass('absolute').addClass('fixed');
$(this).toggleClass('open');
}
});
carouselInit();
var resizeId;
$(window).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(carouselInit, 500);
});
});
When clicking on the hamburger icon the all page shouldn't jump up.

This is the piece of code that makes the page jump:
// Elements with [data-toggle] will toggle a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-toggle]', function () {
triggers($(this), 'toggle');
});
When you click on the hamburger menu it triggers 'toggle.zf.trigger' on the element with id 'sth'. This further goes into the open function that has this piece of code:
if (this.options.forceTop) {
$('body').scrollTop(0);
}
Guess what it does? :) I can only assume that setting OffCanvas forceTop option to false will remove this behaviour.

How do i get the length of a class element that is added using addClass in jquery

i have a settings menu that shows up when the page loads, it has a button that hides it by adding the class "hidedown" and removing "showup" and vice verse when showing it.
i just want to minimize the menu after 2 mins in case someone does not click on the button.
my problem is, when i do this
if ($(".hidedown").length > 0 ) {
//hidedown class is present
} else {
//hidedown class is not present
}
i am always getting "hide class is not present" even when the class "hidedown" is there
/* so i have this function */
/* minimize the floating menu after 2mins */
window.setTimeout(function() {
if ($(".hidedown").length > 0) { /* i don knw why this is not working */
console.log("the menu should minimize");
$(".settings_link, .companies").animate({
left: "-=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("hidedowm").addClass("showup");
} else {
console.log("class 'hidedown' is not there!");
/* i get this even when the class is there */
}
}, 1000);
/* this will hide the settings/companies menu */
$(document).on("click", ".settings_link.showup", function() {
$(".settings_link, .companies").animate({
left: "+=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("showup").addClass("hidedowm");
});
/* this will show the settings/companies menu */
$(document).on("click", ".settings_link.hidedowm", function() {
$(".settings_link, .companies").animate({
left: "-=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("hidedowm").addClass("showup");
});

jQuery toggle on dropdown

The problem:
In the example provided below, I have a sidenav with options, you click to reveal a toggled div. If you click the third item in the menu "Dolar", you will see you get a dropdown with three options appear below the link.
This is great, but I want the dropdown to close when I click on the other links. I'm not sure how to achieve this.
jsFiddle:
http://jsfiddle.net/visualdecree/4A23Z/39/
jQuery:
Note: I know it might be messy, I'm still learning this.
$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script
var panID = $("#" + $(this).data('panel') );
$("div[id*='sn-pan-']")
.stop()
.hide({width:'toggle'},400);
$(panID)
.css({'left' : '139px','overflow':'visible'})
.stop()
.animate
({ width: "toggle", opacity: "toggle"
}, { duration: "slow" });
$(".control-view").hide(); // Fadein menu close button
$(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);
});
$('.sn, .sn-drop').click(function(e) {
$('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$('.sn-alt').click(function(e) {
$('ul.additional li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$(".control-view").hover( // Hover effect for menu close button
function () {
$(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
},
function () {
$(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});
$('.control-view').click(function(e) {
$("div[id*='sn-pan-']")
.stop(true,true)
.hide({width:'toggle'}, 100);
$('ul.sidenav li').not(this).removeClass('active');
$(".control-view").stop().fadeOut("fast");
});
$(".additional").hide(); // Controls for the 'design' dropdown
$(".sn-drop").click(function(){
$(".additional").slideToggle(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});

Just add this JQuery, when you click on other link in your sidebar, it will close your .additional
$(".sn").click(function(){
$(".additional").slideUp(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
​

If it's just the links in the left that you want to be the trigger to close the dropdown then you can do it simply with this:
$('.sn').click(function(){
$('.additional').slideUp();
})