m |
m |
||
Line 14: | Line 14: | ||
function openNav() { | function openNav() { | ||
− | document.getElementById("nav").style.width = "100%"; | + | document.getElementById("nav").style.width = "100%"; |
document.getElementById("brand-elements").style.width = "14.1%"; | document.getElementById("brand-elements").style.width = "14.1%"; | ||
document.getElementById("nav-elements").style.width = "100%"; | document.getElementById("nav-elements").style.width = "100%"; | ||
− | for(i = 0; i < navText.length; i++) { | + | for(i = 0; i < navText.length; i++) { // makes the text inside each nav-item visible |
navText[i].style.opacity = "1"; | navText[i].style.opacity = "1"; | ||
} | } | ||
− | document.getElementById("nav-icon").style.display = "none"; | + | document.getElementById("nav-icon").style.display = "none"; // gets rid of "open nav" button |
− | document.getElementById("close-nav-button").style.display = "block"; | + | document.getElementById("close-nav-button").style.display = "block"; // shows "close nav" button |
} | } | ||
− | + | function closeNav() { | |
− | + | closeSubmenus(); | |
− | + | document.getElementById("nav-elements").style.width = "0%"; | |
− | + | for(i = 0; i < navText.length; i++) { | |
− | + | navText[i].style.opacity = "0"; | |
− | + | } | |
− | + | document.getElementById("nav-icon").style.display = "block"; | |
− | + | document.getElementById("close-nav-button").style.display = "none"; | |
− | + | setTimeout(function() { // delaying adjusting these widths until after nav-elements collapses allows for closing transition | |
− | + | document.getElementById("nav").style.width = "14.1%"; | |
− | + | document.getElementById("brand-elements").style.width = "100%"; | |
− | + | }, 500); | |
− | + | } | |
− | + | var dropLinks = document.getElementsByClassName("drop-link"); // gets all of the expandable nav sections | |
− | + | function closeSubmenus() { | |
− | + | for(i = 0; i < dropLinks.length; i++) { | |
− | + | dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name | |
− | + | ||
} | } | ||
+ | } | ||
− | + | function showSubmenu(x) { | |
− | + | closeSubmenus(); // first closes the current open submenu | |
− | + | ||
− | + | for(i = 0; i < dropLinks.length; i++) { // then adds the class name active-menu to a specified element | |
− | + | if(i == (x-1)) { | |
− | + | dropLinks[i].className = "drop-link nav-item active-menu" | |
} | } | ||
} | } | ||
+ | } | ||
</script> | </script> | ||
<html> | <html> |
Revision as of 16:47, 8 June 2020