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

 
(159 intermediate revisions by 3 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>
  
  
−
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  
 
     <style type="text/css">
 
     <style type="text/css">
Line 21: Line 22:
 
         margin:0;
 
         margin:0;
 
     }
 
     }
 +
 +
 
      
 
      
 
     .main-container{
 
     .main-container{
Line 31: Line 34:
  
  
−
   
+
     .dropbtn{
−
     .main-menu{
+
                  margin-top:5px;
−
      position:relative;
+
}
−
      list-style-type: none !important;
+
 
−
      margin:1px;
+
−
      padding:10px !important;
+
−
      display:block;
+
−
      float:right;
+
−
      font-size:12pt;
+
−
      font-family:"Open Sans",serif,sans-serif;
+
−
      }
+
  
−
    .container{
 
−
            display:none;
 
−
    }
 
 
      
 
      
−
     span:after{
+
     .dropbtn span:after{
 
width: 0;
 
width: 0;
 
height: 0;
 
height: 0;
Line 64: Line 57:
 
   .dropdown{
 
   .dropdown{
 
       float:left;
 
       float:left;
−
      margin-left:5px;
 
 
       text-decoration:none !important;
 
       text-decoration:none !important;
 
       list-style-type:none !important;
 
       list-style-type:none !important;
Line 72: 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 85: Line 78:
 
                       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 96: Line 100:
 
                       background:#E8E3E8;
 
                       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 116: Line 120:
 
   
 
   
  
−
/*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 163: Line 166:
 
                                  
 
                                  
 
}
 
}
−
.main-menu{
+
 
−
      display:none;
+
−
      }
+
 
.active_menu{display:none;}
 
.active_menu{display:none;}
 
      
 
      
Line 187: 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 207: 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 229: 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>
+
−
  <div class="bar3"></div>
+
−
</div>
+
 
     <ul class="main-menu" id="menu"  style="list-style-image: none;">
 
     <ul class="main-menu" id="menu"  style="list-style-image: none;">
 
         <li class="dropdown"><a href="https://2016.igem.org/Team:NCTU_Formosa"  class="dropbtn">Home</a></li>
 
         <li class="dropdown"><a href="https://2016.igem.org/Team:NCTU_Formosa"  class="dropbtn">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">Safety</a></div>
 
                       <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safety</a></div>
 
                   </div>
 
                   </div>
Line 252: Line 251:
 
          
 
          
 
         <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 282: Line 282:
 
          
 
          
 
         <li class="dropdown">
 
         <li class="dropdown">
−
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook" class="dropbtn"><span>Notebook</span></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 292: 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 321: 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();
 
         }
 
         }
 
     );
 
     );

Latest revision as of 18:32, 19 October 2016