51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
<script>
|
|
function toggleMenu() {
|
|
var links = document.querySelectorAll(".nav-bar .links"); // Adjusted to select links inside .nav-bar
|
|
links.forEach(function(link) {
|
|
if (link.style.display === "block") {
|
|
link.style.display = "none";
|
|
} else {
|
|
link.style.display = "block";
|
|
}
|
|
});
|
|
|
|
// Toggle the 'active' class for the hamburger icon
|
|
var hamburger = document.getElementById("hamburger");
|
|
hamburger.classList.toggle("active");
|
|
}
|
|
|
|
|
|
function closeMenu() {
|
|
var linksArray = document.querySelectorAll(".links"); // Select all elements with the class 'links'
|
|
if (window.innerWidth <= 388) { // Close the menus only on small screens
|
|
linksArray.forEach(function(links) {
|
|
links.style.display = "none";
|
|
});
|
|
}
|
|
}
|
|
|
|
// Function to check the screen width and adjust menu visibility
|
|
function checkScreenWidth() {
|
|
var linksArray = document.querySelectorAll(".links");
|
|
linksArray.forEach(function(links) {
|
|
if (window.innerWidth > 388) {
|
|
links.style.display = ""; // Remove any inline display style if screen is wider than 440px
|
|
} else {
|
|
links.style.display = "none"; // Hide the navigation links if screen is narrower than 440px
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listener for window resize
|
|
window.addEventListener('resize', checkScreenWidth);
|
|
|
|
// Call checkScreenWidth on initial load
|
|
window.onload = function() {
|
|
checkScreenWidth();
|
|
// Attach closeMenu function to each nav item for small screens
|
|
var navItems = document.querySelectorAll('.nav');
|
|
navItems.forEach(function(item) {
|
|
item.addEventListener('click', closeMenu);
|
|
});
|
|
};
|
|
</script> |