Ich versuche, die gesamte seitliche Menüleiste (#menu_links) ein- und auszublenden, wenn der Browser auf weniger als 750 Pixel getunnelt ist.
Weiß jemand, warum die seitliche Menüleiste (#menu_links) nicht ausgeblendet wird, indem der Rand des Browsers passiert wird, wenn Sie auf "#menu_button" klicken, wenn die Browsergröße weniger als 750 beträgt?
https://menusel-169ba.firebaseapp.com/
$(document).ready(function () {
$('#menu_links').css({ width: '50px' });
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
// Muesrta panel de CAMBIAR CONTRASEÑA
$('a.test').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var timesClicked = 0;
$("#menu_button").click(function () {
timesClicked++
if (timesClicked % 2 == 0) {
$('#menu_links').animate({ width: '50px' }, 350);
$('.collapse-menu').removeClass('show');
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
} else {
$('#menu_links').animate({ width: '200px' }, 350);
$('.collapse-menu').addClass('show');
$('.collapse-menu').removeClass('hidden');
$('ul#menu_links li').hover(function () {
}, function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
});
}
console.log(timesClicked % 2);
});
var menu_buttonVar = document.querySelector("#menu_button"),
menu_linksVar = document.querySelector("#menu_links");
// checkWidth() BREACK-POINTS
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 750) {
console.log("screen width is less than 480");
menu_linksVar.style.left = "-50px";
$('#menu_button').click(function () {
$('#menu_links').animate({
left: '0px',
}, 0);
});
} // END if
else {
console.log("screen width is greater than or equal to 960");
menu_linksVar.style.left = "0px";
}
};
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
}); // END documentReady
Jetzt ist mein Menü fertig und es funktioniert gut. Der nächste Schritt besteht darin, den Code so zu synthetisieren, dass er mit den gleichen Funktionen, aber mit weniger Zeichen arbeitet.
Hier ist der Link:
https://menusel-169ba.firebaseapp.com/
Vielen Dank.
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen