Difference between revisions of "Template:TecCEM/Menu"

Line 1: Line 1:
 +
<!doctype html>
 
<html>
 
<html>
 
<head>
 
<head>
Line 14: Line 15:
 
 
 
<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://drive.google.com/uc?export=download&id=14SwINy5VJlJKdAo1jbp-7nKI5-k7nmTf" alt="">
 +
</a>
 +
<p>Inicio</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>Team</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/Description">
−
<p>3</p>
+
<img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg" alt="">
 +
</a>
 +
<p>Project</p>
 +
<ul class = "menu_item">
 +
<li>Description</li>
 +
<li>Design</li>
 +
<li>Experiments</li>
 +
<li>Notebook</li>
 +
<li>Contribution</li>
 +
<li>Results</li>
 +
<li>Demonstrate</li>
 +
<li>Improve</li>
 +
<li>Model</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://drive.google.com/uc?export=download&id=1Ro2YM2wOzlsBPWBu95xGp42Hx43F64XJ" alt="">
 +
</a>
 +
<p>Safety</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/Human_Practices">
−
<p>5</p>
+
<img src="https://static.igem.org/mediawiki/2021/1/1d/T--TecCEM--HumanPractices_Icono_Texem.svg" alt="">
 +
</a>
 +
<p>Human Practices</p>
 +
<ul class = "menu_item">
 +
<li>Human practices</li>
 +
<li>Education and Engagement</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/c/ce/T--TecCEM--Biobrick_Icono_Texem.svg" alt="">
 +
</a>
 +
<p>Parts</p>
 +
<ul class = "menu_item">
 +
<li>Overview</li>
 +
<li>Basic parts</li>
 +
<li>Composite</li>
 +
<li>Part Collection</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/Entrepreneurship">
−
<p>7</p>
+
<img src = "https://static.igem.org/mediawiki/2021/7/7d/T--TecCEM--Emprendimiento_Icono_Texem.svg" alt="">
 +
</a>
 +
<p>Entrepreneurship</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>8</p>
+
<img src="https://static.igem.org/mediawiki/2021/a/a1/T--TecCEM--Form_Icono_Texem.svg" alt="">
 +
</a>
 +
<p>Judging form</p>
 
</div>
 
</div>
 
</div>
 
</div>
Line 51: Line 91:
 
</div>
 
</div>
 
 
 +
<div style="background: blue; height: 1900px; padding: 1rem;">
 +
 +
<p>Loremm ipsum dolor sit amet, consectetur adipisicing elit. Officiis repellat voluptas suscipit veritatis blanditiis sapiente, cumque doloremque dignissimos nisi assumenda nam quasi, mollitia inventore quisquam voluptates a, accusamus fugiat consectetur.</p>
 +
</div>
 
 
 
</body>
 
</body>
 
<style>
 
<style>
−
    #sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
+
*{
−
    #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
+
margin: 0;
−
    body, html {background-color:white; width: 100%; height: 100%;}
+
padding: 0;
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
}
−
    #bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
+
 
.menu_close{
 
.menu_close{
 
position: fixed;
 
position: fixed;
Line 70: Line 113:
 
.menu_icon{
 
.menu_icon{
 
top: 30px;
 
top: 30px;
−
height: 40%;
+
height: 90%;
 
width: 10%;
 
width: 10%;
 
display: flex;
 
display: flex;
Line 77: Line 120:
 
justify-content: center;
 
justify-content: center;
 
margin: 1rem;
 
margin: 1rem;
−
 
 
}
 
}
 
.menu_icon img{
 
.menu_icon img{
 
width: 70%;
 
width: 70%;
 
}
 
}
 +
.menu_icon:hover .menu_item{
 +
visibility: visible;
 +
}
 +
.menu_item{
 +
background: white;
 +
padding: .5rem;
 +
margin-left: 13%;
 +
margin-top: 10%;
 +
position: absolute;
 +
list-style-type: none;
 +
visibility: hidden;
 +
width: 6%;
 +
}
 +
.menu_item > li:hover{
 +
text-decoration: underline;
 +
background: red;
 +
cursor: pointer;
 +
}
 +
 
.menu_hidden{
 
.menu_hidden{
−
+
transform: translateX(-0%) translateY(-85%);
−
transform: translateX(-0%) translateY(-80%);
+
/*100% - .menu.height + .menu_teccem.heigh
 +
100 - 35 + 20 = 85
 +
*/
 
}
 
}
 
.menu_iconos{
 
.menu_iconos{
 
width: 100%;
 
width: 100%;
−
height: 80%;
+
height: 100%;
 
background: green;
 
background: green;
 
padding-left: 2.5rem;
 
padding-left: 2.5rem;
Line 95: Line 158:
 
flex-wrap: wrap;
 
flex-wrap: wrap;
 
justify-content: space-around;
 
justify-content: space-around;
 +
align-content: center;
 +
align-items: center;
 +
 
}
 
}
 
.menu_teccem > p{
 
.menu_teccem > p{
Line 113: Line 179:
 
position: fixed;
 
position: fixed;
 
width: 100%;
 
width: 100%;
 +
margin-top: 0;
 
background: red;
 
background: red;
−
height: 45%;
+
height: 30%;
 
}
 
}
 
 
Line 121: Line 188:
 
  position: fixed;
 
  position: fixed;
 
top:0;
 
top:0;
−
z-index: 99999;
+
z-index: 99999;
 
  display: flex;
 
  display: flex;
 
  justify-content: center;
 
  justify-content: center;
Line 188: Line 255:
 
  }
 
  }
 
});
 
});
−
 
+
−
$(window).scroll(function(){
+
$(window).scroll(function(){
−
  if($(document).scrollTop() > 80){//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");
−
                        document.querySelector('.menu-close').classList.remove('open');
+
 
−
menuOpen = true;
+
 
  }
 
  }
 
});
 
});
−
 
 
 
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 23:07, 29 August 2021

<!doctype html> Untitled Document

Inicio

Team

Project

  • Description
  • Design
  • Experiments
  • Notebook
  • Contribution
  • Results
  • Demonstrate
  • Improve
  • Model

Safety

Human Practices

  • Human practices
  • Education and Engagement

Parts

  • Overview
  • Basic parts
  • Composite
  • Part Collection

Entrepreneurship

Judging form

Tec CEM 2021

Loremm ipsum dolor sit amet, consectetur adipisicing elit. Officiis repellat voluptas suscipit veritatis blanditiis sapiente, cumque doloremque dignissimos nisi assumenda nam quasi, mollitia inventore quisquam voluptates a, accusamus fugiat consectetur.