https://www.oxfordoratory.org.uk/includes/menuScript.js

1//variable to record if menu is meant to be white currently
2var whiteMenu = false;
3
4//variable to record whether the responsive menu on narrow display should be displayed
5//only true when menu burger clicked
6var responsive = false;
7
8//need to record initial width
9//scrolling down on iPhone triggers a window resize w/o changing window size
10//so will save this to test for genuine window resizing later on
11var initialWidth = window.innerWidth;
12
13function windowResize() {
14    if(window.innerWidth != initialWidth){
15        //on window resize, hide responsive menu if it is showing
16        if(responsive) toggleResponsiveMenu();
17    }
18}
19
20function whiteNavBar() {
21    document.getElementById("navbar").className = "scrolled shadow";
22    document.getElementById("moreIcon").className = "black";
23}
24
25function unWhiteNavBar() {
26    document.getElementById("navbar").className = "";
27    document.getElementById("moreIcon").className = "";
28}
29
30function makeWhiteHover(x) {
31    if (!responsive) {
32        whiteMenu = true;
33        whiteNavBar();
34        document.getElementById(x).style.display = "block";
35    }
36}
37
38function hideDDMenus() {
39    //hide drop down submenus in responsive menu
40    var dds = document.getElementsByClassName('menudropdown');
41    for (var j = 0; j < dds.length; j++) {
42        dds[j].style.display = "none";
43    }
44}
45
46function endWhiteHover() {
47    if(!responsive){
48        //have to do this when not in responsive mode
49        //o/w can't click burger and get to menu items!
50        whiteMenu = false;

51        hideDDMenus();
52        unWhiteNavBar();
53    }
54}
55
56function toggleWhite(x) {
57    //display or hide a drop down menu on narrow screen
58    //function called by header links whether on small screen or not
59    //only want it to do something if on small screen
60    if (responsive) {
61
62        hideDDMenus(); //close all visible drop downs
63        
64        var y = document.getElementById(x).style.display;
65        if (y != "block") {
66            //if called element not currently shown, show it
67            document.getElementById(x).style.display = "block";
68        }
69    }
70}
71
72function toggleResponsiveMenu() {
73    var x = document.getElementById("nav");
74    if (!responsive) {
75        //menu not currently displayed, so display it
76        whiteMenu = true; //everything should be white
77        whiteNavBar(); //now turn it white
78        x.className = "responsive"; //and display the menu
79        responsive = true; //and keep it displayed
80    } else {
81        //menu button has been clicked in order to close it
82        x.className = ""; //hide menu
83        hideDDMenus();
84        whiteMenu = false; //menu should stop being white
85        responsive = false; //menu shouldn't be displayed
86        unWhiteNavBar(); //put menu bar back to normal
87    }
88}