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 ++++++++++++++++++++++++++++++++++++--- 4 files changed, 160 insertions(+), 16 deletions(-) (limited to 'CSS') 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 + +} -- cgit v1.2.3