Difference between revisions of "Template:Sicau-china navigation"

Line 33: Line 33:
 
width:100px;
 
width:100px;
 
height:100px;
 
height:100px;
margin-left:0px;
+
margin-left:50px;
top: 10px;
+
top: 4px;
 
}   
 
}   
 
         
 
         
 
.navigation-menu{
 
.navigation-menu{
    width:880px;
+
    width:880px;
height:110px;
+
    height:110px;
margin:0 auto;
+
    margin:0 auto;
 +
    margin-left:220px;
 
}
 
}
 
.navigation-menu a{
 
.navigation-menu a{
    text-decoration:none;
+
    text-decoration:none;
}
+
    }
 
.navigation li{
 
.navigation li{
 
     float:left;
 
     float:left;
list-style:none;
+
    list-style:none;
 
     position:relative;
 
     position:relative;
text-align:center;
+
    text-align:center;
 
     font-size:18px;
 
     font-size:18px;
line-height:20px;
+
    line-height:20px;
font-family:"Comic Sans MS";
+
    font-family:"Comic Sans MS";
 
}
 
}
 
/*defines the style of the drop-down box*/
 
/*defines the style of the drop-down box*/
 
.navigation-menu .dropdown-content {
 
.navigation-menu .dropdown-content {
      display: none;
+
    display: none;
      position: absolute;
+
    position: absolute;
      background-color: #333333;
+
    background-color: #333333;
  width: 100%;
+
    width: 100%;
  min-width: 230px;
+
    min-width: 230px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 4px 5px;
+
    padding: 4px 5px;
  z-index:1;
+
    z-index:1;
 
       }
 
       }
 
.navigation-menu .dropdown-content a {
 
.navigation-menu .dropdown-content a {
Line 80: Line 81:
 
/*defines the style of the top-navgation-icon*/
 
/*defines the style of the top-navgation-icon*/
 
.up-nav-icon {
 
.up-nav-icon {
    width:60px;
+
    width:60px;
height:60px;
+
    height:60px;
margin:0 20px;
+
    margin:0 20px;
 +
    display:block;
 
}                             
 
}                             
 
</style>
 
</style>
Line 88: Line 90:
 
     <!--- THIS IS WHERE THE HTML BEGINS --->
 
     <!--- THIS IS WHERE THE HTML BEGINS --->
 
<div class="navigation">
 
<div class="navigation">
   <div id="team-icon"><a href="#"> <img src="https://static.igem.org/mediawiki/2017/c/cc/T-SICAU-culb%27s_logo.png" alt="club's logo" /> </a></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">
 
   <div class="navigation-menu">
    <li><a href="https://2017.igem.org/Team:SiCAU-China"><div>
 
<img src="#" alt="home" class="up-nav-icon" /><p>home</p></div></a></li>
 
 
 
    <li><a href="#"><div>
 
<img src="#" alt="team" class="up-nav-icon" /><p>team</p></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/Collaborations">Collaborations</a></div></li>
 
 
 
 
     <li><a href="#"><div>  
 
     <li><a href="#"><div>  
<img src="#" alt="project" class="up-nav-icon" /><p>project</p></div></a>
+
<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">
 
         <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/Description">Description</a>  
Line 115: Line 110:
 
   
 
   
 
<li><a href="#"><div>
 
<li><a href="#"><div>
<img src="#" alt="parts" class="up-nav-icon" /><p>parts</p></div></a>
+
<img src="https://static.igem.org/mediawiki/2017/thumb/c/c3/T-SICAU-letter_opener.jpg/180px-T-SICAU-letter_opener.jpg.png" alt="parts" class="up-nav-icon" />parts</div></a>
 
         <div class="dropdown-content">
 
         <div class="dropdown-content">
 
<a href="https://2017.igem.org/Team:SiCAU-China/Parts">Parts</a>  
 
<a href="https://2017.igem.org/Team:SiCAU-China/Parts">Parts</a>  
Line 122: Line 117:
 
  <a href="https://2017.igem.org/Team:SiCAU-China/Part_Collection">Part Collection</a></div></li>
 
  <a href="https://2017.igem.org/Team:SiCAU-China/Part_Collection">Part Collection</a></div></li>
 
   
 
   
    <li><a href="https://2017.igem.org/Team:SiCAU-China/Safety"><div>
 
<img src="#" alt="safety" class="up-nav-icon" /><p>safety</p></div></a></li>
 
 
 
 
     <li><a href="#"><div>  
 
     <li><a href="#"><div>  
<img src="#" alt="practice" class="up-nav-icon" /><p>practice</p></div></a>
+
<img src="https://static.igem.org/mediawiki/2017/thumb/7/77/T-SICAU-hat.jpg/180px-T-SICAU-hat.jpg.png" alt="practice" class="up-nav-icon" />practice</div></a>
 
         <div class="dropdown-content">  
 
         <div class="dropdown-content">  
 
<a href="https://2017.igem.org/Team:SiCAU-China/HP/Silver">Silver HP</a>
 
<a href="https://2017.igem.org/Team:SiCAU-China/HP/Silver">Silver HP</a>
 
<a href="https://2017.igem.org/Team:SiCAU-China/HP/Gold_Integrated">Integrated and Gold</a>
 
<a href="https://2017.igem.org/Team:SiCAU-China/HP/Gold_Integrated">Integrated and Gold</a>
  <a href="https://2017.igem.org/Team:SiCAU-China/Engagement">Public Engagement </a></div></li>
+
  <a href="https://2017.igem.org/Team:SiCAU-China/Engagement">Public Engagement </a>
 
+
  <a href="https://2017.igem.org/Team:SiCAU-China/Safety">safety</a></div></li>
 +
 
 
     <li><a href="#"><div>
 
     <li><a href="#"><div>
<img src="#" alt="awards" class="up-nav-icon" /><p>awards</p></div></a>
+
<img src="https://static.igem.org/mediawiki/2017/thumb/a/ab/T-SICAU-door.jpg/180px-T-SICAU-door.jpg.png" alt="awards" class="up-nav-icon" />awards</div></a>
 
         <div class="dropdown-content">
 
         <div class="dropdown-content">
 
<a href="https://2017.igem.org/Team:SiCAU-China/Applied_Design" target="_blank">Applied Design</a>  
 
<a href="https://2017.igem.org/Team:SiCAU-China/Applied_Design" target="_blank">Applied Design</a>  
Line 143: Line 137:
 
  <a href="https://2017.igem.org/Team:SiCAU-China/Software" target="_blank">Software</a></div></li>
 
  <a href="https://2017.igem.org/Team:SiCAU-China/Software" target="_blank">Software</a></div></li>
 
   
 
   
    <li><a href="https://igem.org/2017_Judging_Form?team=SiCAU-China"><div> <img src="#" alt="judging" class="up-nav-icon" />
+
<li><a href="#"><div>
          <p>judging</p></div></a></li>
+
<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/Collaborations">Collaborations</a></div></li>
 +
 
 +
        <li><a href="https://igem.org/2017_Judging_Form?team=SiCAU-China"><div>  
 +
        <img src="https://static.igem.org/mediawiki/2017/thumb/a/a6/T-SICAU-pipe.jpg/180px-T-SICAU-pipe.jpg.png" alt="judging" class="up-nav-icon" />judging</div></a></li>
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
 +
<script>
 +
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) {
 +
        oDiv.style = "position:fixed;top:0;width:100%;"
 +
    } else {
 +
        oDiv.style = ""
 +
    }
 +
    }
 +
}
 +
</script>
 +
 
</html>
 
</html>

Revision as of 14:46, 8 October 2017