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

 
(81 intermediate revisions by 3 users not shown)
Line 10: Line 10:
 
   cursor: pointer;
 
   cursor: pointer;
 
   }
 
   }
−
#sideMenu,
+
#sideMenu,#top_title {
−
#top_title {
+
 
   display: none;
 
   display: none;
 
   }
 
   }
Line 18: Line 17:
 
   width: 100%;
 
   width: 100%;
 
   margin-left:0px;
 
   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*/
 
/*defines the father box of the navigation bar*/
 +
 
.navigation {
 
.navigation {
 
width:100%;
 
width:100%;
−
height:110px;
+
        background:url(https://static.igem.org/mediawiki/2017/3/3e/T-SICAU-navigation_background-image.jpg);
−
position:relative;
+
        height:150px;
−
background-color:#333333;
+
position:relative;
−
+
z-index:99;
 
}
 
}
 
/*defines the style of the team's icon*/  
 
/*defines the style of the team's icon*/  
 
#team-icon img{
 
#team-icon img{
−
position:absolute;
+
    position:absolute;
−
width:100px;
+
    width:130px;
−
height:100px;
+
    height:130px;
−
margin-left:0px;
+
    margin-left:50px;
−
top: 10px;
+
    top: 20px;
−
}   
+
    }   
 
         
 
         
 
.navigation-menu{
 
.navigation-menu{
−
    width:880px;
+
    width:800px;
−
height:110px;
+
    height:110px;
−
margin:0 auto;
+
    float:right;
−
}
+
    }
 
.navigation-menu a{
 
.navigation-menu a{
−
    text-decoration:none;
+
    text-decoration:none;
−
}
+
    color:#FFFFFF;
 +
    }
 
.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 79: Line 83:
 
/*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:90px;
−
height:60px;
+
    height:90px;
−
margin:0 20px;
+
    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>
 
</style>
  
 
     <!--- THIS IS WHERE THE HTML BEGINS --->
 
     <!--- THIS IS WHERE THE HTML BEGINS --->
 +
<div id="float">
 
<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 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">
 
   <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>  
−
<a href="https://2017.igem.org/Team:SiCAU-China/Design">Design</a>
 
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Experiments">Experiments</a>
 
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Notebook">Notebook</a>
 
−
  <a href="https://2017.igem.org/Team:SiCAU-China/InterLab">InterLab</a>
 
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Contribution">Contribution</a>
 
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Model">Model</a>
 
 
  <a href="https://2017.igem.org/Team:SiCAU-China/Results">Results</a>  
 
  <a href="https://2017.igem.org/Team:SiCAU-China/Results">Results</a>  
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Demonstrate">Demonstrate</a>  
+
                  <a href="https://2017.igem.org/Team:SiCAU-China/Contribution">Contribution</a>
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Improve">Improve</a>
+
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Attributions">Attributions </a></div></li>
+
 
   
 
   
−
<li><a href="#"><div>
+
<li><a href="https://2017.igem.org/Team:SiCAU-China/Model"><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="Model" class="up-nav-icon" />
−
        <div class="dropdown-content">
+
        Model</div></a>
−
<a href="https://2017.igem.org/Team:SiCAU-China/Parts">Parts</a>  
+
−
<a href="https://2017.igem.org/Team:SiCAU-China/Basic_Part">Basic Parts</a>
+
−
<a href="https://2017.igem.org/Team:SiCAU-China/Composite_Part">Composite Parts</a>
+
−
  <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="https://2017.igem.org/Team:SiCAU-China/HP/Gold_Integrated"><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/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">  
 
         <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/Team">Team</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/Attributions">Attributions </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/gally">Gallery</a></div></li>
 
   
 
   
−
    <li><a href="#"><div>
+
        <li><a href="https://2017.igem.org/Team:SiCAU-China/Collaborations"><div>  
−
<img src="#" alt="awards" class="up-nav-icon" /><p>awards</p></div></a>
+
        <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" />
−
        <div class="dropdown-content">
+
           Collaborations</div></a>
−
<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/Entrepreneurship" target="_blank">Entrepeneurship</a>
+
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Hardware" target="_blank">Hardware</a>
+
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Measurement" target="_blank">Measurement</a>
+
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Model" target="_blank">Model</a>
+
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Plant" target="_blank">Plant</a>
+
−
  <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" />
+
−
           <p>judging</p></div></a></li>
+
−
  </div>
+
 
</div>
 
</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>
 
</html>

Latest revision as of 22:54, 1 November 2017