2 Commits
08435de599
...
5d7159f74c
Author | SHA1 | Message | Date |
---|---|---|---|
crt | 5d7159f74c |
Merge branch 'master' of https://adastra7.net/git/crt/a7-css-shenanigans
|
2 months ago |
crt | 2087503781 |
send help
|
2 months ago |
4 changed files with 252 additions and 121 deletions
-
31css/hamburger-dumb.css
-
157css/nav.css
-
118index.html
-
51js/hamburger-dump.js
@ -0,0 +1,31 @@ |
|||
/* Add to existing CSS */ |
|||
.hamburger { |
|||
display: none; /* Hide by default */ |
|||
cursor: pointer; |
|||
font-size: 30px; /* Adjust based on your design preferences */ |
|||
color: #ffffff; /* Change color as needed */ |
|||
} |
|||
|
|||
|
|||
/* Mobile-specific styles */ |
|||
|
|||
@media only screen and (max-width: 388px) { |
|||
.hamburger { |
|||
display: block; |
|||
} |
|||
|
|||
.menu { |
|||
flex-direction: row; |
|||
width: 100%; |
|||
} |
|||
|
|||
.nav { |
|||
display: block; |
|||
text-align: center; |
|||
padding: 5px; |
|||
} |
|||
|
|||
.nav-bar { |
|||
align-items: flex-start; |
|||
} |
|||
} |
@ -0,0 +1,51 @@ |
|||
<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> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue