Difference between revisions of "Template:MIT/menu"

(Undo revision 205436 by BloonCorps (talk))
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<head>
−
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
−
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
−
<meta charset="utf-8">
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Tahoma" />
−
<meta name="HandheldFriendly" content="True">
+
<meta charset="utf-8">
−
<meta name="MobileOptimized" content="320">
+
<meta name="HandheldFriendly" content="True">
−
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
+
<meta name="MobileOptimized" content="320">
−
    <script src="../../js/ios-orientationchange-fix.min.js"></script>
+
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
−
 
+
<script src="../../js/ios-orientationchange-fix.min.js"></script>
 +
</head>
 +
 
<style>
 
<style>
−
*{
+
*{
−
font-family: Tahoma, Nunito, Lato, !important;
+
  font-family: Tahoma, Nunito, Lato, !important;
−
}
+
}
−
 
+
−
#content {
+
−
padding: 0% 0 0 0;
+
−
style = 'background-color: #808080';
+
−
}
+
 
 
−
p {
+
#content {
−
font-family: Tahoma, Nunito, serif !important;
+
  padding: 0% 0 0 0;
−
text-align: justified !important;
+
  style = 'background-color: #808080';
−
font-size: 18px;
+
}
−
}
+
−
 
+
−
b {
+
−
font-family: Tahoma, Nunito, serif !important;
+
−
font-weight: 700;
+
−
text-align: justified !important;
+
−
font-size: 18px;
+
−
}
+
−
 
+
−
.narration_bold {font-weight: 700;
+
−
font-size: 3;}
+
−
 
+
−
.narration_bold {
+
−
font-family: Tahoma, Nunito, serif
+
−
!important;
+
−
font-weight: 700;
+
−
text-align: justified !important;
+
−
font-size: 18px;}
+
 
 
−
.bold_text {
+
p {
−
font-weight: 700;
+
font-family: Tahoma, Nunito, serif !important;
−
}
+
text-align: justified !important;
 +
font-size: 18px;
 +
  }
 +
 +
  b {
 +
font-family: Tahoma, Nunito, serif !important;
 +
font-weight: 700;
 +
text-align: justified !important;
 +
font-size: 18px;
 +
  }
  
−
h1, h2, h3, h4 {
+
  .narration_bold {font-weight: 700;
−
font-family: Tahoma, Lato, serif !important;
+
font-size: 3;}
−
font-size: 16px;
+
−
text-align: justify;
+
    .narration_bold {
−
line-height: 1.5;
+
font-family: Tahoma, Nunito, serif  
−
font-weight: bold;
+
!important;
−
}
+
font-weight: 700;
 +
text-align: justified !important;
 +
font-size: 18px;}
 +
 
 +
.bold_text {
 +
font-weight: 700;
 +
}
  
−
ul, ol {
+
    h1, h2, h3, h4 {
−
font-family: Tahoma, Nunito, serif !important;
+
  font-family: Tahoma, Lato, serif !important;
−
vertical-align: middle !important;
+
  font-size: 16px;
−
font-size: 16px;
+
  text-align: justify;
−
text-align: justify;
+
  line-height: 1.5;
−
line-height: 1.5;
+
font-weight: bold;
−
}
+
}
  
−
body {
+
ul, ol {
−
font-size: 16px;
+
font-family: Tahoma, Nunito, serif !important;
−
padding: 0 0%;
+
  vertical-align: middle !important;
−
box-sizing: border-box;
+
  font-size: 16px;
−
}
+
  text-align: justify;
 +
  line-height: 1.5;
 +
}
 +
 +
body {
 +
  font-size: 16px;
 +
  padding: 0 0%;
 +
  box-sizing: border-box;
 +
}
 +
 +
img {
 +
max-width: 100%;
 +
height: auto;
 +
}
  
−
img {
+
{
−
max-width: 100%;
+
box-sizing: border-box;
−
height: auto;
+
}
−
}
+
  
−
{
+
.bulleted_list {  
−
box-sizing: border-box;
+
  list-style-type: square;
−
}
+
}
  
−
.bulleted_list {  
+
#home_logo, #sideMenu { display:none; }
−
list-style-type: square;
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
}
+
#content { margin:5px; padding:0px; width:100%;}
 +
body {background-color: #fff;}
  
−
#home_logo, #sideMenu { display:none; }
+
/* Menu Styling */
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
−
#content { margin:0px; padding:0px; width:100%;}
+
−
body {background-color: #fff;}
+
  
−
*{
+
ul {
−
      font-family: Nunito, Lato, !important;
+
list-style: none;
−
    }
+
font-size: 12px;
 +
}
  
−
    #content {
+
nav {
−
      padding: 4% 0 0 0;
+
text-align: center !important;
−
    }
+
display: flex;
−
   
+
padding-top: 10px;
−
    p {
+
align-items: center;
−
      font-family: Nunito, serif !important;
+
vertical-align: middle !important;
−
      font-size: 16px !important;
+
min-height: 6vH;
−
      text-align: justify;
+
background-color: #E1E1E1;
−
      line-height: 1.5;
+
font-family: Tahoma, Lato, serif;
−
    }
+
position: fixed;
 +
width: 100%;
 +
top: 2px;
 +
left: 0;
 +
z-index: 999;
 +
}
  
−
    center {
+
.logolink {
−
      font-family: Nunito, serif !important;
+
display: inline-block;
−
      line-height: 1.5;
+
width: 8%;
−
    }
+
margin-left: 50px !important;
 +
margin-top: 300px !important;
 +
margin-bottom: 10px !important;  
 +
}
  
−
  h1, h2, h3, h4 {
+
.Navlogo {
−
      font-family: Lato, serif !important;
+
display: inherit;
−
      text-align: justify;
+
width: 100%;
−
      line-height: 1.5;
+
}
−
      font-weight: bold;
+
−
    }
+
.nav-links {
 +
display: inline-flex;
 +
justify-content: space-around;
 +
                text-decoration: none;
 +
                color: #fff;
 +
width: 100%;
 +
}
  
−
    ul, ol {
+
.nav-links a{
−
    font-family: Nunito, serif !important;
+
color: #fff;
−
      font-size: 16px !important;
+
text-decoration: none;
−
      text-align: justify;
+
letter-spacing: 2px;
−
      line-height: 1.5;
+
font-weight: bold;
−
    }
+
font-size: 16px;
 +
display: block;
 +
}
  
−
    body {
+
/*Drop Down Menus for links at Computer Screen*/
−
      font-size: 16px !important;
+
.dropdown a{
−
      padding: 0 10%;
+
padding: 2vh;
−
      box-sizing: border-box;
+
}
−
    }
+
  
−
    img {
+
.dropdowncontent {
−
max-width: 100%;
+
cursor: pointer;
−
height: auto;
+
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);
 +
}
  
−
    {
+
.dropdowncontent a{
−
        box-sizing: border-box;
+
color: #fff;
−
    }
+
font-size: 12px;
 +
text-align: left;
 +
padding: 10px;
 +
transition: all 0.5s ease;
 +
}
  
−
    .bulleted_list {  
+
.dropdown:hover .dropdowncontent{
−
      list-style-type: square;
+
display: block;
−
    }
+
}
  
−
ul {
+
.dropdowncontent a:hover{
−
list-style: none;
+
background-color: #8a8b8c !important;
−
}
+
}
  
−
nav {
+
/*Burger Buns*/
−
text-align: center;
+
.burger {
−
display: flex;
+
display: none;
−
align-items: center;
+
cursor: pointer;
−
min-height: 6vH;
+
right: 5px;
−
background-color: #993233;
+
position: fixed;
−
font-family: Lato, serif;
+
}
−
position: fixed;
+
−
width: 100%;
+
−
top: 2px;
+
−
left: 0;
+
−
z-index: 999;
+
−
}
+
  
−
.logolink {
+
.burger div{
−
display: inline-block;
+
width: 25px;
−
width: 8%;
+
height: 5px;
−
margin-left: 50px !important;
+
background-color: white;
−
margin-top: 300px !important;
+
margin: 5px;
−
margin-bottom: 10px !important;  
+
transition: background-color 400ms linear;
−
}
+
transition: all 0.3s ease;
 +
}
  
−
.Navlogo {
+
@media screen {
−
display: inherit;
+
body {
−
width: 100%;
+
margin: auto;
−
}
+
}
 +
}
  
−
.nav-links {
+
/*Mobile Navigation Bar*/
−
display: inline-flex;
+
@media screen and (max-width: 1080px) {
−
justify-content: space-around;
+
body {
−
width: 100%;
+
overflow-x: hidden;
−
}
+
}
  
−
.nav-links a{
+
.logolink {
−
color: #fff;
+
position: relative;
−
text-decoration: none;
+
display: block;
−
letter-spacing: 2px;
+
width: 20%;
−
font-weight: bold;
+
}
−
font-size: 20px;
+
−
display: block;
+
−
}
+
  
−
/*Drop Down Menus for links at Computer Screen*/
+
.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;
 +
}
  
−
.dropdown a{
+
.nav-links li{
−
padding: 5px;
+
opacity: 0;
−
}
+
display: block;
 +
}
  
−
.dropdowncontent {
+
.nav-links a{
−
cursor: pointer;
+
font-size:15px;
−
display: none;
+
}
−
position: absolute;
+
−
background-color: #424242;
+
−
min-width: 150px;
+
−
z-index: 1;
+
−
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
}
+
  
−
.dropdowncontent a{
+
.burger {
−
color: #fff;
+
display: block;
−
font-size: 16px;
+
}
−
text-align: left;
+
−
padding: 10px;
+
−
transition: all 0.5s ease;
+
−
}
+
−
.dropdown:hover .dropdowncontent{
+
−
display: block;
+
  
−
}
+
.dropdown {
 +
padding-top: 20px;
 +
}
  
−
.dropdowncontent a:hover{
+
.dropdowncontent {
−
background-color: #8a8b8c !important;
+
display: none;
−
 
+
position: relative;
−
 
+
}
−
 
+
.dropdowncontent a{
−
}
+
font-size: 10px;
−
 
+
padding: 10px;
−
/*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*/
+
.nav-active {
−
 
+
transform: translateX(0%);
−
@media screen and (max-width: 1080px) {
+
padding-left: 0px;
−
body {
+
−
overflow-x: hidden;
+
 
}
 
}
  
−
.logolink {
+
@keyframes navLinkFade {
−
position: relative;
+
from {
−
display: block;
+
opacity: 0;
−
width: 20%;
+
transform: translateX(25px);
 +
}
 +
to {
 +
opacity: 1;
 +
transform: translateX(0px);
 +
}
 
}
 
}
  
−
.nav-links {
+
.toggle .line1{
−
position: fixed;
+
background-color: #E2D264;
−
display: block;
+
transform: rotate(180deg);
−
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 {
+
.toggle .line2{
−
display: block;
+
background-color: #E73C7E;
 +
transform: rotate(180deg);
 
}
 
}
  
−
.dropdown {
+
.toggle .line3{
−
padding-top: 20px;
+
background-color: #3E4A9E;
 +
transform: rotate(180deg);
 
}
 
}
  
−
.dropdowncontent {
+
</style>
−
display: none;
+
<body>
−
position: relative;
+
<nav>
−
}
+
<ul class="nav-links">
−
.dropdowncontent a{
+
<li class="dropdown"> 
−
font-size: 10px;
+
<a style="color: white; text-decoration: None;" class="link" href="https://2021.igem.org/Team:MIT">Home </a>
−
padding: 10px;
+
</li>
−
}
+
−
}
+
  
−
.nav-active {
+
<li class="dropdown"> 
−
transform: translateX(0%);
+
<a> Team </a>
−
padding-left: 0px;
+
<div class="dropdowncontent">
−
}
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Team">Team </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a>
 +
</div>
 +
</li>
  
 +
<li class="dropdown">
 +
<a> Project </a>
 +
<div class="dropdowncontent">
 +
<a style="color: white; text-decoration: None;" class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Design"> Design </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Model"> Model </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Results"> Results </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a>
 +
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a>
 +
</div>
 +
</li>
  
−
@keyframes navLinkFade {
+
<li class="dropdown"> 
−
from {
+
<a> Parts </a>
−
opacity: 0;
+
<div class="dropdowncontent">
−
transform: translateX(25px);
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </a>
−
}
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </a>
−
to {
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </a>
−
opacity: 1;
+
</div>
−
transform: translateX(0px);
+
</li>
−
}
+
<li class="dropdown">   
−
}
+
<a> Safety </a>
−
 
+
−
.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>
+
−
</head>
+
−
 
+
−
<body>
+
−
<nav>
+
−
<ul class="nav-links">
+
−
<li class="dropdown">
+
−
<a style="color: white; text-decoration: None;" class="link" href="https://2021.igem.org/Team:MIT">Home </a>
+
−
</li>
+
−
 
+
−
<li class="dropdown">   
+
−
<a> Team </a>
+
 
<div class="dropdowncontent">
 
<div class="dropdowncontent">
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Team">Team </a>
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Safety"> Safety </a>
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a>
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a>
 
</div>
 
</div>
−
</li>
+
</li>
  
−
<li class="dropdown">  
+
<li class="dropdown">
−
<a> Project </a>
+
<a> Human Practices </a>
 
<div class="dropdowncontent">
 
<div class="dropdowncontent">
−
<a style="color: white; text-decoration: None;" class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </a>
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a>
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Design"> Design </a>
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </a>
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a>
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Model"> Model </a>
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Results"> Results </a>
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a>
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a>
+
−
</div>
+
−
</li>
+
−
 
+
−
<li class="dropdown"> 
+
−
<a> Parts </a>
+
−
<div class="dropdowncontent">
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </a>
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </a>
+
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </a>
+
 
</div>
 
</div>
 
</li>
 
</li>
−
<li class="dropdown"> 
 
−
<a> Safety </a>
 
−
<div class="dropdowncontent">
 
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Safety"> Safety </a>
 
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a>
 
−
</div>
 
−
</li>
 
  
−
<li class="dropdown">
+
<div class="burger">
−
<a> Human Practices </a>
+
<div class="line1"></div>
−
<div class="dropdowncontent">
+
<div class="line2"></div>
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a>
+
<div class="line3"></div>
−
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </a>
+
 
</div>
 
</div>
−
</li>
 
−
 
−
<div class="burger">
 
−
<div class="line1"></div>
 
−
<div class="line2"></div>
 
−
<div class="line3"></div>
 
−
</div>
 
−
 
−
</u1>
 
−
</nav>
 
−
</body>
 
  
 +
</u1>
 +
</nav>
 +
</body>
  
 
<script>
 
<script>
−
/*Toggle Nav*/
+
console.log("Menu Script Loaded");
 +
/*Toggle Nav*/
 
const navSlide = () => {
 
const navSlide = () => {
 
const burger = document.querySelector ('.burger');
 
const burger = document.querySelector ('.burger');
Line 406: Line 353:
 
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();
−
 
+
</script>
−
</script>
+
−
 
+
 
</html>
 
</html>

Revision as of 01:17, 14 October 2021