Difference between revisions of "Template:Imperial College"

Line 70: Line 70:
  
 
/*this wraps the whole of the menu*/
 
/*this wraps the whole of the menu*/
−
.igem_2018_team_menu {  
+
.nav{
−
background-color:#c4baba;  
+
width:100%;
−
border-left: 1px solid #c4baba;
+
    height:auto;
−
display:block;
+
background:white;
−
float:right;
+
margin-bottom: 2%;
−
height:100vh;  
+
    position:fixed;
−
max-width: 270px;
+
    z-index: 40;
−
overflow-y: auto;
+
}
−
overflow-x: hidden;
+
.logo{
−
padding:0px;
+
−
position:fixed;  
+
−
right:0%;
+
−
text-align:left;
+
−
width: 15%;
+
−
}
+
  
 +
    width: 20%;
 +
    float: left;
 +
    height: 80px;
 +
    background-color:none;
 +
    box-sizing: border-box;
 +
}
  
−
.igem_2018_team_menu.displaying_menu{
+
.pixcell{
−
display:block;
+
    width:45%;
−
}
+
    margin-left:5px;
 +
    margin-top:30px;
 +
    float:left;
 +
    box-sizing: border-box;
 +
}
  
−
.igem_2018_team_menu  a {
+
.iclogo{
−
color: #484848;
+
    width:50%;
−
text-decoration:none;
+
    float:right;
−
}
+
    margin-top:30px;
 +
    box-sizing: border-box;
 +
}
  
−
.igem_2018_team_menu img {
+
.dropdown {
−
width:100%;
+
    float: right;
−
}
+
    width: 80%;
 +
    text-align: center;
 +
    background-color:none;
 +
}
  
 +
.dropdown ul {
 +
    margin:0;
 +
    padding-top:45px;
 +
list-style: none;
 +
    background-color:none;
 +
   
 +
}
 +
.dropdown ul li {
 +
    float: left;
 +
    cursor:pointer;
 +
    color:white;
 +
    font-size: 14px;
 +
    background-color:none;
 +
    padding-right:8px;
 +
    width:150px;
 +
    height:30px;
 +
    position: relative;
 +
    margin-top:5px;
 +
}
  
−
.igem_2018_team_menu .menu_item {
+
.dropdown ul li a{
−
    background-color: #c4baba;
+
    padding:0;
−
    border-bottom: 1px solid #928b8b;
+
    color: #24305E ;
−
    clear: both;
+
    background-color: none;
−
color: #484848;
+
    text-decoration: none;
−
    cursor: pointer;
+
    position: relative;
−
float: left;
+
    display: block;
−
    font-size: 120%;
+
    text-shadow: 1px 1px lightgrey;
−
    font-weight: bold;
+
    transition:0.65s;
−
    padding: 15px 0px 15px 5%;
+
}
−
  width: 100%;
+
.dropdown ul ul li a{
−
}
+
    padding:0;
 +
    background-color: none;
 +
}
  
−
.igem_2018_team_menu .menu_item.direct_link {
+
.dropdown ul ul{
−
color: #484848;
+
    margin:0;
−
padding-left: 15%;
+
    padding:0;
−
}
+
    top:30px;
−
.igem_2018_team_menu .menu_item:hover {
+
list-style: none;
−
background-color: #ecb656;
+
    background-color:white;
−
}
+
    box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 +
    position: absolute;
 +
    display: none;
 +
}
  
  
−
.igem_2018_team_menu .menu_item .submenu_control_icon {
 
−
color: #484848;
 
−
float: left;
 
−
width: 10%;
 
−
}
 
  
−
/* submenu icon "+"  "-"*/
+
.dropdown ul ul a{
−
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
    background-color:none;
−
content: "+";  
+
    width:200px;
−
}
+
    text-align: left;
 +
    margin:0;
 +
    padding-left:2px;
 +
    box-sizing: border-box;
 +
}
 +
ul.sub1 li {
 +
    background-color:none;
 +
    margin-left: 35px;
 +
    width:110px;
 +
}
 +
ul.sub2 li {
 +
    background-color: none;
 +
    margin-left: 5px;
 +
    padding:0;
 +
    width: 180px;
 +
}
  
−
/* submenu icon "+"  "-"*/
+
ul.sub3 li {
−
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
    background-color:none;
−
content: "-";  
+
    margin-left: 40px;
−
}
+
    width:80px;
 +
}
  
−
/*submenu wrapper*/
+
.dropdown ul li a:hover{
−
.igem_2018_team_menu .submenu{
+
    color: #7EF397;
−
background-color: #e4dede;
+
    text-shadow: 1px 1px #D0FADE;
−
clear:both;
+
}
−
display:none;
+
−
float: left; 
+
−
width:100%;
+
−
}
+
  
−
/*styling for a submenu item*/
+
.dropdown ul li ul li a:hover{
−
.igem_2018_team_menu .submenu .submenu_item {
+
    color: rgb(248, 59, 122);
−
border-bottom: 1px solid #c4baba;
+
    text-shadow: lightpink;
−
  color: #635d5d;
+
}
−
    height: 30px;
+
−
  float: left;
+
−
    font-size: 110%;
+
−
font-weight: bold;
+
−
    padding: 12px 0px 0px 15%;
+
−
    width: 100%;
+
−
}
+
  
−
.igem_2018_team_menu .submenu .submenu_item:hover {
+
.dropdown ul li:hover > ul {
−
background-color: #f3bd5d;
+
    display:block;
−
}
+
}
−
 
+
−
 
+
−
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
−
.igem_2018_team_menu .menu_item.current_page,
+
−
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
−
background-color:#7acbd8;
+
−
}
+
  
  
Line 519: Line 545:
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 +
<div class="nav">
 +
                <div class="logo">
 +
                    <a href="#"> <img class="pixcell" src= "logo.jpg" ></a>
 +
                    <a href="#"> <img class="iclogo "src="Logo_for_Imperial_College_London.svg.png" ></a>
 +
                </div>
 +
           
 +
                <div class="dropdown">
 +
                    <ul>
 +
                        <li><a href="#">PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
                        <ul class= "sub1">
 +
                              <li><a href="our project.htm">DESCRIPTION</a>
 +
                              <li><a href="mechanism.htm">MECHANISMS</a>
 +
                                <li><a href="applications.htm">APPLICATIONS</a>
 +
                              <li><a href="achievement.htm">ACHIEVEMENTS</a>
 +
                            <li><a href="brainstorming.htm">BRAINSTORM</a>
 +
                        </ul>
 +
                      </li>
  
 +
                      <li><a href="#">DRY LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
                        <ul class= "sub1">
 +
                                <li><a href="dryover.htm">OVERVIEW</a>
 +
                                <li><a href="modelling.htm">MODELLING</a>
 +
                              <li><a href="hardware.htm">HARDWARE</a>
 +
                          </ul>
 +
                      </li>
 +
                        <li><a href="#">WET LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
                            <ul class= "sub1">
 +
                                    <li><a href="wetover.htm">OVERVIEW</a>
 +
                                  <li><a href="results.htm">RESULTS</a></li>
 +
                                  <li><a href="WetLabExpt.htm">EXPERIMENTS</a></li>
 +
                                  <li><a href="Protocols.html">PROTOCOLS</a></li>
 +
                                <li><a href="parts.htm">PARTS</a></li>
 +
                               
 +
                            </ul>
 +
                            </li>
 +
                   
 +
                        <li><a href="#">HUMAN PRACTICES<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
                            <ul  class= "sub2">
 +
                                <li><a href="HP.htm">OVERVIEW</a></li>
 +
                                <li><a href="IHP.htm">INTEGRATED PRACTICES</a></li>
 +
                                <li><a href="communication.htm">COMMUNICATION</a></li>
 +
                                <li><a href="outreach.htm">OUTREACH</a></li>
 +
                                <li><a href="Collaborations.htm">COLLABORATIONS</a></li>
 +
                                </ul>
 +
                              </li>
 +
                       
 +
                        <li><a href="#">PEOPLE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
                          <ul class= "sub3">
 +
                                <li><a href="Biography.htm">TEAM</a></li>
 +
                                <li><a href="attribution.htm">ATTRIBUTIONS</a></li>
 +
                                <li><a href="sponsor.htm">SPONSORS</a></li>
 +
                              </ul>
 +
                            </li>
 +
                        <li><a href="judges.htm">FOR JUDGES</a></li>
 +
                        <li><a href="journal.htm">JOURNAL</a></li>
 +
                    </ul>
 +
                </div>
 +
              </div>
 +
 
  
  

Revision as of 22:36, 26 August 2018