Difference between revisions of "Template:Queens Canada/Scripts"

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() {
+
function closeNav() {
−
        closeSubmenus();
+
    closeSubmenus();
 
                  
 
                  
−
        document.getElementById("nav-elements").style.width = "0%";
+
    document.getElementById("nav-elements").style.width = "0%";
  
−
        for(i = 0; i < navText.length; i++) {
+
    for(i = 0; i < navText.length; i++) {
−
            navText[i].style.opacity = "0";
+
        navText[i].style.opacity = "0";
−
        }
+
    }
 
                  
 
                  
−
        document.getElementById("nav-icon").style.display = "block";
+
    document.getElementById("nav-icon").style.display = "block";
−
        document.getElementById("close-nav-button").style.display = "none";
+
    document.getElementById("close-nav-button").style.display = "none";
  
−
        setTimeout(function() {
+
    setTimeout(function() { // delaying adjusting these widths until after nav-elements collapses allows for closing transition
−
            document.getElementById("nav").style.width = "14.1%";
+
        document.getElementById("nav").style.width = "14.1%";
−
            document.getElementById("brand-elements").style.width = "100%";
+
        document.getElementById("brand-elements").style.width = "100%";
−
        }, 500);
+
    }, 500);
−
    }
+
}
 
              
 
              
−
    var dropLinks = document.getElementsByClassName("drop-link");
+
var dropLinks = document.getElementsByClassName("drop-link"); // gets all of the expandable nav sections
 
          
 
          
−
    function closeSubmenus() {
+
function closeSubmenus() {
−
        for(i = 0; i < dropLinks.length; i++) {
+
    for(i = 0; i < dropLinks.length; i++) {
−
            dropLinks[i].className = "drop-link nav-item";
+
        dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name
−
        }
+
 
     }
 
     }
 +
}
 
              
 
              
−
    function showSubmenu(x) {
+
function showSubmenu(x) {
−
        closeSubmenus();
+
    closeSubmenus(); // first closes the current open submenu
−
        for(i = 0; i < dropLinks.length; i++) {
+
 
−
            if(i == (x-1)) {
+
    for(i = 0; i < dropLinks.length; i++) { // then adds the class name active-menu to a specified element
−
                dropLinks[i].className = "drop-link nav-item active-menu"
+
        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