Difference between revisions of "Template:TecCEM/Menu"

 
(126 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
</head>
 
</head>
  
−
<body>
+
<body>i
 
<div class="menu-close">
 
<div class="menu-close">
 
     <div class="menu-close__burger"></div>
 
     <div class="menu-close__burger"></div>
Line 14: Line 14:
 
 
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=14SwINy5VJlJKdAo1jbp-7nKI5-k7nmTf" alt="">
+
<a href="https://2021.igem.org/Team:TecCEM">
−
<p>1</p>
+
<img src="https://static.igem.org/mediawiki/2021/0/04/T--TecCEM--main.svg" alt="">
 +
</a>
 +
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Home</p>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
<a href="https://2021.igem.org/Team:TecCEM/Team">
−
<p>2</p>
+
<img src="https://static.igem.org/mediawiki/2021/6/6d/T--TecCEM--CEM_equipo_icono.svg" alt="">
 +
</a>
 +
 +
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Team</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Team" style="color: white">Members</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Collaborations" style="color: white">Collaborations</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Attributions" style="color: white">Attributions</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Contribution" style="color: white">Contribution</a></li>
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
<a href="https://2021.igem.org/Team:TecCEM/Description">
−
<p>3</p>
+
<img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg" alt="">
 +
</a>
 +
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Project</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Description" style="color: white">Description</a></li>
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Notebook" style="color: white">Notebook</a></li>
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Implementation" style="color: white">Implementation</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results" style="color: white">Results</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Zetasizer" style="color: white">Particle detection</a></li>
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Engineering" style="color: white">Engineering success</a></li>
 +
 +
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
−
<p>4</p>
+
<a href="https://2021.igem.org/Team:TecCEM/Safety">
 +
<img src="https://static.igem.org/mediawiki/2021/b/ba/T--TecCEM--TecCEMpremiosicono.svg" alt="">
 +
</a>
 +
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold; color: white;">Awards</p>
 +
<ul class = "menu_item">
 +
                                                <li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Awards" style="color: white">Awards</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Model" style="color: white">Model</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Hardware" style="color: white">Hardware</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Software" style="color: white">Software</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Sustainable" style="color: white">Sustainable Development Goals</a></li>
 +
 
 +
 
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Safety" style="color: white">Safety</a></li>
 +
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
<a href="https://2021.igem.org/Team:TecCEM/Human_Practices">
−
<p>5</p>
+
<img src="https://static.igem.org/mediawiki/2021/1/1d/T--TecCEM--HumanPractices_Icono_Texem.svg" alt="">
 +
</a>
 +
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Human Practices</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Human_Practices" style="color: white">Human Practices</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Communication" style="color: white">Education and Engagement</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Survey" style="color: white">Survey Results</a></li>
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
<a href="https://2021.igem.org/Team:TecCEM/Parts">
−
<p>6</p>
+
<img src="https://static.igem.org/mediawiki/2021/archive/c/ce/20211005011830%21T--TecCEM--Biobrick_Icono_Texem.svg" alt="">
 +
</a>
 +
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Parts</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Parts" style="color: white">Overview</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Biosensorparts" style="color: white">Biosensor Parts</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/SelectionMarkerParts" style="color: white">Selection Marker Parts</a></li>
 +
</ul>
 
</div>
 
</div>
 
<div class="menu_icon">
 
<div class="menu_icon">
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
<a href="https://igem.org/2021_Judging_Form?team=TecCEM">
−
<p>7</p>
+
<img src="https://static.igem.org/mediawiki/2021/a/a1/T--TecCEM--Form_Icono_Texem.svg" alt="">
−
</div>
+
</a>
−
<div class="menu_icon">
+
<p style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Judging form</p>
−
<img src="https://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
+
−
<p>8</p>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="menu_teccem">
 
<div class="menu_teccem">
−
<p>Tec CEM 2021</p>
+
 
</div>
 
</div>
 
</div>
 
</div>
−
 
 
 
 
</body>
 
</body>
 
<style>
 
<style>
 +
 +
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
 +
 +
    #sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
 +
    #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 +
    body, html {background-color:white; width: 100%vw; height: 100%;}
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
    #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
 +
 +
 +
*{
 +
margin: 0;
 +
padding: 0;
 +
}
 
.menu_close{
 
.menu_close{
 
position: fixed;
 
position: fixed;
Line 65: Line 131:
 
.menu_icon{
 
.menu_icon{
 
top: 30px;
 
top: 30px;
−
height: 40%;
+
height: 90%;
−
width: 10%;
+
width: 10%;
 
display: flex;
 
display: flex;
 
flex-direction: column;
 
flex-direction: column;
−
align-items: center;
 
 
justify-content: center;
 
justify-content: center;
−
margin: 1rem;
+
align-items: center;
 +
 
 
 
}
 
}
 
.menu_icon img{
 
.menu_icon img{
 
width: 70%;
 
width: 70%;
 +
display: block;
 +
margin: 0;
 +
margin-left: auto;
 +
  margin-right: auto;
 
}
 
}
−
.menu_hidden{
+
/*=============== SubMenus ==========*/
 +
.menu_icon:hover .menu_item{
 +
display: block;
 +
visibility:visible;
 +
}
 +
 +
.menu_item{
 +
margin-left: 0%;
 +
margin-top: 92%;
 +
display:none;
 +
padding-top: 50%;
 +
top:115px;
 +
position:absolute;
 +
list-style:none;
 +
transition: transform 0.6s ease-out;
 +
visibility:hidden;
 +
margin-left: auto;
 +
margin-right: auto;
 
 
−
transform: translateX(-0%) translateY(-80%);
+
 +
}
 +
.menu_item > li {
 +
float:left;
 +
position:relative;
 +
display: inline-block;
 +
padding: 0px;
 +
margin-bottom: 5px;
 +
padding:10px 12px;
 +
padding-top:50px;
 +
}
 +
 +
.menu_item > li:hover{
 +
text-decoration: underline;
 +
 
 +
cursor: pointer;
 +
}
 +
 +
/*======================================*/
 +
 +
.menu_hidden{
 +
transform: translateX(-0%) translateY(-70%);
 +
/*100% - .menu.height + .menu_teccem.heigh
 +
100 - 35 + 25 = 90
 +
100 + 35 - 55 - 10 =
 +
*/
 
}
 
}
 
.menu_iconos{
 
.menu_iconos{
−
width: 100%;
+
width: 100vw;
−
height: 80%;
+
height: 100%;
−
background: green;
+
/*background: green;  - jose's edit*/
−
padding-left: 2.5rem;
+
                        background-color: rgb(0,0,0, 0.8);
 +
padding-left: 5rem;
 +
padding-right: 1.5rem;
 
overflow: hidden;
 
overflow: hidden;
 
display: flex;
 
display: flex;
 
flex-wrap: wrap;
 
flex-wrap: wrap;
 
justify-content: space-around;
 
justify-content: space-around;
 +
align-content: center;
 
}
 
}
 
.menu_teccem > p{
 
.menu_teccem > p{
Line 95: Line 210:
 
}
 
}
 
.menu_teccem{
 
.menu_teccem{
−
height: 20%;
+
height: 50%;
 
padding: 0;
 
padding: 0;
 
display: flex;
 
display: flex;
 
justify-content: center;
 
justify-content: center;
 
align-items: center;
 
align-items: center;
 +
z-index: 9999;
 
}
 
}
 
.menu{
 
.menu{
Line 107: Line 223:
 
transition: transform 0.6s ease-out;
 
transition: transform 0.6s ease-out;
 
position: fixed;
 
position: fixed;
−
width: 100%;
+
width: 100vw;
−
background: red;
+
margin-top: 0;
−
height: 45%;
+
/*background: red;  -jose's edit*/
 +
                        background-color: rgb(0, 20, 137, 0.8);
 +
height: 30%;
 +
 +
z-index: 9999;
 
}
 
}
 
 
Line 115: Line 235:
 
.menu-close {
 
.menu-close {
 
  position: fixed;
 
  position: fixed;
−
top:0;
+
top:10;
−
z-index: 99999;
+
z-index: 99999;
 
  display: flex;
 
  display: flex;
 
  justify-content: center;
 
  justify-content: center;
Line 131: Line 251:
 
  background: #fff;
 
  background: #fff;
 
  border-radius: 5px;
 
  border-radius: 5px;
−
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
+
  box-shadow: 0 2px 5px rgba(205, 236, 169 ,0.2);
 
  transition: all .5s ease-in-out;
 
  transition: all .5s ease-in-out;
 
}
 
}
Line 183: Line 303:
 
  }
 
  }
 
});
 
});
−
 
+
−
$(window).scroll(function(){
+
$(window).scroll(function(){
 
  if($(document).scrollTop() > 20){//Here 200 may be not be exactly 200px
 
  if($(document).scrollTop() > 20){//Here 200 may be not be exactly 200px
 
document.querySelector(".menu").classList.add("menu_hidden");
 
document.querySelector(".menu").classList.add("menu_hidden");
 +
menuBtn.classList.remove('open');
 +
menuOpen = true;
 +
 
 
  }
 
  }
 
});
 
});
−
 
 
 
 
</script>
 
</script>
 
</html>
 
</html>

Latest revision as of 02:58, 18 December 2021

Untitled Document i

Home

Team

Project

Awards

Human Practices

Parts

Judging form