Difference between revisions of "Template:MIT/menu"

(Undo revision 195963 by BloonCorps (talk))
Line 18: Line 18:
 
#content {
 
#content {
 
  padding: 0% 0 0 0;
 
  padding: 0% 0 0 0;
−
  style = 'background-color: #D8C6C2';
+
  style = 'background-color: #808080';
 
}
 
}
 
 
Line 84: Line 84:
  
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
#content { margin:0px; padding:0px; width:100%;}
+
#content { margin:5px; padding:0px; width:100%;}
−
body {background-color: #fff;}
+
body {background-color: #fff;}
  
 +
/* Menu Styling */
  
 +
ul {
 +
list-style: none;
 +
font-size: 12px;
 +
}
  
−
/* Menu Styling */
+
nav {
 +
text-align: center !important;
 +
display: flex;
 +
padding-top: 10px;
 +
align-items: center;
 +
vertical-align: middle !important;
 +
min-height: 6vH;
 +
background-color: #808080;
 +
font-family: Tahoma, Lato, serif;
 +
position: fixed;
 +
width: 100%;
 +
top: 2px;
 +
left: 0;
 +
z-index: 999;
 +
}
  
 +
.logolink {
 +
display: inline-block;
 +
width: 8%;
 +
margin-left: 50px !important;
 +
margin-top: 300px !important;
 +
margin-bottom: 10px !important;
 +
}
  
 +
.Navlogo {
 +
display: inherit;
 +
width: 100%;
 +
}
 +
 +
.nav-links {
 +
display: inline-flex;
 +
justify-content: space-around;
 +
                text-decoration: none;
 +
                color: #fff;
 +
width: 100%;
 +
}
  
 +
.nav-links a{
 +
color: #fff;
 +
text-decoration: none;
 +
letter-spacing: 2px;
 +
font-weight: bold;
 +
font-size: 16px;
 +
display: block;
 +
}
  
−
ul {
+
/*Drop Down Menus for links at Computer Screen*/
−
list-style: none;
+
.dropdown a{
−
}
+
padding: 2vh;
 +
}
  
 +
.dropdowncontent {
 +
cursor: pointer;
 +
display: none;
 +
position: absolute;
 +
background-color: #5e5656;
 +
min-width: 150px;
 +
z-index: 1;
 +
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
}
  
−
nav {
+
.dropdowncontent a{
−
text-align: center;
+
color: #fff;
−
display: flex;
+
font-size: 12px;
−
align-items: center;
+
text-align: left;
−
min-height: 12vH;
+
padding: 10px;
−
background-color: #993233;
+
transition: all 0.5s ease;
−
font-family: Lato, serif;
+
}
−
position: fixed;
+
−
width: 100%;
+
−
top: 0px;
+
−
left: 0;
+
−
z-index: 999;
+
−
}
+
  
−
.logolink {
+
.dropdown:hover .dropdowncontent{
−
display: inline-block;
+
display: block;
−
width: 8%;
+
}
−
margin-left: 50px !important;
+
−
margin-top: 30px !important;
+
−
margin-bottom: 10px !important;
+
−
+
  
−
}
+
.dropdowncontent a:hover{
 +
background-color: #8a8b8c !important;
 +
}
  
−
.Navlogo {
+
/*Burger Buns*/
−
display: inherit;
+
.burger {
−
width: 100%;
+
display: none;
 +
cursor: pointer;
 +
right: 5px;
 +
position: fixed;
 +
}
  
 +
.burger div{
 +
width: 25px;
 +
height: 5px;
 +
background-color: white;
 +
margin: 5px;
 +
transition: background-color 400ms linear;
 +
transition: all 0.3s ease;
 +
}
  
−
}
+
@media screen {
 +
body {
 +
margin: auto;
 +
}
 +
}
  
 +
/*Mobile Navigation Bar*/
 +
@media screen and (max-width: 1080px) {
 +
body {
 +
overflow-x: hidden;
 +
}
  
−
.nav-links {
+
.logolink {
−
display: inline-flex;
+
position: relative;
−
justify-content: space-around;
+
display: block;
−
width: 100%;
+
width: 20%;
−
}
+
}
−
.nav-links a{
+
−
color: #fff;
+
−
text-decoration: none;
+
−
letter-spacing: 2px;
+
−
font-weight: bold;
+
−
font-size: 20px;
+
−
display: block;
+
  
−
}
+
.nav-links {
 +
position: fixed;       
 +
display: block;
 +
height: 100%;
 +
right: 0px;
 +
top: 10vh;
 +
background-color: #c2a593;
 +
width: 30%;
 +
transform: translateX(150%);
 +
transition: transform 0.5s ease-in;
 +
margin: inherit;
 +
padding-top: 10vh;
 +
z-index: -1;
 +
}
  
 +
.nav-links li{
 +
opacity: 0;
 +
display: block;
 +
}
  
 +
.nav-links a{
 +
font-size:15px;
 +
}
  
 +
.burger {
 +
display: block;
 +
}
  
−
/*Drop Down Menus for links at Computer Screen*/
+
.dropdown {
 +
padding-top: 20px;
 +
}
  
−
.dropdown a{
+
.dropdowncontent {
−
padding: 5px;
+
display: none;
 +
position: relative;
 +
}
 +
.dropdowncontent a{
 +
font-size: 10px;
 +
padding: 10px;
 +
}
 +
}
  
−
}
+
.nav-active {
 +
transform: translateX(0%);
 +
padding-left: 0px;
 +
}
  
−
.dropdowncontent {
+
@keyframes navLinkFade {
−
cursor: pointer;
+
from {
−
display: none;
+
opacity: 0;
−
position: absolute;
+
transform: translateX(25px);
−
background-color: #424242;
+
}
−
min-width: 150px;
+
to {
−
z-index: 1;
+
opacity: 1;
−
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
transform: translateX(0px);
 +
}
 +
}
  
−
}
+
.toggle .line1{
 +
background-color: #E2D264;
 +
transform: rotate(180deg);
 +
}
  
−
.dropdowncontent a{
+
.toggle .line2{
−
  color: #fff;
+
background-color: #E73C7E;
−
        font-size: 16px;
+
transform: rotate(180deg);
−
  text-align: left;
+
}
−
  padding: 10px;
+
−
        transition: all 0.5s ease;
+
−
  }
+
−
.dropdown:hover .dropdowncontent{
+
−
display: block;
+
  
−
}
+
.toggle .line3{
−
 
+
background-color: #3E4A9E;
−
.dropdowncontent a:hover{
+
transform: rotate(180deg);
−
background-color: #8a8b8c !important;
+
}
−
 
+
−
 
+
−
 
+
−
}
+
−
 
+
−
/*Burger Buns*/
+
−
 
+
−
.burger {
+
−
display: none;
+
−
cursor: pointer;
+
−
right: 5px;
+
−
position: fixed;
+
−
}
+
−
 
+
−
.burger div{
+
−
width: 25px;
+
−
height: 5px;
+
−
background-color: white;
+
−
margin: 5px;
+
−
transition: background-color 400ms linear;
+
−
transition: all 0.3s ease;
+
−
}
+
−
 
+
−
@media screen {
+
−
body {
+
−
margin: auto;
+
−
}
+
−
}
+
−
 
+
−
/*Mobile Navigation Bar*/
+
−
 
+
−
@media screen and (max-width: 1080px) {
+
−
body {
+
−
overflow-x: hidden;
+
−
}
+
−
 
+
−
 
+
−
.logolink {
+
−
position: relative;
+
−
display: block;
+
−
width: 20%;
+
−
 
+
−
}
+
−
 
+
−
.nav-links {
+
−
position: fixed;
+
−
display: block;
+
−
height: 100%;
+
−
right: 0px;
+
−
top: 12vh;
+
−
background-color: #993233;
+
−
width: 30%;
+
−
transform: translateX(150%);
+
−
transition: transform 0.5s ease-in;
+
−
margin: inherit;
+
−
padding-top: 10vh;
+
−
z-index: -1;
+
−
 
+
−
}
+
−
.nav-links li{
+
−
opacity: 0;
+
−
display: block;
+
−
}
+
−
 
+
−
        .nav-links a{
+
−
              font-size:15px;
+
−
        }
+
−
 
+
−
.burger {
+
−
display: block;
+
−
}
+
−
 
+
−
.dropdown {
+
−
padding-top: 20px;
+
−
}
+
−
 
+
−
.dropdowncontent {
+
−
display: none;
+
−
position: relative;
+
−
}
+
−
.dropdowncontent a{
+
−
font-size: 10px;
+
−
padding: 10px;
+
−
}
+
−
 
+
−
}
+
−
 
+
−
.nav-active {
+
−
transform: translateX(0%);
+
−
padding-left: 0px;
+
−
 
+
−
}
+
−
 
+
−
 
+
−
@keyframes navLinkFade {
+
−
from {
+
−
opacity: 0;
+
−
transform: translateX(25px);
+
−
}
+
−
to {
+
−
opacity: 1;
+
−
transform: translateX(0px);
+
−
}
+
−
}
+
−
 
+
−
.toggle .line1{
+
−
background-color: #E2D264;
+
−
transform: rotate(180deg);
+
−
 
+
−
}
+
−
 
+
−
.toggle .line2{
+
−
background-color: #E73C7E;
+
−
transform: rotate(180deg);
+
−
}
+
  
−
.toggle .line3{
 
−
background-color: #3E4A9E;
 
−
transform: rotate(180deg);
 
−
}
 
 
</style>
 
</style>
 
<body>
 
<body>

Revision as of 02:44, 13 October 2021