Difference between revisions of "Template:Team:NCTU Formosa"

 
(208 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/b/bf/NCTU_icon.png" type="image/x-icon">
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
 
−
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
+
 
 +
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  
 
     <style type="text/css">
 
     <style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 +
 
     *{
 
     *{
 
       font-family:"Open Sans",serif,sans-serif
 
       font-family:"Open Sans",serif,sans-serif
Line 14: Line 22:
 
         margin:0;
 
         margin:0;
 
     }
 
     }
 +
 +
 
      
 
      
 
     .main-container{
 
     .main-container{
−
                     background:none;
+
                     background:#E8E3E8;
 
                     position:fixed;
 
                     position:fixed;
 
                     width:100vw;
 
                     width:100vw;
−
                     height:10vh;
+
                     height:auto;
 +
                    z-index:999;
 
                     }
 
                     }
 +
 +
 +
    .dropbtn{
 +
                  margin-top:5px;
 +
}
 +
 +
 
      
 
      
−
     .NCTU_Formosa{
+
     .dropbtn span:after{
−
                  position:relative;
+
width: 0;
−
                  width:50px;
+
height: 0;
−
                  height:50px;
+
border: 0.313em solid transparent;  
−
                  overflow:visible;
+
border-bottom: none;
−
                  top:1vw;
+
border-top-color:black;
−
                  left:5vw;
+
content: '';
−
                  }
+
vertical-align: middle;
−
    .main-menu{
+
display: inline-block;
−
      position:relative;
+
position: relative;
−
      list-style-type: none !important;
+
right: -0.313em; /* 5 */
−
      margin:1px;
+
                text-decoration:none !important;
−
      padding:10px !important;
+
                list-style-type:none !important;            
−
      display:block;
+
              }
−
      float:right;
+
 
−
      font-size:12pt;
+
  .dropdown{
−
font-family:"Open Sans",serif,sans-serif
+
−
      }
+
−
@media screen and (min-width: 768px) {
+
−
    .container{
+
−
            display:none;
+
−
    }
+
−
   
+
−
    span:after
+
−
{
+
−
width: 0;
+
−
height: 0;
+
−
border: 0.313em solid transparent;  
+
−
border-bottom: none;
+
−
border-top-color:black;
+
−
content: '';
+
−
vertical-align: middle;
+
−
display: inline-block;
+
−
position: relative;
+
−
right: -0.313em; /* 5 */
+
−
                                list-style-type: none !important;
+
−
                                text-decoration:none !important;
+
−
}
+
−
 
+
−
    li{
+
 
       float:left;
 
       float:left;
−
      margin-left:5px;
 
 
       text-decoration:none !important;
 
       text-decoration:none !important;
 +
      list-style-type:none !important;
 
       }
 
       }
 
     ul>.dropdown>a{
 
     ul>.dropdown>a{
Line 70: Line 64:
 
                 list-style-type:none !important;
 
                 list-style-type:none !important;
 
                 text-decoration:none !important;
 
                 text-decoration:none !important;
 +
                text-align:left;
 
               }
 
               }
 
     li .dropdown{
 
     li .dropdown{
Line 79: Line 74:
 
                       text-align: center;
 
                       text-align: center;
 
                       text-color:black;
 
                       text-color:black;
−
                       padding: 10px 10px;
+
                       padding-right: 10px;
 +
                      margin-right:10px;
 
                       text-decoration:none !important;     
 
                       text-decoration:none !important;     
 
                     }
 
                     }
 +
 +
.main-menu{
 +
      position:relative;
 +
      list-style-type: none !important;
 +
      margin-right:1px;
 +
      display:block;
 +
      float:right !important;
 +
      font-weight:400 !important;
 +
      font-size:15px;
 +
      font-family:"Open Sans",serif,sans-serif;
 +
      }
  
 
                 /*下拉式menu*/
 
                 /*下拉式menu*/
Line 91: Line 98:
 
     .dropdown-content{  
 
     .dropdown-content{  
 
                       display:none;
 
                       display:none;
−
                       background:white;
+
                       background:#E8E3E8;
 
                       position:absolute;
 
                       position:absolute;
−
                       width:auto;
+
                       width:auto !important;
 
                        
 
                        
 
                     }
 
                     }
 
     .dropdown-content a{
 
     .dropdown-content a{
 
                         color: black;
 
                         color: black;
−
                         padding:10px;
+
                         padding:15px;
 
                         text-decoration: none;
 
                         text-decoration: none;
 
                         display: block;
 
                         display: block;
−
                         text-align:left;
+
                         text-align:left !important;
 
                         size:1em;
 
                         size:1em;
 
                         }
 
                         }
Line 111: Line 118:
 
      
 
      
 
      
 
      
−
} 
 
−
 
−
 
−
    /*screen change*/
 
−
   
 
−
@media screen and (max-width: 768px) {
 
−
    /*menu icon*/
 
 
   
 
   
−
   
 
−
    .bar1, .bar2, .bar3 {
 
−
    width: 35px;
 
−
    height: 5px;
 
−
    background-color: #333;
 
−
    margin: 6px 0 0 6px;
 
−
    transition: 0.4s;
 
−
    }
 
  
−
    .change .bar1 {
 
−
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
 
−
    transform: rotate(-45deg) translate(-9px, 6px) ;
 
−
    }
 
  
−
    .change .bar2 {opacity: 0;}
 
−
 
−
    .change .bar3 {
 
−
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
 
−
    transform: rotate(45deg) translate(-8px, -8px) ;
 
−
    }
 
  
 
/*manu*/
 
/*manu*/
 +
@media screen and (min-width: 768px) {
 
.main-container{
 
.main-container{
 
                     background:white !important;
 
                     background:white !important;
 
                     position:fixed;
 
                     position:fixed;
 
                     width:100vw;
 
                     width:100vw;
−
                     height:8vh;
+
                     height:10.5vh;
 
                     display:block important;  
 
                     display:block important;  
 
                     }
 
                     }
−
span:after
+
  .NCTU_Formosa{
 +
                left:1.5vw;
 +
                position:relative;
 +
                top:25px;
 +
}
 +
}
 +
@media screen and (orientation: portrait) {
 +
  .main-container{
 +
                    background:white !important;
 +
                    position:fixed;
 +
                    width:100vw;
 +
                    height:4vh;
 +
                    display:block important;
 +
                    }
 +
  .NCTU_Formosa{
 +
                left:1.5vw;
 +
                position:relative;
 +
                top:35px;
 +
}
 +
}
 +
 
 +
.menu_sign:after
 
{
 
{
 
width: 0;
 
width: 0;
Line 162: Line 166:
 
                                  
 
                                  
 
}
 
}
−
.main-menu{
+
 
−
      display:none;
+
−
      }
+
 
.active_menu{display:none;}
 
.active_menu{display:none;}
 
      
 
      
Line 172: Line 174:
 
                 list-style-type: none !important;
 
                 list-style-type: none !important;
 
                 text-decoration: none;
 
                 text-decoration: none;
−
               
 
 
               }
 
               }
 
     .dropdown{
 
     .dropdown{
Line 179: Line 180:
 
                 text-align:center;
 
                 text-align:center;
 
                 list-style-type: none !important;
 
                 list-style-type: none !important;
−
                 text-decoration: none;
+
                 text-decoration: none !important;
 +
                font-family:"Open Sans",serif,sans-serif;
 
                 }
 
                 }
 
                  
 
                  
Line 186: Line 188:
 
                       text-align: center !important;
 
                       text-align: center !important;
 
                       text-color:black !important;
 
                       text-color:black !important;
−
                       padding: 14px 16px !important;
+
                       padding: 12px 12px !important;
 
                       text-decoration:none !important;     
 
                       text-decoration:none !important;     
 
                     }
 
                     }
Line 206: Line 208:
 
     .dropdown-content a{
 
     .dropdown-content a{
 
                         color: black;
 
                         color: black;
−
                         padding:5px;
+
                         padding-top:5px;        
 
                         text-decoration: none;
 
                         text-decoration: none;
 
                         text-align:center;
 
                         text-align:center;
−
                         size:1em;
+
                         size:1.3em;
 +
                       
 
                         }
 
                         }
  
Line 216: Line 219:
 
                               color:red;
 
                               color:red;
 
                               }
 
                               }
−
   
+
 
−
                   
+
 
}
 
}
 +
 
     </style>
 
     </style>
 
      
 
      
Line 228: Line 231:
 
   
 
   
 
         <!--隊徽-->
 
         <!--隊徽-->
−
   <!--<img src="NCTU.png" class="NCTU_Formosa"></img>-->
+
   <a href="https://2016.igem.org/Team:NCTU_Formosa">
−
        <!--下拉選單-->
+
<img src="https://static.igem.org/mediawiki/2016/4/40/2016NCTU_FORMOSA_YA.png" class="NCTU_Formosa" width="10%">
−
<div class="container" id="icon_menu"  onclick="myFunction(this)"onclick="Function(this)">
+
</a>
−
  <div class="bar1"></div>
+
 
−
  <div class="bar2"></div>
+
     <ul class="main-menu" id="menu"  style="list-style-image: none;">
−
  <div class="bar3"></div>
+
         <li class="dropdown"><a href="https://2016.igem.org/Team:NCTU_Formosa"  class="dropbtn">Home</a></li>
−
</div>
+
−
     <ul class="main-menu" id="menu">
+
−
         <li class="dropdown"><a href="https://2016.igem.org/Team:NCTU_Formosa">Home</a></li>
+
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="#" class="dropbtn"><span>Project</span></a>
+
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Project" class="dropbtn"><span class="menu_sign">Project</span></a>
 
                   <div class="dropdown-content">
 
                   <div class="dropdown-content">
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Description">Description</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Description">Description</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">Design</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">Design</a></div>
−
                       <div><a href="###">Device</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate">Device</a></div>
−
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Results">Results</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Proof">Results</a></div>
−
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Model">Modelling</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Model">Modeling</a></div>
−
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safty</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safety</a></div>
 
                   </div>
 
                   </div>
 
         </li>
 
         </li>
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
           <a href="https://2016.igem.org/Team:NCTU_Formosa/Human_Practices" class="dropbtn"><span>Human Practice</span></a>
+
           <a href="https://2016.igem.org/Team:NCTU_Formosa/Human_Practices" class="dropbtn"><span class="menu_sign">Human Practice</span></a>
 
                   <div class="dropdown-content">                       
 
                   <div class="dropdown-content">                       
−
                       <div><a href="#">Study</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Integrated_Practices">Study</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">Collaborations</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">Collaborations</a></div>
−
                       <div><a href="#">Education</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement">Education</a></div>
−
                       <div><a href="#">Meetups</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Meetups">Meetups</a></div>
−
                       <div><a href="#">Further Considerations</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Further_Considerations">Further Considerations</a></div>
 
                   </div>
 
                   </div>
 
         </li>
 
         </li>
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="##" class="dropbtn"><span>Entrepreneurship</span></a>
+
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship" class="dropbtn"><span class="menu_sign">Entrepreneurship</span></a>
−
                   <div class="dropdown-content">
+
                   <div class="dropdown-content">                                          
−
                       <div><a href="##">Law & Regulations</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Business Model</a></div>
−
                       <div><a href="##">Sponser</a></div>
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">Marketing & Future</a></div>
−
                       <div><a href="##">Marketing & Future</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">Law & Regulations</a></div>  
−
                       <div><a href="##">Manufacturing & Future</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Business_competition">Business Competition</a></div>
 +
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#ourSponsor">Sponsor</a></div>
 
                   </div>
 
                   </div>
 
         </li>
 
         </li>
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Parts" class="dropbtn"><span>Parts</span></a>
+
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Parts" class="dropbtn"><span class="menu_sign">Parts</span></a>
 
                   <div class="dropdown-content">
 
                   <div class="dropdown-content">
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Basic_Part">Basic Parts</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Basic_Part">Basic Parts</a></div>
Line 281: Line 282:
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook" class="dropbtn">Notebook</a>
+
             <a href="#" class="dropbtn"><span class="menu_sign">Notebook</span></a>
 
                   <div class="dropdown-content">
 
                   <div class="dropdown-content">
−
                       <div><a href="#">Lab Note</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook">Lab Note</a></div>
−
                       <div><a href="#">Protocol</a></div>
+
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Protocol">Protocol</a></div>
 
                   </div>
 
                   </div>
 
         </li>
 
         </li>
Line 291: Line 292:
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Team">Team</a>
+
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Attributions" class="dropbtn">Team</a>
 
         </li>
 
         </li>
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="##">Achievement</a>
+
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Achievement" class="dropbtn">Achievement</a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Gold">HP Gold</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver">HP Silver</a></div>
 +
                  </div>
 
         </li>
 
         </li>
 
     </ul>
 
     </ul>
 
      
 
      
  
−
 
+
</div>
−
 
+
−
 
+
  
 
<script>
 
<script>
Line 322: Line 325:
 
     $( '.dropdown' ).hover(
 
     $( '.dropdown' ).hover(
 
         function(){
 
         function(){
−
             $(this).children('.dropdown-content').slideDown(600);
+
             $(this).children('.dropdown-content').slideDown(500);
 
         },
 
         },
 
         function(){
 
         function(){
−
             $(this).children('.dropdown-content').slideUp(500);
+
             $('.dropdown').children('.dropdown-content').hide();
 
         }
 
         }
 
     );
 
     );
 
});
 
});
 
</script>
 
</script>
−
<script>
+
 
−
$(document).ready(function(){     
+
−
  var scroll_start = 0;
+
−
  var startchange = $('#startchange');
+
−
  var offset = startchange.offset();
+
−
  $(document).scroll(function() {
+
−
      scroll_start = $(this).scrollTop();
+
−
      if(scroll_start > offset.top) {
+
−
          $('#navbar').css('background-color', 'white');
+
−
      } else {
+
−
          $('#navbar').css('background-color', 'none');
+
−
      }
+
−
  });
+
−
});
+
−
</script>
+
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 18:32, 19 October 2016