I have a simple menu that is opening on click.
What I would need is to:
I kindly ask for a snippet of code to add at my js code
$(document).ready(function() {
$(".toggle-nav").click(function(e) {
e.stopPropagation();
e.preventDefault();
$(this).toggleClass("active");
$(".menu ul").toggleClass("active");
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".menu a").hasClass("active")){
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
})
});
Here is my codepen to test the function
great solution?
ps obviously the action need to work every time the user toggle the hamburger button
Replace your jQuery with this
$(document).ready(function () {
$(".toggle-nav").click(function (e) {
e.stopPropagation();
e.preventDefault();
$(this).toggleClass("active");
$(".menu ul").toggleClass("active");
});
$(document).click(function (e) {
if (!e.target.closest("ul") && $(".menu a").hasClass("active")) {
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
});
$(window).scroll(function () {
var scrollPos = $(document).scrollTop();
var hgt = $('.menu').height();
var win = $(window).height();
if (hgt - win === scrollPos) {
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
});
});
Version 2: With FadeOut
For this option to work you need to add id="fadeout"
to the ul
element.
$(document).ready(function () {
$(".toggle-nav").click(function (e) {
e.stopPropagation();
e.preventDefault();
$(this).toggleClass("active");
$(".menu ul").toggleClass("active");
});
$(document).click(function (e) {
if (!e.target.closest("ul") && $(".menu a").hasClass("active")) {
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
});
$(window).scroll(function () {
var scrollPos = $(document).scrollTop();
var hgt = $('.menu').height();
var win = $(window).height();
if (hgt - win === scrollPos) {
$('#fadeout').fadeOut("slow", function () {
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
$('#fadeout').removeAttr("style");
});
}
});
});
I found this code that may help you (it works almost for all the browsers), It left just the code to close the popup
Update
(the URL in the comment I couldn't add it here).
This should work:
var menu = document.getElementById("Menu");
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= menu.offsetHeight) {
if($(".menu a").hasClass("active")){
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
}
};
Then on your <ul>
tag, give it the id Menu
You can do this using the jQuery scroll
to detect if the scroll reach the bottom and add the toggle when true like this:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
if ($(".menu a").hasClass("active")) {
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.