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

Line 87: Line 87:
 
     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 */
 
         /* IF THE SCREEN IS LESS THAN 1000PX */
 
         @media only screen and (max-width: 1000px){
 
         @media only screen and (max-width: 1000px){
Line 104: Line 124:
 
     .navigation li{font-size:10px;}
 
     .navigation li{font-size:10px;}
 
     .navigation-menu .dropdown-content {min-width: 100px;}  
 
     .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>
  
Line 110: Line 140:
 
<div id="float">
 
<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">
 +
 +
 
 
 
 

Revision as of 16:02, 22 October 2017