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

 
(133 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--CLSB-UK--HeaderPic.png">
+
<style>
 +
 
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
 
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#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 ********************************/
 +
 
 +
#top_header {
 +
position: relative;
 +
height: 164px;
 +
width: 100vw;
 +
background-color: #262626;
 +
}
 +
 
 +
#top_action {
 +
position: absolute;
 +
left: 50%;
 +
margin-left: -495px;
 +
height: 180px;
 +
width: 990px;
 +
}
 +
 
 +
#accordion {
 +
float: left;
 +
position: absolute;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
left: 50%;
 +
margin-left: -400px; /* half of the width - change if menu changes */
 +
top: 147px;
 +
z-index: 1000;
 +
color: #FFFFFF;
 +
font-weight: bold;
 +
}
 +
 
 +
#accordion a
 +
{
 +
display:block;
 +
color:#333;
 +
text-decoration:none;
 +
font-weight:700;
 +
font-size:12px;
 +
line-height:32px;
 +
padding:0 15px;
 +
font-family: Verdana,Geneva,sans-serif;
 +
}
 +
 
 +
#accordion li
 +
{
 +
background-color: #94e295;
 +
position:relative;
 +
float:left;
 +
padding:0;
 +
width: 150px;
 +
margin: 0px 5px;
 +
}
 +
 
 +
#accordion li:hover
 +
{
 +
background:#6aa16b;
 +
}
 +
 
 +
.submenu
 +
{
 +
list-style:none;
 +
display:none;
 +
position:absolute;
 +
top:100%;
 +
left:0;
 +
background:#fff6ee;
 +
padding:0;
 +
margin:0 !important;
 +
}
 +
 
 +
.submenu li
 +
{
 +
float:none;
 +
width: 150px;
 +
background-color:#fff6ee !important;
 +
margin: 0px 0px !important;
 +
}
 +
 
 +
.submenu li:hover
 +
{
 +
 
 +
background-color:#dcd3cc !important;
 +
}
 +
 
 +
.submenu a
 +
{
 +
line-height:120%;
 +
padding:10px 15px;
 +
}
 +
 
 +
.menu_item:hover > .submenu
 +
{
 +
display:block;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
<div id="top_header">
 +
<div id="top_action">
 +
 
 +
<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">
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Description"> Project </a> 
 +
<ul class="submenu">
 +
<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/Project/Synechocystis"> Synechocystis </a></li>
 +
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Project/Future"> Future Research </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Lab"> Lab </a> 
 +
<ul class="submenu">
 +
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Strategy"> Strategy </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/Notebook"> Notebook </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/Demonstrate"> Demonstrate </a></li>
 +
                    </ul>
 +
                </li>
 +
 
 +
<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/Human_Practices"> Human Practices </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/Safety"> Safety </a> </li>
 +
<li> <a href="https://2016.igem.org/Team:CLSB-UK/HP/Silver"> Silver Medal </a> </li>
 +
                    </ul>
 +
                </li>
 +
 
 +
                <li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Medals"> Judging </a> </li>
 +
 
 +
                <li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/People"> People </a>
 +
<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/Collaborations"> Collaborations </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/Sponsors"> Sponsors </a></li>
 +
                    </ul>
 +
                </li>
 +
</ul>
 +
</div>
 +
</div>
  
 
</html>
 
</html>

Latest revision as of 16:50, 19 October 2016