Difference between revisions of "Template:MIT/menu"

 
(44 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Template:MIT/style}}
 
−
 
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" />
−
#home_logo, #sideMenu { display:none; }
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Tahoma" />
−
#content { margin:5px; padding:0px; width:100%;}
+
<meta charset="utf-8">
−
body {background-color: #fff;}
+
<meta name="HandheldFriendly" content="True">
 +
<meta name="MobileOptimized" content="320">
 +
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
 +
<script src="../../js/ios-orientationchange-fix.min.js"></script>
 +
</head>
 +
 +
<style>
 +
*{
 +
  font-family: Tahoma, Nunito, Lato, !important;
 +
}
 +
 +
#content {
 +
  padding: 0% 0 0 0;
 +
  style = 'background-color: #808080';
 +
}
 +
 +
 +
 +
  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 {
 +
font-weight: 700;
 +
}
 +
 
 +
    h1, h2, h3, h4 {
 +
  font-family: Tahoma, Lato, serif !important;
 +
  font-size: 16px;
 +
  text-align: justify;
 +
  line-height: 1.5; 
 +
font-weight: bold;
 +
}
 +
 
 +
ul, ol {
 +
font-family: Tahoma, Nunito, serif !important;
 +
  vertical-align: middle !important;
 +
  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;
 +
}
 +
 
 +
{
 +
box-sizing: border-box;
 +
}
 +
 
 +
.bulleted_list {
 +
  list-style-type: square;
 +
}
 +
 
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin:0px; padding:0px; width:100%;}
 +
body {background-color: #fff;}
 +
 
 
/* Menu Styling */
 
/* Menu Styling */
 +
 
ul {
 
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: 8px;
+
padding-top: 10px;
 
align-items: center;
 
align-items: center;
 
vertical-align: middle !important;
 
vertical-align: middle !important;
−
min-height: 6vH;
+
min-height: 8vH;
−
background-color: #c2a593;
+
background-color: #9D2235;
−
font-family: Tahoma, serif;
+
font-family: Tahoma, Lato, serif;
 
position: fixed;
 
position: fixed;
 
width: 100%;
 
width: 100%;
Line 28: Line 106:
 
z-index: 999;
 
z-index: 999;
 
}
 
}
 +
 
.logolink {
 
.logolink {
 
display: inline-block;
 
display: inline-block;
 
width: 8%;
 
width: 8%;
 
margin-left: 50px !important;
 
margin-left: 50px !important;
−
margin-top: 300px !important;
+
margin-top: 30px !important;
−
margin-bottom: 10px !important;  
+
margin-bottom: 0px !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;
 +
                text-decoration: none;
 +
                color: #fff;
 
width: 100%;
 
width: 100%;
 
}
 
}
−
.nav-links am{
+
 
 +
.nav-links a{
 
color: #fff;
 
color: #fff;
 
text-decoration: none;
 
text-decoration: none;
Line 52: Line 136:
 
display: block;
 
display: block;
 
}
 
}
 +
 
/*Drop Down Menus for links at Computer Screen*/
 
/*Drop Down Menus for links at Computer Screen*/
−
.dropdown am{
+
.dropdown a{
 
padding: 2vh;
 
padding: 2vh;
 
}
 
}
 +
 
.dropdowncontent {
 
.dropdowncontent {
 
cursor: pointer;
 
cursor: pointer;
Line 65: Line 151:
 
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 am{
+
 
 +
.dropdowncontent a{
 
color: #fff;
 
color: #fff;
 
font-size: 12px;
 
font-size: 12px;
Line 72: Line 159:
 
transition: all 0.5s ease;
 
transition: all 0.5s ease;
 
}
 
}
 +
 
.dropdown:hover .dropdowncontent{
 
.dropdown:hover .dropdowncontent{
 
display: block;
 
display: block;
 
}
 
}
−
.dropdowncontent am:hover{
+
 
 +
.dropdowncontent a:hover{
 
background-color: #8a8b8c !important;
 
background-color: #8a8b8c !important;
 
}
 
}
 +
 
/*Burger Buns*/
 
/*Burger Buns*/
 
.burger {
 
.burger {
Line 85: Line 175:
 
position: fixed;
 
position: fixed;
 
}
 
}
 +
 
.burger div{
 
.burger div{
 
width: 25px;
 
width: 25px;
Line 93: Line 184:
 
transition: all 0.3s ease;
 
transition: all 0.3s ease;
 
}
 
}
 +
 
@media screen {
 
@media screen {
 
body {
 
body {
Line 98: Line 190:
 
}
 
}
 
}
 
}
 +
 
/*Mobile Navigation Bar*/
 
/*Mobile Navigation Bar*/
 
@media screen and (max-width: 1080px) {
 
@media screen and (max-width: 1080px) {
Line 103: Line 196:
 
overflow-x: hidden;
 
overflow-x: hidden;
 
}
 
}
 +
 
.logolink {
 
.logolink {
 
position: relative;
 
position: relative;
Line 108: Line 202:
 
width: 20%;
 
width: 20%;
 
}
 
}
 +
 
.nav-links {
 
.nav-links {
 
position: fixed;         
 
position: fixed;         
Line 113: Line 208:
 
height: 100%;
 
height: 100%;
 
right: 0px;
 
right: 0px;
−
top: 10vh;
+
top: 8vh;
−
background-color: #c2a593;
+
background-color: #9D2235;
 
width: 30%;
 
width: 30%;
 
transform: translateX(150%);
 
transform: translateX(150%);
Line 122: Line 217:
 
z-index: -1;
 
z-index: -1;
 
}
 
}
 +
 
.nav-links li{
 
.nav-links li{
 
opacity: 0;
 
opacity: 0;
 
display: block;
 
display: block;
 
}
 
}
−
.nav-links am{
+
 
 +
.nav-links a{
 
font-size:15px;
 
font-size:15px;
 
}
 
}
 +
 
.burger {
 
.burger {
 
display: block;
 
display: block;
 
}
 
}
 +
 
.dropdown {
 
.dropdown {
 
padding-top: 20px;
 
padding-top: 20px;
 
}
 
}
 +
 
.dropdowncontent {
 
.dropdowncontent {
 
display: none;
 
display: none;
 
position: relative;
 
position: relative;
 
}
 
}
−
.dropdowncontent am{
+
.dropdowncontent a{
 
font-size: 10px;
 
font-size: 10px;
 
padding: 10px;
 
padding: 10px;
 
}
 
}
 
}
 
}
 +
 
.nav-active {
 
.nav-active {
 
transform: translateX(0%);
 
transform: translateX(0%);
 
padding-left: 0px;
 
padding-left: 0px;
 
}
 
}
 +
 
@keyframes navLinkFade {
 
@keyframes navLinkFade {
 
from {
 
from {
Line 158: Line 260:
 
}
 
}
 
}
 
}
 +
 
.toggle .line1{
 
.toggle .line1{
 
background-color: #E2D264;
 
background-color: #E2D264;
 
transform: rotate(180deg);
 
transform: rotate(180deg);
 
}
 
}
 +
 
.toggle .line2{
 
.toggle .line2{
 
background-color: #E73C7E;
 
background-color: #E73C7E;
 
transform: rotate(180deg);
 
transform: rotate(180deg);
 
}
 
}
 +
 
.toggle .line3{
 
.toggle .line3{
 
background-color: #3E4A9E;
 
background-color: #3E4A9E;
 
transform: rotate(180deg);
 
transform: rotate(180deg);
 
}
 
}
−
</style>
 
−
</head>
 
  
−
    <body>
+
</style>
−
<nav>
+
−
<ul class="nav-links">
+
  
−
<li class="dropdown">   
+
<body>
−
            <am><a style="color: white; text-decoration: none;" href="https://2021.igem.org/Team:MIT">Home </a></am>
+
    <nav>
−
</li>
+
    <ul class="nav-links">
 +
            <li class="dropdown">   
 +
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT">Home </a>
 +
            </li>
  
−
<li class="dropdown">   
+
            <li class="dropdown">   
−
    <am> Team </am>
+
                <a> Team </a>
−
    <div class="dropdowncontent">
+
                <div class="dropdowncontent">
−
                <am href="https://2021.igem.org/Team:MIT/Team">Team </am>
+
                    <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Team">Team </a>
−
                        <am href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </am>
+
                    <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a>
−
    </div>
+
                </div>
−
</li>
+
            </li>
  
−
<li class="dropdown">  
+
            <li class="dropdown">  
−
                    <am> Project </am>
+
                <a> Project </a>
−
    <div class="dropdowncontent">
+
                    <div class="dropdowncontent">
−
                         <am class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </am>
+
                         <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Description"> Description </a>
−
                <am href="https://2021.igem.org/Team:MIT/Design"> Design </am>
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Design"> Design
−
                <am href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </am>
+
</a>
−
                <am href="https://2021.igem.org/Team:MIT/Model"> Model </am>
+
−
                <am href="https://2021.igem.org/Team:MIT/Results"> Results </am>
+
−
                <am href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </am>
+
−
                <am href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </am>
+
−
    </div>
+
−
</li>
+
  
−
<li class="dropdown">
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Parts"> Parts </a>
−
<am> Parts </am>
+
       
−
    <div class="dropdowncontent">
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a>
−
            <am href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </am>
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Notebook"> Notebook </a>
−
            <am href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </am>
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Model"> Model </a>
−
            <am href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </am>
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Results"> Results </a>
−
    </div>
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a>
−
</li>
+
                        <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a>
 +
                    </div>
 +
            </li>
  
−
<li class="dropdown">   
+
         
−
<am> Safety </am>
+
            <li class="dropdown">   
−
<div class="dropdowncontent">
+
                    <a> Safety </a>
−
        <am href="https://2021.igem.org/Team:MIT/Safety"> Safety </am>
+
            <div class="dropdowncontent">
−
        <am href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </am>
+
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Safety"> Safety </a>
−
</div>
+
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a>  
−
</li>
+
            </div>
 +
            </li>
  
−
<li class="dropdown">   
+
            <li class="dropdown">   
−
<am> Human Practices </am>
+
                    <a> Human Practices </a>
−
<div class="dropdowncontent">
+
−
        <am href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</am>
+
−
        <am href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </am>
+
−
</div>
+
−
</li>
+
−
</ul>
+
−
</nav>
+
−
</body>
+
  
−
    <script>
+
            <div class="dropdowncontent">
−
        /*Toggle Nav*/
+
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a>
−
        const navSlide = () => {
+
               
−
            const burger = document.querySelector ('.burger');
+
             </div>
−
            const nav = document.querySelector ('.nav-links');
+
−
             const navLinks = document.querySelectorAll('.nav-links li');
+
  
−
             burger.addEventListener('click', () => {
+
<li class="dropdown"> 
−
                nav.classList.toggle('nav-active');
+
                    <a> Education and Collaborations </a>
−
            /*Animate Menu links*/
+
 
−
                navLinks.forEach((link,index) => {
+
             <div class="dropdowncontent">
−
                if(link.style.animation) {
+
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Education"> Educational Module </a>
−
                    link.style.animation = '';
+
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Collaborations"> Collaborations </a>
−
                }
+
                <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Meetup"> MIT Microbiome Meetup </a>
−
                else {
+
 
−
                    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`;
+
<a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Partnership"> Partnership </a>
−
                }
+
            </div>
−
            });
+
 
−
            /*Burger Animation*/
+
        </ul>
−
            burger.classList.toggle('toggle');
+
            <div class="burger">
−
            });
+
                <div class="line1"></div>
−
        }
+
                <div class="line2"></div>
−
    navSlide();
+
                <div class="line3"></div>
−
    </script>
+
            </div>
 +
        </nav>
 +
</div>
 +
</body>
 +
 
 +
<script>
 +
console.log("Menu Script Loaded");
 +
/*Toggle Nav*/
 +
const navSlide = () => {
 +
const burger = document.querySelector ('.burger');
 +
const nav = document.querySelector ('.nav-links');
 +
const navLinks = document.querySelectorAll('.nav-links li');
 +
 
 +
burger.addEventListener('click', () => {
 +
nav.classList.toggle('nav-active');
 +
/*Animate Menu links*/
 +
navLinks.forEach((link,index) => {
 +
if(link.style.animation) {
 +
link.style.animation = '';
 +
}
 +
else {
 +
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`;
 +
}
 +
});
 +
/*Burger Animation*/
 +
burger.classList.toggle('toggle');
 +
});
 +
}
 +
navSlide();
 +
</script>
 
</html>
 
</html>

Latest revision as of 03:46, 22 October 2021