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

 
(129 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; }
  
−
/********************************* MENU ********************************/
+
/********************************* 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;
 +
}
  
−
</style>
+
h2 {
 +
font-size: 30px !important;
 +
}
 +
h3 {
 +
font-size: 25px;
 +
}
 +
h4 {
 +
font-size: 20px;
 +
color: #6cd94e;
 +
}
 +
h5 {
 +
font-size: 18px;
 +
}
  
−
<img src="https://static.igem.org/mediawiki/2016/c/c6/T--CLSB-UK--HeaderPic.png">
+
p {
 +
font-size: 16px !important;
 +
}
  
−
<div class="menu_wrapper" >
+
#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;
 +
}
  
−
<ul id="accordion" class="accordion">
+
#verticalselector li img {
 +
position: relative;
 +
float: left;
 +
padding: 0;
 +
height: 50px;
 +
width: 50px;
 +
margin: 0px;
 +
}
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK">HOME </a> </li>
+
#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;
 +
}
  
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
#verticalselector a:hover > div {
−
<ul class="submenu">
+
display:block;
−
<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>
+
−
                    </ul>
+
−
                </li>
+
  
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
#contentbox {
−
<ul class="submenu">
+
background-color: rgba(235,235,235,0.85);
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Description"> ★  Description </a></li>
+
position: absolute;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Design"> ★ Design </a></li>
+
width: 57vw;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Experiments"> Experiments </a></li>
+
top: 200px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Proof"> ★ Proof of Concept </a></li>
+
left: 40vw;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Demonstrate"> ★ Demonstrate </a></li>
+
border-style: solid;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Results"> Results </a></li>
+
border-width: 0px 2px 0px 0px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Notebook"> Notebook </a></li>
+
padding: 5px;
−
                    </ul>
+
}
−
                </li>
+
  
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
.imagebox {
−
<ul class="submenu">
+
background-color: rgba(200,200,200,0.7);
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Parts">Parts </a></li>
+
border-style: solid;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Basic_Part"> ★ Basic Parts </a></li>
+
border-width: 1px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Composite_Part"> ★ Composite Parts </a></li>
+
padding: 5px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Part_Collection"> ★ Part Collection </a></li>
+
margin: 10px;
−
                    </ul>
+
clear: left;
−
                </li>
+
}
  
 +
.imagebox img {
 +
width: 100%;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
  
−
<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>
+
/********************************* MENU ********************************/
  
 +
#top_header {
 +
position: relative;
 +
height: 164px;
 +
width: 100vw;
 +
background-color: #262626;
 +
}
  
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
#top_action {
−
<ul class="submenu">
+
position: absolute;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Human_Practices"> Human Practices </a></li>
+
left: 50%;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/HP/Silver">★ Silver </a></li>
+
margin-left: -495px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/HP/Gold">★ Gold </a></li>
+
height: 180px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Integrated_Practices"> ★ Integrated Practices </a></li>
+
width: 990px;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Engagement">★ Engagement </a></li>
+
}
−
                    </ul>
+
−
                </li>
+
  
 +
#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;
 +
}
  
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
+
#accordion a
−
<ul class="submenu">
+
{
−
<li><a href="https://2016.igem.org/Team:CLSB-UK/Entrepreneurship"> ★ Entrepreneurship </a></li>
+
display:block;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Hardware"> ★ Hardware </a></li>
+
color:#333;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Software">★ Software </a></li>
+
text-decoration:none;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Measurement">★  Measurement </a></li>
+
font-weight:700;
−
<li> <a href="https://2016.igem.org/Team:CLSB-UK/Model">★ Model </a></li>
+
font-size:12px;
 +
line-height:32px;
 +
padding:0 15px;
 +
font-family: Verdana,Geneva,sans-serif;
 +
}
  
−
                    </ul>
+
#accordion li
−
                </li>
+
{
−
</ul>
+
background-color: #94e295;
 +
position:relative;
 +
float:left;
 +
padding:0;
 +
width: 150px;
 +
margin: 0px 5px;
 +
}
  
−
</div>
+
#accordion li:hover
 +
{
 +
background:#6aa16b;
 +
}
  
−
<script>
+
.submenu
 +
{
 +
list-style:none;
 +
display:none;
 +
position:absolute;
 +
top:100%;
 +
left:0;
 +
background:#fff6ee;
 +
padding:0;
 +
margin:0 !important;
 +
}
  
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
+
.submenu li
 +
{
 +
float:none;
 +
width: 150px;
 +
background-color:#fff6ee !important;
 +
margin: 0px 0px !important;
 +
}
  
−
$(document).ready(function() {
+
.submenu li:hover
 +
{
  
−
$("#HQ_page").attr('id','');
+
background-color:#dcd3cc !important;
−
+
}
  
−
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
+
.submenu a
−
$("#team_name").html( wgPageName );  
+
{
−
}
+
line-height:120%;
 +
padding:10px 15px;
 +
}
  
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name
+
.menu_item:hover > .submenu
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );  
+
{
−
}
+
display:block;
 +
}
  
−
else {
 
−
// this adds the team's name as an h1
 
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 
  
−
// this adds the page's title as an h4
+
</style>
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
−
}
+
  
 +
<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">
  
−
$('#accordion').find('.menu_item').click(function(){
+
<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>
  
−
//Expand or collapse this panel
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Lab"> Lab </a> 
−
submenu = $(this).find('.submenu');
+
<ul class="submenu">
−
submenu.toggle();
+
<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>
  
−
icon = $(this).find('.icon');
+
<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>
  
−
if ( !$( submenu ).is(':visible') ) {
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/Medals"> Judging </a> </li>
−
icon.removeClass("less").addClass("plus");
+
−
}
+
−
else {
+
−
icon.removeClass("plus").addClass("less");
+
−
}
+
  
−
//Hide the other panels
+
                <li class="menu_item"> <a href="https://2016.igem.org/Team:CLSB-UK/People"> People </a>
−
$(".submenu").not(submenu).hide();
+
<ul class="submenu">
−
$(".icon").not(icon).removeClass("less").addClass("plus");
+
<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>
−
$(".collapsable_menu_control").click(function() {
+
                    </ul>
−
$(".menu_item").toggle();
+
                </li>
−
});
+
</ul>
−
 
+
</div>
−
$( window ).resize(function() {
+
</div>
−
$(".menu_item").show();
+
−
});
+
−
 
+
−
});
+
−
 
+
−
</script>
+
  
 
</html>
 
</html>

Latest revision as of 16:50, 19 October 2016