Updated side bar to have drop downs

7 files changed, 223 insertions, 45 deletions

diff --git a/CSS/GreenAndDark.css b/CSS/GreenAndDark.css
index 81538ca..b543c12 100644
--- a/CSS/GreenAndDark.css
+++ b/CSS/GreenAndDark.css
@@ -93,6 +93,43 @@ main{
     width: 90%;
     background-color: rgba(36,38,40,1);
 }
+.dropbtn {
+  color: #fff;
+  padding: 1.4em;
+  font-size: .9em;
+  cursor: pointer;
+  background: rgba(37,37,37,1);
+  border: none;*/
+  display: block;
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #000;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgba(37,37,37,1);
+  /*min-width: 160px;*/
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.dropdown-content a {
+  color: #fff;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+.dropdown a:hover {background-color: #000;}
+.show {display: block;}
 @media only screen and (min-width: 768px) and (min-height: 614px){
     body{
         display: grid;
@@ -171,7 +208,7 @@ main{
     }
     ul li a{
         font-size: 0.625em;
-        padding: 1em;        
+        padding: 1em;
     }
 }
 @media only screen and (max-height: 665px) and (min-height: 582px){
@@ -189,5 +226,5 @@ main{
     body{
         grid-template-columns: 16% auto;
     }
-    
-}
\ No newline at end of file
+
+}
diff --git a/CSS/PurpleAndDark.css b/CSS/PurpleAndDark.css
index 3945122..7d00e2f 100644
--- a/CSS/PurpleAndDark.css
+++ b/CSS/PurpleAndDark.css
@@ -89,7 +89,44 @@ main{
     width: 90%;
     background-color: rgba(36,38,40,1);
 }
-@media only screen and (min-width: 768px) and (min-height: 614px){
+.dropbtn {
+  color: #fff;
+  padding: 1.4em;
+  font-size: .9em;
+  cursor: pointer;
+  background: rgba(37,37,37,1);
+  border: none;*/
+  display: block;
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #000;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgba(37,37,37,1);
+  /*min-width: 160px;*/
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.dropdown-content a {
+  color: #fff;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+.dropdown a:hover {background-color: #000;}
+.show {display: block;}
+@media only screen and (min-width: 768px) and (min-height: 582px){
     body{
         display: grid;
         grid-template-columns: 375px auto;
@@ -158,7 +195,7 @@ main{
         /*width: 38.66% !important;*/
     }
 }
-@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
+/*@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
     body{
         display: flex !important;
     }
@@ -167,15 +204,15 @@ main{
     }
     ul li a{
         font-size: 0.625em;
-        padding: 1em;        
+        padding: 1em;
     }
-}
+}*/
 @media only screen and (max-height: 665px) and (min-height: 582px){
     div.logo{
         margin-top: 1em;
     }
 }
-@media only screen and (max-height: 762px){
+/*@media only screen and (max-height: 762px){
     ul li a{
         font-size: 7px;
     }
@@ -185,5 +222,5 @@ main{
     body{
         grid-template-columns: 16% auto;
     }
-    
-}
\ No newline at end of file
+
+}*/
diff --git a/CSS/PurpleAndWhite.css b/CSS/PurpleAndWhite.css
index ea85464..bd5f068 100644
--- a/CSS/PurpleAndWhite.css
+++ b/CSS/PurpleAndWhite.css
@@ -86,6 +86,42 @@ main{
     width: 90%;
     background-color: rgba(213,213,213,1.0);
 }
+.dropbtn {
+  color: #000;
+  padding: 1.4em;
+  font-size: .9em;
+  cursor: pointer;
+  background: rgba(210,210,210,1);
+  border: none;*/
+  display: block;
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #fff;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgba(210,210,210,1);
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.dropdown-content a {
+  color: #000;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+.dropdown a:hover {background-color: #fff;}
+.show {display: block;}
 @media only screen and (min-width: 768px) and (min-height: 614px){
     body{
         display: grid;
@@ -164,7 +200,7 @@ main{
     }
     ul li a{
         font-size: 0.625em;
-        padding: 1em;        
+        padding: 1em;
     }
 }
 @media only screen and (max-height: 665px) and (min-height: 582px){
@@ -182,5 +218,5 @@ main{
     body{
         grid-template-columns: 16% auto;
     }
-    
-}
\ No newline at end of file
+
+}
diff --git a/CSS/main.css b/CSS/main.css
index de524a0..716655e 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -90,6 +90,40 @@ main{
     width: 90%;
     background-color: rgba(213,213,213,1.0);
 }
+.dropbtn {
+  color: #000;
+  padding: 1.4em;
+  font-size: .9em;
+  cursor: pointer;
+  background: rgba(210,210,210,1);
+  border: none;*/
+  display: block;
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #fff;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: rgba(210,210,210,1);
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.dropdown-content a {
+  color: #000;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
 @media only screen and (min-width: 768px) and (min-height: 614px){
     body{
         display: grid;
@@ -168,7 +202,7 @@ main{
     }
     ul li a{
         font-size: 0.625em;
-        padding: 1em;        
+        padding: 1em;
     }
 }
 @media only screen and (max-height: 665px) and (min-height: 582px){
@@ -186,5 +220,5 @@ main{
     body{
         grid-template-columns: 16% auto;
     }
-    
-}
\ No newline at end of file
+
+}
diff --git a/JS/main.js b/JS/main.js
index ec46e4c..e541d5f 100644
--- a/JS/main.js
+++ b/JS/main.js
@@ -1,9 +1,9 @@
 function searchDuck(event){
     var x = document.getElementById('Search').value;
-    if (event.keyCode == 13 || event.which == 13) { 
+    if (event.keyCode == 13 || event.which == 13) {
         if (x == '/4chan'){
             fourChan()
-        } 
+        }
         else if (x == '/help'){
             help()
         }
@@ -11,4 +11,19 @@ function searchDuck(event){
 }
 function FocusOnInput(){
     document.getElementById("Search").focus();
-}
\ No newline at end of file
+}
+function dropdown(theID) {
+  document.getElementById(theID).classList.toggle("show");
+}
+window.onclick = function(event) {	//when the user clicks anywhere else on the screen the menu disappears
+  if (!event.target.matches('.dropbtn')) {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (openDropdown.classList.contains('show')) {
+        openDropdown.classList.remove('show');
+      }
+    }
+  }
+}
diff --git a/index.html b/index.html
index 3975771..2bae8bf 100644
--- a/index.html
+++ b/index.html
@@ -20,23 +20,32 @@
                 <ul id="menuLinks">
                     <p id="menuX" class="MenuX">X</p>
                     <li><a href="https://jacobmcdonnell.com/">Home</a></li>
-                    <li><a href="https://jacobmcdonnell.com/morsecode/">Morse code</a></li>
-                    <li><a href="https://jacobmcdonnell.com/binary/" id="pLink">Binary</a></li>
-                    <li><a href="https://jacobmcdonnell.com/Pacman/" id="pLinks">Google Pacman</a></li>
+                    <li><button onclick="dropdown('pages')" class="dropbtn">Pages</button>
+  		    <div id="pages" class="dropdown-content">
+			<a href="https://jacobmcdonnell.com/">Home</a>
+			<a href="https://jacobmcdonnell.com/morsecode/">Morse code</a>
+                    	<a href="https://jacobmcdonnell.com/binary/" id="pLink">Binary</a>
+                    	<a href="https://jacobmcdonnell.com/Pacman/" id="pLinks">Google Pacman</a>
+ 			<a href="https://jacobmcdonnell.com/settings.html">Settings and Information</a>
+		    </div></li>
                     <li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
-                    <li><a href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Gmail</a></li>
-                    <li><a href="https://play.google.com/music/listen?authuser&u=0#/home">Google Play Music</a></li>
-                    <li><a href="https://photos.google.com/">Google Photos</a></li>
-                    <li><a href="https://domains.google.com/m/registrar/">Google Domains</a></li>
-                    <li><a href="https://drive.google.com/drive/u/0/my-drive">Google Drive</a></li>
+		    <li><button onclick="dropdown('gsites')" class="dropbtn">Google Sites</button>
+  		    <div id="gsites" class="dropdown-content">
+    			<a href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Gmail</a>
+                        <a href="https://play.google.com/music/listen?authuser&u=0#/home">Google Play Music</a>
+                    	<a href="https://photos.google.com/">Google Photos</a>
+                    	<a href="https://domains.google.com/m/registrar/">Google Domains</a>
+                    	<a href="https://drive.google.com/drive/u/0/my-drive">Google Drive</a>
+
+		    </div></li>
                     <li><a href="https://www.youtube.com">Youtube</a></li>
-                    <li><a href="https://www.github.com/">Github</a></li>
-                    <li><a href="https://gitlab.com/">GitLab</a></li>
-                    <li><a href="https://8values.github.io/">8Values</a></li>
-                    <li><a href="https://www.politicalcompass.org/test/">Political Compass</a></li>
+		    <li><button onclick="dropdown('gitSites')" class="dropbtn">Git Sites</button>
+  		    <div id="gitSites" class="dropdown-content">
+    			<a href="https://www.github.com/">Github</a>
+                    	<a href="https://gitlab.com/">GitLab</a>
+		    </div></li>
                     <li><a href="https://www.twitch.tv/">Twitch</a></li>
                     <li><a href="http://www.w3schools.com/html/default.asp">html tutorial</a></li>
-                    <li><a href="https://jacobmcdonnell.com/settings.html">Settings and Information</a></li>
                 </ul>
             </nav>
         </aside>
@@ -58,6 +67,7 @@
                     e.preventDefault();
                 });
             })();
+
         </script>
     </body>
 </html>
diff --git a/settings.html b/settings.html
index a8d6ea8..906d94a 100644
--- a/settings.html
+++ b/settings.html
@@ -20,23 +20,32 @@
                 <ul id="menuLinks">
                     <p id="menuX" class="MenuX">X</p>
                     <li><a href="https://jacobmcdonnell.com/">Home</a></li>
-                    <li><a href="https://jacobmcdonnell.com/morsecode/">Morse code</a></li>
-                    <li><a href="https://jacobmcdonnell.com/binary/" id="pLink">Binary</a></li>
-                    <li><a href="https://jacobmcdonnell.com/Pacman/" id="pLinks">Google Pacman</a></li>
+                    <li><button onclick="dropdown('pages')" class="dropbtn">Pages</button>
+                    <div id="pages" class="dropdown-content">
+                        <a href="https://jacobmcdonnell.com/">Home</a>
+                        <a href="https://jacobmcdonnell.com/morsecode/">Morse code</a>
+                        <a href="https://jacobmcdonnell.com/binary/" id="pLink">Binary</a>
+                        <a href="https://jacobmcdonnell.com/Pacman/" id="pLinks">Google Pacman</a>
+                        <a href="https://jacobmcdonnell.com/settings.html">Settings and Information</a>
+                    </div></li>
                     <li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
-                    <li><a href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Gmail</a></li>
-                    <li><a href="https://play.google.com/music/listen?authuser&u=0#/home">Google Play Music</a></li>
-                    <li><a href="https://photos.google.com/">Google Photos</a></li>
-                    <li><a href="https://domains.google.com/m/registrar/">Google Domains</a></li>
-                    <li><a href="https://drive.google.com/drive/u/0/my-drive">Google Drive</a></li>
+                    <li><button onclick="dropdown('gsites')" class="dropbtn">Google Sites</button>
+                    <div id="gsites" class="dropdown-content">
+                        <a href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Gmail</a>
+                        <a href="https://play.google.com/music/listen?authuser&u=0#/home">Google Play Music</a>
+                        <a href="https://photos.google.com/">Google Photos</a>
+                        <a href="https://domains.google.com/m/registrar/">Google Domains</a>
+                        <a href="https://drive.google.com/drive/u/0/my-drive">Google Drive</a>
+
+                    </div></li>
                     <li><a href="https://www.youtube.com">Youtube</a></li>
-                    <li><a href="https://www.github.com/">Github</a></li>
-                    <li><a href="https://gitlab.com/">GitLab</a></li>
-                    <li><a href="https://8values.github.io/">8Values</a></li>
-                    <li><a href="https://www.politicalcompass.org/test/">Political Compass</a></li>
+                    <li><button onclick="dropdown('gitSites')" class="dropbtn">Git Sites</button>
+                    <div id="gitSites" class="dropdown-content">
+                        <a href="https://www.github.com/">Github</a>
+                        <a href="https://gitlab.com/">GitLab</a>
+                    </div></li>
                     <li><a href="https://www.twitch.tv/">Twitch</a></li>
                     <li><a href="http://www.w3schools.com/html/default.asp">html tutorial</a></li>
-                    <li><a href="https://jacobmcdonnell.com/settings.html">Settings and Information</a></li>
                 </ul>
             </nav>
         </aside>