Difference between revisions of "Template:Alverno CA"

Line 21: Line 21:
 
}
 
}
  
−
.menu {
+
/* styling for the menu items */
−
  margin: 0 auto;
+
.menu_item {
−
  padding: 0;
+
width:100%;
−
  width: 350px;
+
margin:-2px 0px 0px -20px;  
 +
padding: 10px 10px;
 +
border-bottom: 1px solid #000000;
 +
font-weight:bold;
 +
color:#FFFFFF;
 +
cursor: pointer;  
 
}
 
}
  
−
.menu li { list-style: none; }
+
/* when hovering on a menu item */
 +
.menu_item:hover {  
 +
color:#FFFFFF;
 +
background-color: #E56552;
 +
}
  
−
.menu li a {
+
/* decoration icon for the menu buttons*/
−
  display: table;
+
.icon {
−
  margin-top: 1px;
+
float:right;
−
  padding: 14px 10px;
+
font-size:16px;  
−
  width: 100%;
+
font-weight:bold;  
−
  background: #337D88;
+
}
−
  text-decoration: none;
+
/* this is the icon for when the content is collapsed */
−
  text-align: left;
+
.plus::before {
−
  vertical-align: middle;
+
content: "+";  
−
  color: #fff;
+
}
−
  overflow: hidden;
+
/* this is the icon for when the content is expanded */
−
  -webkit-transition-property: background;
+
.less::before {
−
  -webkit-transition-duration: 0.4s;
+
content: "–";  
−
  -webkit-transition-timing-function: ease-out;
+
−
  transition-property: background;
+
−
  transition-duration: 0.4s;
+
−
  transition-timing-function: ease-out;
+
 
}
 
}
  
−
.menu > li:first-child a { margin-top: 0; }
+
/* styling for the ul that creates the buttons */
 +
ul.menu_items {
 +
width:100%;
 +
margin-left:0px;
 +
padding:0px;
 +
list-style: none;  
 +
}
  
−
.menu li a:hover {
+
/* styling for the li that are the menu items */
−
  background: #4AADBB;
+
.menu_items li {  
−
  -webkit-transition-property: background;
+
width:90%;
−
  -webkit-transition-duration: 0.2s;
+
margin-top:-2px;
−
  -webkit-transition-timing-function: ease-out;
+
padding: 15px 0px 15px 15px ;
−
  transition-property: background;
+
display:block;
−
  transition-duration: 0.2s;
+
border-bottom: 1px solid #000000;
−
  transition-timing-function: ease-out;
+
text-align:left;
 +
font-weight:bold;
 +
text-decoration:none;
 +
color:#FFFFFF;
 +
list-style-type:none;
 +
cursor:pointer;  
 +
-webkit-transition: all 0.4s ease;  
 +
-moz-transition: all 0.4s ease;  
 +
-ms-transition: all 0.4s ease;  
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease;
 
}
 
}
  
−
.menu li ul {
+
.menu_item a {
−
  margin: 0;
+
width: 100%;
−
  padding: 0;
+
margin-left: -20px;
 +
padding: 11px 90px 12px 20px;
 +
text-decoration: none;
 +
color:#FFFFFF;
 
}
 
}
  
−
.menu li li a {
+
/* When hovering on a menu item */
−
  display: block;
+
.menu_items li:hover {  
−
  margin-top: 0;
+
background-color:#E56552;
−
  padding: 0 10px;
+
color: #FFFFFF;
−
  height: 0;
+
−
  background: #C6DDD9;
+
−
  color: #1F3D39;
+
−
  -webkit-transition-property: all;
+
−
  -webkit-transition-duration: 0.5s;
+
−
  -webkit-transition-timing-function: ease-out;
+
−
  transition-property: all;
+
−
  transition-duration: 0.5s;
+
−
  transition-timing-function: ease-out;
+
 
}
 
}
  
−
.menu > li:hover li a {
+
/* styling for the submenus */
−
  display: table;
+
.submenu {
−
  margin-top: 1px;
+
width:100%;  
−
  padding: 10px;
+
display: none;
−
  width: 100%;
+
font-weight:bold;
−
  height: 1em;
+
cursor:pointer;  
−
  -webkit-transition-property: all;
+
background-color:#000000;
−
  -webkit-transition-duration: 0.3s;
+
 
−
  -webkit-transition-timing-function: ease-out;
+
−
  transition-property: all;
+
−
  transition-duration: 0.3s;
+
−
  transition-timing-function: ease-out;
+
 
}
 
}
  
−
.menu > li:hover li a:hover {
+
/* moving the margin for the submenu ul list */
−
  background: #A4CAC8;
+
ul.submenu {  
−
  -webkit-transition-property: background;
+
width: 100%;
−
  -webkit-transition-duration: 0.2s;
+
margin: 10px 0px -11px 0px;
−
  -webkit-transition-timing-function: ease-out;
+
list-style: none;
−
  transition-property: background;
+
−
  transition-duration: 0.2s;
+
−
  transition-timing-function: ease-out;
+
 
}
 
}
 +
 +
/*styling for the submenu buttons */
 +
.submenu li {
 +
width: 100%;
 +
margin-left: 10px;
 +
margin-bottom: 0px;
 +
}
 +
 +
 +
/* hover state for the submenu buttons */
 +
.submenu li a {
 +
width: 100%;
 +
padding: 5px 10px;
 +
display: inline-block;
 +
border-bottom: 1px solid #000000;
 +
background-color:#000000;
 +
text-decoration:none;
 +
color:#FFFFFF;
 +
}
 +
 +
 +
 +
.submenu li a:hover  {
 +
background-color:#EA897B;
 +
color: #FFFFFF;
 +
}
 +
 +
 +
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
 +
.collapsable_menu_control {
 +
width:100%;
 +
padding: 15px 0px;
 +
display:none;
 +
background-color:#000000;
 +
text-align:center; 
 +
font-weight:bold;
 +
color:#FFFFFF;
 +
cursor:pointer;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* when hovering on that button */
 +
.collapsable_menu_control:hover {
 +
background-color: #EA897B;
 +
color:#FFFFFF; 
 +
}
 +
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/
  
Line 361: Line 419:
  
  
−
<nav id="menu_box">
+
<div class="menu_wrapper" >
−
  <ul class="menu">
+
 
−
    <li> <a href="#">Menu 1</a>
+
 
−
      <ul>
+
 
−
        <li><a href="#">Menu 1.1</a></li>
+
 
−
        <li><a href="#">Menu 1.2</a></li>
+
<div class="collapsable_menu_control"> MENU ▤ </div>
−
      </ul>
+
 
−
    </li>
+
<ul id="accordion" class="accordion">
−
    <li> <a href="#">Menu 2</a>
+
 
−
      <ul>
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:Alverno_CA">HOME </a> </li>
−
        <li><a href="#">Menu 2.1</a></li>
+
 
−
        <li><a href="#">Menu 2.2</a></li>
+
 
−
        <li><a href="#">Menu 2.3</a></li>
+
<li class="menu_item"> <div class="icon plus"></div> TEAM
−
      </ul>
+
<ul class="submenu">
−
    </li>
+
<li> <a href=" https://2016.igem.org/Team:Alverno_CA/Team"> Team  </a> </li>
−
    <li> <a href="#">Menu 3</a>
+
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Collaborations">★  Collaborations </a> </li>
−
      <ul>
+
                    </ul>
−
        <li><a href="#">Menu 3.1</a></li>
+
                </li>
−
        <li><a href="#">Menu 3.2</a></li>
+
 
−
        <li><a href="#">Menu 3.3</a></li>
+
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
−
        <li><a href="#">Menu 3.4</a></li>
+
<ul class="submenu">
−
      </ul>
+
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Description"> ★  Description </a></li>
−
    </li>
+
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Design"> ★ Design </a></li>
−
    <li> <a href="#">Menu 4</a> </li>
+
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Experiments"> Experiments </a></li>
−
  </ul>
+
<li> <a href="https://2016.igem.org/Team:Alverno_CA/InterLab"> ★  Interlab Study </a></li>
−
</nav>
+
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Proof"> ★ Proof of Concept </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Demonstrate"> ★ Demonstrate </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Results"> Results </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Notebook"> Notebook </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> PARTS 
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Parts">Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Basic_Part"> ★ Basic Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Composite_Part"> ★ Composite Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Part_Collection"> ★ Part Collection </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Alverno_CA/Safety"> SAFETY </a> </li>
 +
 
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Alverno_CA/Attributions">★  ATTRIBUTIONS </a></li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Human_Practices"> Human Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/HP/Silver">★ Silver </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/HP/Gold">★ Gold </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Integrated_Practices"> ★ Integrated Practices </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Engagement">★ Engagement </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
 
 +
<li class="menu_item"> <div class="icon plus"></div> AWARDS
 +
<ul class="submenu">
 +
<li><a href="https://2016.igem.org/Team:Alverno_CA/Entrepreneurship"> ★ Entrepreneurship </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Hardware"> ★ Hardware </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Software">★ Software </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Measurement">★  Measurement </a></li>
 +
<li> <a href="https://2016.igem.org/Team:Alverno_CA/Model">★ Model </a></li>
 +
 
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
 
 +
</div>
 +
 
  
  

Revision as of 20:01, 12 August 2016

MENU ▤