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

 
(75 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%;
−
height:110px;
+
        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 --->
−
<img src="https://static.igem.org/mediawiki/2017/3/3e/T-SICAU-navigation_background-image.jpg" class="navigationimage" />
+
<div id="float">
 
<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 104: 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/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>
+
−
<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">
+
−
<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/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="#"><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/180px-T-SICAU-hat.jpg.png" alt="practice" class="up-nav-icon" />practice</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" />
−
        <div class="dropdown-content">
+
    Human Practices</div></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>
+
        <li><a href="#"><div>  
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Engagement">Public Engagement </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" />Notebook</div></a>  
−
  <a href="https://2017.igem.org/Team:SiCAU-China/Safety">safety</a></div></li>
+
        <div class="dropdown-content">  
−
 
+
        <a href="https://2017.igem.org/Team:SiCAU-China/Notebook">Notebook</a>
−
    <li><a href="#"><div>
+
        <a href="https://2017.igem.org/Team:SiCAU-China/Experiments">Protocol</a></div></li>
−
<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">
+
−
<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="#"><div>  
 
<li><a href="#"><div>  
Line 147: 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="https://igem.org/2017_Judging_Form?team=SiCAU-China"><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="judging" class="up-nav-icon" />judging</div></a></li>
+
         <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>
+
          Collaborations</div></a>
 
</div>
 
</div>
 +
</div>
 +
</div>
 +
  
−
<script>
+
<script type="text/javascript">
 
window.onload=
 
window.onload=
 
function(){
 
function(){
Line 164: Line 194:
 
{
 
{
 
    var s = document.body.scrollTop || document.documentElement.scrollTop
 
    var s = document.body.scrollTop || document.documentElement.scrollTop
−
    if(s>H) {
+
    if(s>H+90) {
−
        oDiv.style = "position:fixed;top:0;width:100%;"
+
        oDiv.style = "position:fixed;top:-90px;width:100%;z-index:100;"
 
    } else {
 
    } else {
−
        oDiv.style = ""
+
        oDiv.style = " "
 
    }
 
    }
 
     }
 
     }

Latest revision as of 22:54, 1 November 2017