Difference between revisions of "Team:CLSB-UK/Templates/NavBar"

 
(119 intermediate revisions by 2 users not shown)
Line 6: Line 6:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; margin-top:-7px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
/********************************* MAIN BODY  ********************************/
 +
#content { background-color: transparent !important }
 +
body { font-family: Verdana,Geneva,sans-serif !important; line-height: normal; }
 +
#mainbox {
 +
background-color: rgba(235,235,235,0.85);
 +
position: absolute;
 +
width: 25vw;
 +
top: 200px;
 +
left: 3vw;
 +
border-style: solid;
 +
border-width: 0px 0px 0px 2px;
 +
padding: 5px;
 +
}
 +
 +
h2 {
 +
font-size: 30px !important;
 +
}
 +
h3 {
 +
font-size: 25px;
 +
}
 +
h4 {
 +
font-size: 20px;
 +
color: #6cd94e;
 +
}
 +
h5 {
 +
font-size: 18px;
 +
}
 +
 +
p {
 +
font-size: 16px !important;
 +
}
 +
 +
#verticalselector {
 +
position: absolute;
 +
left: 28vw;
 +
top: 200px;
 +
list-style:none;
 +
margin: 0 0 0 10px;
 +
padding:0;
 +
z-index: 500;
 +
}
 +
 +
#verticalselector li {
 +
position: relative;
 +
float: top;
 +
padding: 0;
 +
height: 50px;
 +
margin: 0px 0px;
 +
}
 +
 +
#verticalselector li img {
 +
position: relative;
 +
float: left;
 +
padding: 0;
 +
height: 50px;
 +
width: 50px;
 +
margin: 0px;
 +
}
 +
 +
#verticalselector li div {
 +
position: absolute;
 +
left: 50px;
 +
display: none;
 +
padding: 7px;
 +
height: 36px;
 +
margin: 0px;
 +
font-family: "Quicksand", Helvetica, sans;
 +
font-size: 30px;
 +
}
 +
 +
#verticalselector li a {
 +
color: #ffffff;
 +
}
 +
 +
#verticalselector a:hover > div {
 +
display:block;
 +
}
 +
 +
#contentbox {
 +
background-color: rgba(235,235,235,0.85);
 +
position: absolute;
 +
width: 57vw;
 +
top: 200px;
 +
left: 40vw;
 +
border-style: solid;
 +
border-width: 0px 2px 0px 0px;
 +
padding: 5px;
 +
}
 +
 +
.imagebox {
 +
background-color: rgba(200,200,200,0.7);
 +
border-style: solid;
 +
border-width: 1px;
 +
padding: 5px;
 +
margin: 10px;
 +
clear: left;
 +
}
 +
 +
.imagebox img {
 +
width: 100%;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 +
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
  
 
#top_header {
 
#top_header {
−
background-color: #fff6ee;
 
 
position: relative;
 
position: relative;
 +
height: 164px;
 +
width: 100vw;
 +
background-color: #262626;
 +
}
 +
 +
#top_action {
 +
position: absolute;
 +
left: 50%;
 +
margin-left: -495px;
 +
height: 180px;
 +
width: 990px;
 
}
 
}
  
Line 23: Line 140:
 
margin:0;
 
margin:0;
 
padding:0;
 
padding:0;
−
left: 0px;
+
left: 50%;
−
top: 0px;
+
margin-left: -400px; /* half of the width - change if menu changes */
 +
top: 147px;
 
z-index: 1000;
 
z-index: 1000;
−
background-color: #92AD40;
 
−
padding: 5px;
 
 
color: #FFFFFF;
 
color: #FFFFFF;
 
font-weight: bold;
 
font-weight: bold;
 
}
 
}
  
−
#accordion ul a
+
#accordion a
 
{
 
{
 
display:block;
 
display:block;
Line 41: Line 157:
 
line-height:32px;
 
line-height:32px;
 
padding:0 15px;
 
padding:0 15px;
−
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
+
font-family: Verdana,Geneva,sans-serif;  
 
}
 
}
  
−
#accordion ul li
+
#accordion li
 
{
 
{
 +
background-color: #94e295;
 
position:relative;
 
position:relative;
 
float:left;
 
float:left;
−
margin:0;
 
 
padding:0;
 
padding:0;
 +
width: 150px;
 +
margin: 0px 5px;
 
}
 
}
  
−
#accordion ul li:hover
+
#accordion li:hover
 
{
 
{
−
background:#f6f6f6;
+
background:#6aa16b;
 
}
 
}
  
 
.submenu
 
.submenu
 
{
 
{
 +
list-style:none;
 
display:none;
 
display:none;
 
position:absolute;
 
position:absolute;
 
top:100%;
 
top:100%;
 
left:0;
 
left:0;
−
background:#fff;
+
background:#fff6ee;
 
padding:0;
 
padding:0;
 +
margin:0 !important;
 
}
 
}
  
Line 70: Line 190:
 
{
 
{
 
float:none;
 
float:none;
−
width:200px;
+
width: 150px;
 +
background-color:#fff6ee !important;
 +
margin: 0px 0px !important;
 +
}
 +
 
 +
.submenu li:hover
 +
{
 +
 
 +
background-color:#dcd3cc !important;
 
}
 
}
  
Line 79: Line 207:
 
}
 
}
  
−
#accordian ul li:hover > ul
+
.menu_item:hover > .submenu
 
{
 
{
 
display:block;
 
display:block;
Line 88: Line 216:
  
 
<div id="top_header">
 
<div id="top_header">
 +
<div id="top_action">
  
−
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--CLSB-UK--HeaderPic.png">
+
<a href="https://2016.igem.org/Team:CLSB-UK"> <img src="https://static.igem.org/mediawiki/2016/5/5b/T--CLSB-UK--header2.png"> </a>
  
 
<ul id="accordion" class="accordion">
 
<ul id="accordion" class="accordion">
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK"> HOME </a> </li>
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Description"> Project </a>
−
 
+
−
 
+
−
<li class="menu_item"> <div class="icon plus"></div> <a> TEAM </a>
+
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href=" https://2016.igem.org/Team:CLSB-UK/Team"> Team   </a> </li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Project/BPV_Cell"> Fuel Cell </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Collaborations">★  Collaborations </a> </li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Project/Synechocystis"> Synechocystis </a></li>
 +
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Project/Future"> Future Research </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> <a> PROJECT </a>   
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Lab"> Lab </a>   
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Description"> ★  Description </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Strategy"> Strategy </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Design"> ★ Design </a></li>
+
 
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Experiments"> Experiments </a></li>
 
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Experiments"> Experiments </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Proof"> ★ Proof of Concept </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Notebook"> Notebook </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Demonstrate"> ★ Demonstrate </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Parts"> Parts </a></li>
 +
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Proof"> Proof of Concept </a></li>
 
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Results"> Results </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Notebook"> Notebook </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Demonstrate"> Demonstrate </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> <a> PARTS </a>
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/HP"> Human Practices </a>  
−
<ul class="submenu">
+
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Parts">Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Basic_Part"> ★ Basic Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Composite_Part"> ★ Composite Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Part_Collection"> ★ Part Collection </a></li>
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
 
+
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Safety"> SAFETY </a> </li>
+
−
 
+
−
 
+
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Attributions">★  ATTRIBUTIONS </a></li>
+
−
 
+
−
 
+
−
<li class="menu_item"> <div class="icon plus"></div> <a> HUMAN PRACTICES </a>  
+
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Human_Practices"> Human Practices </a></li>
 
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Human_Practices"> Human Practices </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/HP/Silver">★ Silver </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Engagement"> Engagement </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/HP/Gold">★ Gold </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Safety"> Safety </a> </li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Integrated_Practices"> ★ Integrated Practices </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/HP/Silver"> Silver Medal </a> </li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Engagement">★ Engagement </a></li>
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
 +
                <li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Medals"> Judging </a> </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> <a> AWARDS </a>  
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/People"> People </a>
 
<ul class="submenu">
 
<ul class="submenu">
−
<li><a href="https://2016.igem.org/Team:CLSB-UK/Entrepreneurship"> ★ Entrepreneurship </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Team"> Team </a> </li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Hardware"> ★ Hardware </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Collaborations"> Collaborations </a> </li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Software">★ Software </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Attributions"> Attributions </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Measurement">★  Measurement </a></li>
+
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Sponsors"> Sponsors </a></li>
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Model">★ Model </a></li>
+
−
 
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 
</ul>
 
</ul>
−
 
+
</div>
 
</div>
 
</div>
  
 
</html>
 
</html>

Latest revision as of 16:50, 19 October 2016