J'ai un menu simple qui s'ouvre au clic.
Ce dont j'aurais besoin, c'est de:
Je demande gentiment un extrait de code à ajouter à mon code js
$(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");
}
})
});
Voici mon codepen pour tester la fonction
excellente solution?
ps évidemment, l'action doit fonctionner chaque fois que l'utilisateur bascule sur le bouton hamburger
4 Réponses :
J'ai trouvé ce code qui peut vous aider (cela fonctionne presque pour tous les navigateurs), il ne reste que le code pour fermer le popup
Mise à jour
(l'URL dans le commentaire je n'ai pas pu l'ajouter ici).
hehe c'est mon codepen déjà! le lien que vous m'envoyez est le même que celui que j'ai publié
vérifiez celui-ci codepen.io/youba/pen/ZEOwYyR (je n'ai pas pu ajouter l'URL)
Merci Youba mais ne ferme ni n'alerte rien lorsque j'atteins le bas de la page
ça marche pour moi !! vérifiez si vous êtes dans la bonne URL et non dans l'ancienne
Cela devrait fonctionner:
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");
}
}
};
Puis sur votre <ul> , donnez-lui le menu id
Vous pouvez le faire en utilisant le scroll jQuery pour détecter si le défilement atteint le bas et ajouter la bascule lorsque c'est vrai comme ceci:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
if ($(".menu a").hasClass("active")) {
$(".menu ul").toggleClass("active");
$(".toggle-nav").toggleClass("active");
}
}
});
Remplacez votre jQuery par ceci
$(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");
});
}
});
});
Version 2: avec FadeOut
Pour que cette option fonctionne, vous devez ajouter id="fadeout" à l'élément ul .
$(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");
}
});
});
Existe-t-il également un moyen de fondre le menu lorsque le menu est fermé?
J'essaierai et si je réussis, je mettrai à jour mon message
Vous pouvez essayer "Version 2" avec FadeOut
Comment se fondre également lorsqu'il est ouvert @ 54ka? désolé de déranger vos compétences;)
J'ai essayé mais pour cela, vous devrez changer trop de choses dans votre code. Mieux vaut ne pas le faire :)