From fb4c9e80239275055711141c4a56226fa1c4b32b Mon Sep 17 00:00:00 2001 From: Jacob McDonnell Date: Mon, 22 Jun 2020 10:13:40 -0400 Subject: Updated side bar to have drop downs --- CSS/GreenAndDark.css | 43 +++++++++++++++++++++++++++++++++++++++--- CSS/PurpleAndDark.css | 51 +++++++++++++++++++++++++++++++++++++++++++------- CSS/PurpleAndWhite.css | 42 ++++++++++++++++++++++++++++++++++++++--- CSS/main.css | 40 ++++++++++++++++++++++++++++++++++++--- JS/main.js | 21 ++++++++++++++++++--- index.html | 36 ++++++++++++++++++++++------------- settings.html | 35 +++++++++++++++++++++------------- 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 @@ @@ -58,6 +67,7 @@ e.preventDefault(); }); })(); + diff --git a/settings.html b/settings.html index a8d6ea8..906d94a 100644 --- a/settings.html +++ b/settings.html @@ -20,23 +20,32 @@ -- cgit v1.2.3