Difference between revisions of "Template:MIT/menu"

(Undo revision 159988 by BloonCorps (talk))
Line 9: Line 9:
 
#content { margin:5px; padding:0px; width:100%;}
 
#content { margin:5px; padding:0px; width:100%;}
 
body {background-color: #fff;}
 
body {background-color: #fff;}
−
   
+
 
−
    ul {
+
 
 +
 
 +
/* Menu Styling */
 +
 
 +
 
 +
 
 +
 
 +
ul {
 
list-style: none;
 
list-style: none;
 
         font-size: 12px;
 
         font-size: 12px;
−
    }
+
 
−
   
+
}
−
    nav {
+
 
 +
 
 +
 
 +
nav {
 
text-align: center !important;
 
text-align: center !important;
 
display: flex;
 
display: flex;
−
    padding-top: 16px;
+
        padding-top: 16px;
 
align-items: center;
 
align-items: center;
−
    vertical-align: middle !important;
+
        vertical-align: middle !important;
 
min-height: 12vH;
 
min-height: 12vH;
 
background-color: #c2a593;
 
background-color: #c2a593;
Line 29: Line 39:
 
left: 0;
 
left: 0;
 
z-index: 999;
 
z-index: 999;
−
    }
+
}
  
−
    .logolink {
+
.logolink {
 
display: inline-block;
 
display: inline-block;
 
width: 8%;
 
width: 8%;
Line 37: Line 47:
 
margin-top: 300px !important;
 
margin-top: 300px !important;
 
margin-bottom: 10px !important;  
 
margin-bottom: 10px !important;  
−
    }
+
 +
 
 +
}
  
−
    .Navlogo {
+
.Navlogo {
 
display: inherit;
 
display: inherit;
 
width: 100%;
 
width: 100%;
−
    }
 
  
−
    .nav-links {
+
 
 +
}
 +
 
 +
 
 +
.nav-links {
 
display: inline-flex;
 
display: inline-flex;
 
justify-content: space-around;
 
justify-content: space-around;
 
width: 100%;
 
width: 100%;
−
    }  
+
}
−
 
+
.nav-links a{
−
    .nav-links a{
+
 
color: #fff;
 
color: #fff;
 
text-decoration: none;
 
text-decoration: none;
Line 57: Line 71:
 
font-size: 16px;
 
font-size: 16px;
 
display: block;
 
display: block;
−
    }
 
  
−
    .dropdown a{
+
}
−
    padding: 0px;
+
 
−
    }
+
 
 +
 
 +
 
 +
/*Drop Down Menus for links at Computer Screen*/
 +
 
 +
.dropdown a{
 +
padding: 0px;
 +
 
 +
}
  
−
    .dropdowncontent {
+
.dropdowncontent {
 
cursor: pointer;
 
cursor: pointer;
 
display: none;
 
display: none;
 
position: absolute;
 
position: absolute;
−
background-color: #4a3028;
+
background-color: #424242;
 
min-width: 150px;
 
min-width: 150px;
 
z-index: 1;
 
z-index: 1;
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
    }
+
 
 +
}
  
−
    .dropdowncontent a{
+
.dropdowncontent a{
 
   color: #fff;
 
   color: #fff;
−
    font-size: 12px;
+
        font-size: 12px;
 
   text-align: left;
 
   text-align: left;
 
   padding: 10px;
 
   padding: 10px;
−
    transition: all 0.5s ease;
+
        transition: all 0.5s ease;
−
    }
+
  }
−
 
+
.dropdown:hover .dropdowncontent{
−
    .dropdown:hover .dropdowncontent{
+
 
display: block;
 
display: block;
−
    }
 
  
−
    .dropdowncontent a:hover{
+
}
 +
 
 +
.dropdowncontent a:hover{
 
background-color: #8a8b8c !important;
 
background-color: #8a8b8c !important;
−
    }
+
 
 +
 
 +
 
 +
}
  
 
/*Burger Buns*/
 
/*Burger Buns*/
−
    .burger {
+
 
 +
.burger {
 
display: none;
 
display: none;
 
cursor: pointer;
 
cursor: pointer;
 
right: 5px;
 
right: 5px;
 
position: fixed;
 
position: fixed;
−
    }
+
}
  
−
    .burger div{
+
.burger div{
 
width: 25px;
 
width: 25px;
 
height: 5px;
 
height: 5px;
Line 104: Line 130:
 
transition: background-color 400ms linear;
 
transition: background-color 400ms linear;
 
transition: all 0.3s ease;
 
transition: all 0.3s ease;
−
    }
+
}
  
−
    @media screen {
+
@media screen {
−
    body {
+
body {
−
    margin: auto;
+
margin: auto;
−
    }
+
}
−
    }
+
}
 +
 
 +
/*Mobile Navigation Bar*/
 +
 
 +
@media screen and (max-width: 1080px) {
 +
body {
 +
overflow-x: hidden;
 +
}
  
−
    /*Mobile Navigation Bar*/
 
−
    @media screen and (max-width: 1080px) {
 
−
    body {
 
−
    overflow-x: hidden;
 
−
    }
 
−
    }
 
  
 
.logolink {
 
.logolink {
−
    position: relative;
+
position: relative;
−
    display: block;
+
display: block;
−
    width: 20%;
+
width: 20%;
−
    }
+
 
 +
}
  
 
.nav-links {
 
.nav-links {
 
position: fixed;
 
position: fixed;
 +
               
 
display: block;
 
display: block;
 
height: 100%;
 
height: 100%;
Line 145: Line 174:
 
}
 
}
  
−
    .nav-links a{
+
        .nav-links a{
−
        font-size:15px;
+
              font-size:15px;
−
    }
+
        }
  
 
.burger {
 
.burger {
Line 154: Line 183:
  
 
.dropdown {
 
.dropdown {
−
    padding-top: 20px;
+
padding-top: 20px;
 
}
 
}
  
Line 171: Line 200:
 
transform: translateX(0%);
 
transform: translateX(0%);
 
padding-left: 0px;
 
padding-left: 0px;
 +
 
}
 
}
 +
  
 
@keyframes navLinkFade {
 
@keyframes navLinkFade {
Line 204: Line 235:
  
 
<body>
 
<body>
−
<nav>
+
−
<ul class="nav-links">
+
<nav>
−
    <li class="dropdown">   
+
<ul class="nav-links">
−
    <a href="https://2021.igem.org/Team:MIT">Home </a>
+
 
−
</li>
+
<li class="dropdown">   
 +
<a href="https://2021.igem.org/Team:MIT">Home </a>
 +
</li>
 +
 
 +
<li class="dropdown"> 
 +
<a> Team </a>
 +
<div class="dropdowncontent">
 +
<a href="https://2021.igem.org/Team:MIT/Team">Team </a>
 +
                <a href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a>
 +
</div>
 +
</li>
  
−
<li class="dropdown">
+
<li class="dropdown">  
−
<a> Team </a>
+
<a> Project </a>
−
<div class="dropdowncontent">
+
<div class="dropdowncontent">
−
<a href="https://2021.igem.org/Team:MIT/Team"> Team </a>
+
−
        <a href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a>
+
−
            </div>
+
−
    </li>
+
−
+
−
    <li class="dropdown">
+
−
<a> Project </a>
+
−
<div class="dropdowncontent">
+
 
                 <a class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </a>
 
                 <a class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </a>
−
        <a href="https://2021.igem.org/Team:MIT/Design"> Design </a>
+
<a href="https://2021.igem.org/Team:MIT/Design"> Design </a>
−
        <a href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a>
+
<a href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a>
−
        <a href="https://2021.igem.org/Team:MIT/Model"> Model </a>
+
<a href="https://2021.igem.org/Team:MIT/Model"> Model </a>
−
        <a href="https://2021.igem.org/Team:MIT/Results"> Results </a>
+
<a href="https://2021.igem.org/Team:MIT/Results"> Results </a>
−
        <a href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a>
+
<a href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a>
−
        <a href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a>
+
<a href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a>
−
</div>
+
</div>
−
</li>
+
</li>
−
+
<li class="dropdown">   
−
    <li class="dropdown">   
+
    <a> Parts </a>
−
<a> Parts </a>
+
<div class="dropdowncontent">
−
<div class="dropdowncontent">
+
<a href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </a>
−
    <a href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </a>
+
<a href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </a>
−
    <a href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </a>
+
<a href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </a>
−
    <a href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </a>
+
</div>
−
</div>
+
</li>
−
</li>
+
<li class="dropdown">   
−
+
<a> Safety </a>
−
    <li class="dropdown">   
+
<div class="dropdowncontent">
−
<a> Safety </a>
+
<a href="https://2021.igem.org/Team:MIT/Safety"> Safety </a>
−
<div class="dropdowncontent">
+
<a href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a>
−
    <a href="https://2021.igem.org/Team:MIT/Safety"> Safety </a>
+
               
−
    <a href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a>
+
</div>
−
        </div>
+
</li>
−
</li>
+
<li class="dropdown">   
−
+
<a> Human Practices </a>
−
    <li class="dropdown">   
+
<div class="dropdowncontent">
−
<a> Human Practices </a>
+
<a href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a>
−
        <div class="dropdowncontent">
+
<a href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </a>
−
    <a href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a>
+
−
    <a href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </a>
+
−
        </div>
+
−
</li>
+
−
+
−
    <li class="dropdown"> 
+
−
<a href="https://2021.igem.org/Team:MIT/Collaborations"> MIT 2021 Mammalian Meetup </a>
+
−
</li>
+
  
−
</ul>
+
               
 +
</div>
 +
</li>
 +
<li class="dropdown"> 
 +
<a href="https://2021.igem.org/Team:MIT/Collaborations"> MIT Mammalian Meetup (MMM) </a>
 +
</li>
 +
</ul>
 
 
−
<div class="burger">
+
<div class="burger">
−
    <div class="line1"></div>
+
<div class="line1"></div>
−
<div class="line2"></div>
+
<div class="line2"></div>
−
<div class="line3"></div>
+
<div class="line3"></div>
−
</div>
+
</div>
  
 
</nav>
 
</nav>
Line 274: Line 305:
  
 
<script>
 
<script>
−
    /*Toggle Nav*/
+
/*Toggle Nav*/
 
const navSlide = () => {
 
const navSlide = () => {
 
const burger = document.querySelector ('.burger');
 
const burger = document.querySelector ('.burger');
Line 282: Line 313:
 
burger.addEventListener('click', () => {
 
burger.addEventListener('click', () => {
 
nav.classList.toggle('nav-active');
 
nav.classList.toggle('nav-active');
−
        /*Animate Menu links*/
+
/*Animate Menu links*/
−
navLinks.forEach((link,index) => {
+
navLinks.forEach((link,index) => {
−
if(link.style.animation) {
+
if(link.style.animation) {
−
link.style.animation = '';
+
link.style.animation = '';
−
}
+
}
−
else {
+
else {
−
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`;
+
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`;
−
}
+
}
 +
});
 +
/*Burger Animation*/
 +
burger.classList.toggle('toggle');
 +
 
 +
 
});
 
});
−
        /*Burger Animation*/
+
 
−
    burger.classList.toggle('toggle');
+
 
−
        });
+
}
−
    }
+
  
 
navSlide();
 
navSlide();
Line 300: Line 335:
 
</script>
 
</script>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 03:47, 8 October 2021