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

 
(68 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*/
−
.navigationimage {
+
 
−
    position:absolute;
+
−
    width:100%;
+
−
    height:110px;
+
−
    z-index:1;
+
−
    }
+
 
.navigation {
 
.navigation {
 
width:100%;
 
width:100%;
−
 
+
        background:url(https://static.igem.org/mediawiki/2017/3/3e/T-SICAU-navigation_background-image.jpg);
 +
        height:150px;
 
position:relative;
 
position:relative;
 
z-index:99;
 
z-index:99;
Line 36: Line 33:
 
#team-icon img{
 
#team-icon img{
 
     position:absolute;
 
     position:absolute;
−
     width:100px;
+
     width:130px;
−
     height:100px;
+
     height:130px;
 
     margin-left:50px;
 
     margin-left:50px;
−
     top: 4px;
+
     top: 20px;
 
     }   
 
     }   
 
         
 
         
 
.navigation-menu{
 
.navigation-menu{
−
     width:620px;
+
     width:800px;
 
     height:110px;
 
     height:110px;
 
     float:right;
 
     float:right;
Line 86: 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;
 
     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 id="float">
−
<img src="https://static.igem.org/mediawiki/2017/e/ed/T-SICAU-navigation_background-image2.png" class="navigationimage" />
 
 
<div class="navigation">
 
<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 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">
 +
 +
 
 
 
 
Line 105: Line 152:
 
         <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/Results">Results</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>   
 
                   <a href="https://2017.igem.org/Team:SiCAU-China/Contribution">Contribution</a>   
 
   
 
   
−
<li><a href="#"><div>
+
<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" />
 
<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" />
−
         <a href="https://2017.igem.org/Team:SiCAU-China/Model">Model</a></div></a>
+
         Model</div></a>
 
 
−
     <li><a href="#"><div>  
+
     <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" />
 
<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" />
−
<a href="https://2017.igem.org/Team:SiCAU-China/HP/Silver">practice</a></div></a>  
+
    Human Practices</div></a>  
−
               
+
 
−
 
+
        <li><a href="#"><div>  
−
    <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>
−
<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" />
+
        <div class="dropdown-content">  
−
         <a href="https://2017.igem.org/Team:SiCAU-China/Notebook">Notebook</a></div></a>  
+
         <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>  
 
<li><a href="#"><div>  
Line 126: Line 173:
 
         <div class="dropdown-content">  
 
         <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/Team">Team</a>  
−
<a href="https://2017.igem.org/Team:SiCAU-China/Collaborations">Collaborations</a></div></li>
+
<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="#"><div>  
+
         <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="Attributions" class="up-nav-icon" />
+
         <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" />
−
           <a href="https://2017.igem.org/Team:SiCAU-China/Attributions">Attributions </a></div></a>
+
           Collaborations</div></a>
 
</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