View source for Template:Sicau-china navigation

<html>

<style>
/********************************** DEFAULT WIKI SETTINGS  *********************************/
#top_menu_inside #bars_item {
  position: absolute;
  top: -30px !important;
  left: -100px !important;
  z-index: -1 !important;
  cursor: pointer;
  }
#sideMenu,#top_title {
  display: none;
  }
#content {
  padding: 0px;
  width: 100%;
  margin-left:0px;
  margin-top:-7px;
  }
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

/*defines the father box of the navigation bar*/

.navigation {
	width:100%;
        background:url(https://static.igem.org/mediawiki/2017/3/3e/T-SICAU-navigation_background-image.jpg);
        height:150px;
	position:relative;						 	
	z-index:99;					
	} 	
	/*defines the style of the team's icon*/	 
#team-icon img{
    position:absolute;
    width:130px;
    height:130px;
    margin-left:50px;
    top: 20px;
    }   
	           	
.navigation-menu{
    width:800px;
    height:110px;
    float:right;
    }
.navigation-menu a{
    text-decoration:none;
    color:#FFFFFF;
    }					
.navigation li{
    float:left;
    list-style:none;
    position:relative;
    text-align:center;
    font-size:18px;
    line-height:20px;
    font-family:"Comic Sans MS";
    }
/*defines the style of the drop-down box*/
.navigation-menu .dropdown-content {
     display: none;
     position: absolute;
     background-color: #333333;
     width: 100%;
     min-width: 230px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     padding: 4px 5px;
     z-index:1;
      }
.navigation-menu .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	background-color:#FFFFFF;
	text-align:center;
    }
.navigation-menu .dropdown-content a:hover {background-color: #f1f1f1}	
.navigation-menu li:hover .dropdown-content{
      display: block;
      }

/*defines the style of the top-navgation-icon*/
.up-nav-icon {	
    width:90px;
    height:90px;
    margin:20px 20px 0;
    display:block;
	 }
.collapsable_menu_control { 
		width:100%; 
		padding: 15px 0px;
		display:none; 
 		background-color:#000000; 
		text-align:center;  
		font-weight:bold; 
		color:#72c9b6;
		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; 
	}
.collapsable_menu_control:hover { 
		background-color: #72c9b6;
		color:#000000;
        .navigation-menu{display:biock} 
	}
        /* IF THE SCREEN IS LESS THAN 1000PX */
        @media only screen and (max-width: 1000px){
    .navigation {height:110px;}
    #team-icon img{width:105px;height:105px;top:8px;}
    .up-nav-icon {width:75px;height:75px;margin-top:10px;}
    .navigation-menu{width:700px;height:90px;}
    .navigation li{font-size:14px;}
    .navigation-menu .dropdown-content {min-width: 150px;}
    }  
	/* IF THE SCREEN IS LESS THAN 830PX */   
	@media only screen and (max-width: 830px) { 
    .navigation {height:90px;}
    #team-icon img{width:85px;height:85px;top:4px;}
    .up-nav-icon {width:50px;height:50px;margin-top:5px;}
    .navigation-menu{width:550px;height:70px;}
    .navigation li{font-size:10px;}
    .navigation-menu .dropdown-content {min-width: 100px;} 
    } 

	/* IF THE SCREEN IS LESS THAN 680PX */

	@media only screen and (max-width: 680px) {
    .collapsable_menu_control{display:block}
    .up-nav-icon {display:none}
    .navigation{ width:100%; height: 15%; position:relative;}
    #team-icon img{width:40px;height:40px;top:2px;}

     }     				  
</style>

    <!--- THIS IS WHERE THE HTML BEGINS --->
<div id="float">
<div class="navigation">
<div class="collapsable_menu_control"> MENU ▤ </div>
  <div id="team-icon"><a href="https://2017.igem.org/Team:SiCAU-China"> <img src="https://static.igem.org/mediawiki/2017/2/2c/T-SICAU-Sherlock_E.coli.jpg" alt="club's logo" /> </a></div>
  <div class="navigation-menu">


	
		
    <li><a href="#"><div> 
	<img src="https://static.igem.org/mediawiki/2017/thumb/5/5b/T-SICAU-magnifier.jpg/180px-T-SICAU-magnifier.jpg.png" alt="project" class="up-nav-icon" />project</div></a>
        <div class="dropdown-content">
		 <a href="https://2017.igem.org/Team:SiCAU-China/Description">Description</a> 
		  <a href="https://2017.igem.org/Team:SiCAU-China/Results">Results</a> 
                  <a href="https://2017.igem.org/Team:SiCAU-China/Contribution">Contribution</a>  
		  
	<li><a href="https://2017.igem.org/Team:SiCAU-China/Model"><div>
	<img src="https://static.igem.org/mediawiki/2017/thumb/c/c3/T-SICAU-letter_opener.jpg/180px-T-SICAU-letter_opener.jpg.png" alt="Model" class="up-nav-icon" />
        Model</div></a>
	
    <li><a href="https://2017.igem.org/Team:SiCAU-China/HP/Gold_Integrated"><div> 
	<img src="https://static.igem.org/mediawiki/2017/thumb/7/77/T-SICAU-hat.jpg/105px-T-SICAU-hat.jpg.png" alt="practice" class="up-nav-icon" />
    Human Practices</div></a> 

         <li><a href="#"><div> 
         <img src="https://static.igem.org/mediawiki/2017/thumb/a/ab/T-SICAU-door.jpg/180px-T-SICAU-door.jpg.png" alt="Notebook" class="up-nav-icon" />Notebook</div></a> 
         <div class="dropdown-content"> 
         <a href="https://2017.igem.org/Team:SiCAU-China/Notebook">Notebook</a>
         <a href="https://2017.igem.org/Team:SiCAU-China/Experiments">Protocol</a></div></li>
		  
	 <li><a href="#"><div> 
	 <img src="https://static.igem.org/mediawiki/2017/thumb/7/7f/T-SICAU-team.jpg/120px-T-SICAU-team.jpg.png" alt="team" class="up-nav-icon" />team</div></a>
        <div class="dropdown-content"> 
		<a href="https://2017.igem.org/Team:SiCAU-China/Team">Team</a> 
		<a href="https://2017.igem.org/Team:SiCAU-China/Attributions">Attributions </a>
                <a href="https://2017.igem.org/Team:SiCAU-China/gally">Gallery</a></div></li>
		  
         <li><a href="https://2017.igem.org/Team:SiCAU-China/Collaborations"><div> 
         <img src="https://static.igem.org/mediawiki/2017/thumb/a/a6/T-SICAU-pipe.jpg/180px-T-SICAU-pipe.jpg.png" alt="Collaborations" class="up-nav-icon" />
          Collaborations</div></a>
</div>
</div>
</div>


<script type="text/javascript">
window.onload=
function(){
    var oDiv = document.getElementById("float"),
	H = 0,
	Y = oDiv
	while (Y) {H += Y.offsetTop; Y = Y.offsetParent}
	window.onscroll = function()
	{
	    var s = document.body.scrollTop || document.documentElement.scrollTop
	    if(s>H+90) {
	        oDiv.style = "position:fixed;top:-90px;width:100%;z-index:100;"
	    } else {
	        oDiv.style = " "
	    }
    }	
}
</script>

</html>