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
-
167css/nav.css
-
124index.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