Difference between revisions of "Template:NCTU Formosa/test"

 
(117 intermediate revisions by the same user not shown)
Line 436: Line 436:
 
}
 
}
  
 
 
 
/* special class that the system uses to make sure the team wants a page to be evaluated */
 
.judges-will-not-evaluate {
 
    width: 96.6%;
 
  margin: 5px 15px;
 
  display: block;
 
border: 4px solid #3399ff;
 
    font-weight: bold;
 
}
 
  
 
</style>
 
</style>
Line 745: Line 734:
  
 
</div>
 
</div>
 +
  
 
<html>
 
<html>
Line 758: Line 748:
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 
   <link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet">
 
   <link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet">
 +
  <link href="https://static.igem.org/mediawiki/2018/a/ad/T--NCTU_Formosa--Font_Levenim_MT.ttf" rel="stylesheet">
  
 
<style>
 
<style>
Line 773: Line 764:
  
 
.main-container{
 
.main-container{
                background:#101654;
+
    position:fixed;
                position:fixed;
+
    width:100%;
                width:100%;
+
    height:10vmin;
                height:auto;
+
    z-index:999;
                z-index:999;
+
    transition: all 0.4s ease;
 +
    -moz-transition: all 0.4s ease;
 +
    -webkit-transition: all 0.4s ease;
 +
    transition-duration: 0.4s;
 
}
 
}
  
 +
.hideUp .main-container {
 +
  top: -80px;
 +
}
 +
 +
.hideUp .nav {
 +
  top: -80px;
 +
}
 +
 +
@font-face {
 +
  font-family: Levenim MT;
 +
  src: url(https://static.igem.org/mediawiki/2018/a/ad/T--NCTU_Formosa--Font_Levenim_MT.ttf);
 +
}
 +
 +
@font-face {
 +
  font-family: Myriad Pro;
 +
  src: url(https://static.igem.org/mediawiki/2018/4/43/T--NCTU_Formosa--Myriad_Pro.otf);
 +
}
 +
 +
@font-face {
 +
  font-family: solaris;
 +
  src: url(https://static.igem.org/mediawiki/2018/3/37/T--NCTU_Formosa--solaris.ttf);
 +
}
  
 
.dropbtn{
 
.dropbtn{
 
               margin: 0;
 
               margin: 0;
               margin-top:15px;
+
               margin-top:1vw;
 
               font-family: Aldrich !important;
 
               font-family: Aldrich !important;
 
               font-weight: bold;
 
               font-weight: bold;
 +
              z-index: 1000;
 
}
 
}
  
 
.dropbtn_final{
 
.dropbtn_final{
               margin-top:15px;
+
               margin-top:1vw;
 
               font-family: Aldrich !important;
 
               font-family: Aldrich !important;
 
               font-weight: bold;
 
               font-weight: bold;
 +
              z-index: 1000;
 
}
 
}
  
Line 842: Line 860:
 
   float:right !important;
 
   float:right !important;
 
   font-weight:400 !important;
 
   font-weight:400 !important;
   font-size:15px;
+
   font-size:1.1vw;
  
 
   }
 
   }
Line 862: Line 880:
 
                     color: white;
 
                     color: white;
 
                     padding:15px;
 
                     padding:15px;
 +
                    padding-top: 5px;
 +
                    padding-bottom: 5px;
 
                     text-decoration: none;
 
                     text-decoration: none;
 
                     display: block;
 
                     display: block;
Line 884: Line 904:
 
                 position:fixed;
 
                 position:fixed;
 
                 width:100vw;
 
                 width:100vw;
                 height:10.5vh;
+
                 height:10.5vmin;
 
                 display:block important;
 
                 display:block important;
 
                 }
 
                 }
Line 902: Line 922:
 
                 }
 
                 }
 
.NCTU_Formosa{
 
.NCTU_Formosa{
             left:2.5vmin;
+
             left: 2vw;
             position:relative;
+
             position: relative;
             top:35px;
+
             top: 100px;
 
}
 
}
 
}
 
}
Line 938: Line 958:
 
ul>.dropdown>a{
 
ul>.dropdown>a{
 
             color:white !important;
 
             color:white !important;
             border:solid 3px #94ecf7;
+
             border:solid 0px #94ecf7;
 
             border-radius: 25px !important;
 
             border-radius: 25px !important;
 
             text-align:center !important;
 
             text-align:center !important;
Line 948: Line 968:
 
             padding-left: 9px;
 
             padding-left: 9px;
 
           }
 
           }
 +
 +
.test {
 +
  color:blue !important;
 +
  border:solid 0px #94ecf7;
 +
  border-radius: 25px !important;
 +
  text-align:center !important;
 +
  list-style-type: none !important;
 +
  text-decoration: none;
 +
  transition-duration: 0.5s;
 +
  padding-top: 4px;
 +
  padding-bottom: 4px;
 +
  padding-left: 9px;
 +
}
 +
 
.dropdown{
 
.dropdown{
 
             background:#101654;
 
             background:#101654;
Line 968: Line 1,002:
  
 
.dropdown > .dropbtn_final{
 
.dropdown > .dropbtn_final{
                   margin-right: 70px;
+
                   margin-right: 3vw;
 
}
 
}
  
Line 985: Line 1,019:
 
                   display: none;
 
                   display: none;
 
                   Z-index:100;
 
                   Z-index:100;
 +
                  border-bottom-left-radius: 0.5vw;
 +
                  border-bottom-right-radius: 0.5vw;
 
                 }
 
                 }
 
.dropdown-content a{
 
.dropdown-content a{
 
                     color: white;
 
                     color: white;
                     padding-top:20px;
+
                    padding:15px;
 +
                     padding-top: 3vmin;
 +
                    padding-bottom: 5px;
 
                     text-decoration: none;
 
                     text-decoration: none;
 
                     text-align:center;
 
                     text-align:center;
Line 1,002: Line 1,040:
 
                           transition-duration: 0.5s;
 
                           transition-duration: 0.5s;
 
                           }
 
                           }
 +
 +
#last{
 +
  padding-bottom: 10px;
 +
  border-bottom: solid 0.5vw #8ffbfe;
 +
  border-bottom-left-radius: 0.5vw;
 +
  border-bottom-right-radius: 0.5vw;
 +
}
 +
 +
#first{
 +
  margin-top: 0.5vw;
 +
}
  
 
svg{
 
svg{
Line 1,008: Line 1,057:
 
}
 
}
  
 +
.nav{
 +
  width: 100%;
 +
  position: fixed;
 +
  box-shadow: 0px -3px 18px 0px;
 +
  z-index: 999;
 +
  transition: all 0.4s ease;
 +
  -moz-transition: all 0.4s ease;
 +
  -webkit-transition: all 0.4s ease;
 +
  transition-duration: 0.4s;
 
}
 
}
 +
 +
/* IF THE SCREEN IS LESS THAN 768PX */
 +
@media only screen and (max-width: 768px) {
 +
 +
  .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 +
  .igem_2017_content_wrapper { width:100%; margin-left:0px;}
 +
  .column.half_size  { width:100%; }
 +
  .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;}
 +
  .highlight { padding:15px 5px;}
 +
  .igem_2017_menu_wrapper #display_menu_control { display:block; }
 +
  .main-container { display:none;}
 +
  .nav { display: none;}
 +
  .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
  .menu_bottom_padding { display:none;}
 +
  .menu_button.direct_to_page { padding-left: 36px; }
 +
}
 +
 +
@media only screen and (min-width: 768px) {
 +
  #menu2_content {display: none;}
 +
  #display_menu2_control {display: none;}
 +
  #Navigation2 {display: none;}
 +
}
 +
 +
/*----------------------------------------------------------------------------*/
 +
 +
@media only screen and (max-width: 768px) {
 +
 +
    #nav{
 +
        display: none;
 +
    }
 +
 +
    .head_pic{
 +
        position: relative;
 +
        width: 30vw;
 +
        left: 35vw;
 +
    }
 +
}
 +
 +
/*----------------------------------------------------------------------------*/
 +
#Navigation2{
 +
    padding-left: 0;
 +
    margin: 0;
 +
    top: 0;
 +
    position: absolute;
 +
    width: 100%;
 +
}
 +
 +
#three_bar{
 +
    position: relative !important;
 +
    top: 0px !important;
 +
    cursor: pointer;
 +
    padding: 0 !important;
 +
    margin: 0 !important;
 +
    display: none !important;
 +
    z-index: 100 !important;
 +
    height: 6.4vh;
 +
}
 +
 +
@media only screen and (max-width: 768px) {
 +
    #three_bar{
 +
        display: block !important;
 +
    }
 +
}
 +
 +
#three_bar>p{
 +
    font-size: 3vh !important;
 +
    width: 100%;
 +
    text-align: center;
 +
    background-color: #0d0249;
 +
    position: relative !important;
 +
    z-index: 1000;
 +
    top: 0;
 +
    margin: 0;
 +
    margin-bottom: ;
 +
    height: 6.4vh;
 +
}
 +
 +
 +
/*
 +
#three_bar>.nav2 {
 +
    background-color: #101654;
 +
    width: 100%;
 +
    position: fixed;
 +
    float: right;
 +
    padding-left: 20px;
 +
    font-family: Levenim MT;
 +
    z-index: 999 !important;
 +
    height: 30px;
 +
}*/
 +
 +
.igem_2018_menu2_wrapper {
 +
    width: 15%;
 +
    height:100vh;
 +
    position:fixed;
 +
    left:0%;
 +
    padding:0px;
 +
    top:4vw;
 +
    float:right;
 +
    border-right: 1px solid #85CFEA;
 +
    background-color:#ffffff;
 +
    text-align:left;
 +
    font-family: Levenim MT;
 +
    overflow-y: auto;
 +
    overflow-x: hidden;
 +
    display: none;
 +
    z-index: 999 !important;
 +
    border-top: 1px solid #85CFEA;
 +
    border-left: 1px solid #85CFEA;
 +
}
 +
 +
.igem_2018_menu2_wrapper::-webkit-scrollbar {
 +
    display: none;
 +
}
 +
 +
.igem_2018_menu2_wrapper a {
 +
    text-decoration: none;
 +
}
 +
 +
.igem_2018_menu2_wrapper .menu2_button {
 +
    width: 100vw;
 +
    padding: 10px 0px 10px 15px;
 +
    float:left;
 +
    border-bottom: 1px solid #85CFEA;
 +
    border-top: 1px solid #85CFEA;
 +
    font-size: 12px;
 +
    font-weight: bold;
 +
    color: #000000;
 +
    cursor: pointer;
 +
}
 +
 +
.igem_2018_menu2_wrapper .menu2_button .expand_collapse_icon2::before {
 +
    content: "+";
 +
}
 +
 +
.open::before {
 +
    content: "-" !important;
 +
}
 +
 +
.igem_2018_menu2_wrapper .menu2_button:hover, .igem_2018_menu2_wrapper .submenu2_button:hover ,  .submenu2_button.current_page:hover {
 +
    background-color: #D1D1D1;
 +
    text-decoration: none;
 +
    color:#ffffff;
 +
    transition-duration: 0.5s;
 +
}
 +
 +
.igem_2018_menu2_wrapper .submenu2_button {
 +
    width: 100%;
 +
    padding: 10px 0px 10px 34px;
 +
    float:left;
 +
    background-color:#f2f2f2;
 +
    border-bottom: 1px solid #d3d3d3;
 +
    font-size: 12px;
 +
    color: #5e5f5f;
 +
    cursor: pointer;
 +
}
 +
 +
.igem_2018_menu2_wrapper .submenu2_wrapper {
 +
    display:none;
 +
}
 +
 +
.igem_2018_menu2_wrapper #display_menu_control {
 +
    display:none;
 +
    text-align:center;
 +
}
 +
 +
 +
/*----------------------------------------------------------------------------*/
 +
 +
@media only screen and (max-width: 1200px) {
 +
 +
    #content {width:100%; }
 +
    .igem_2018_menu2_wrapper {width:15%; right:0; top: 0px; }
 +
    /*.highlight {padding:10px 0px;}*/
 +
    .igem_2018_menu2_wrapper #display_menu_control { display:none; }
 +
    #menu2_content { display:block;}
 +
    .menu2_button.direct_to_page {padding-left: 17px;}
 +
 +
}
 +
 +
/* IF THE SCREEN IS LESS THAN 768PX */
 +
@media only screen and (max-width: 768px) {
 +
 +
    .igem_2018_menu2_wrapper { width:100%; height: 15%; position:relative; left:0%; top: -10px;}
 +
    /*.igem_2018_content_wrapper {width:100%; margin-left:0px;}
 +
    .column.half_size  {width:100%; }
 +
    .column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 +
    .highlight {padding:15px 5px;}*/
 +
    .igem_2018_menu2_wrapper #display_menu_control { display:block; }
 +
    #menu2_content { display:none;}
 +
    .igem_2018_menu2_wrapper .menu2_button .expand_collapse_icon2 { width: 100%; }
 +
    .menu2_bottom_padding {display:none;}
 +
    .menu2_button.direct_to_page { padding-left: 36px; }
 +
}
 +
 +
 +
  
 
</style>
 
</style>
Line 1,016: Line 1,270:
 
<body>
 
<body>
  
<div class="main-container">
+
<img src="https://static.igem.org/mediawiki/2018/f/ff/T--NCTU_Formosa--Navigation.png" class="nav" id="navigate">
 +
<div class="main-container" onscroll="shadow()" id="main-container">
  
 
     <!--隊徽-->
 
     <!--隊徽-->
 
<a href="https://2018.igem.org/Team:NCTU_Formosa">
 
<a href="https://2018.igem.org/Team:NCTU_Formosa">
<img src="https://static.igem.org/mediawiki/2018/f/f3/T--NCTU_Formosa--navigation_bar.png" class="NCTU_Formosa" width="4.5%">
+
<img src="https://static.igem.org/mediawiki/2018/f/fa/T--NCTU_Formosa--Team_logo.png" class="NCTU_Formosa" width="10.5%">
 
</a>
 
</a>
  
<ul class="main-menu" id="menu" style="list-style-image: none;">
+
<ul class="main-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://2018.igem.org/Team:NCTU_Formosa" class="dropbtn" id="navigation">Home</a></li>
  
 
     <li class="dropdown">
 
     <li class="dropdown">
         <a href="https://2016.igem.org/Team:NCTU_Formosa/Project" class="dropbtn"><span class="menu_sign">Project</span></a>
+
         <a href="#" class="dropbtn"><span class="menu_sign">Project</span></a>
 
               <div class="dropdown-content" style="display: none;">
 
               <div class="dropdown-content" style="display: none;">
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Description">Description</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Description" id="first">Description</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">Design</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Applied_Design">Design</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate">Device</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Hardware">IoT System</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Proof">Results</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Demonstrate">Demonstration</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Model">Demonstration</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Entrepreneurship">Entrepreneurship</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safety</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/InterLab" id="last">InterLab</a></div>
 
               </div>
 
               </div>
 
     </li>
 
     </li>
  
 
     <li class="dropdown">
 
     <li class="dropdown">
         <a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship" class="dropbtn"><span class="menu_sign">Modeling</span></a>
+
         <a href="#" class="dropbtn"><span class="menu_sign">Dry Lab</span></a>
 
               <div class="dropdown-content" style="display: none;">
 
               <div class="dropdown-content" style="display: none;">
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Overview</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Model" id="first">Overview</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">Growth Model</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Microbiota_Prediciton">Microbiota Prediction</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">Correlation Model</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Peptide_Prediction">Peptide Prediction</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Business_competition">Productivity Model</a></div>
+
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Growth_Model">Growth Model</a></div>
 +
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Productivity_Model">Productivity Model</a></div>
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/NGS_Data_Analysis" id="last">NGS Data Analysis</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 class="menu_sign">Experiment</span></a>
+
       <a href="#" class="dropbtn"><span class="menu_sign">Wet Lab</span></a>
 
               <div class="dropdown-content" style="display: none;">
 
               <div class="dropdown-content" style="display: none;">
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Integrated_Practices">Experiment Design</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab" id="first">Experiment Design</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">Experiment Results</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Expression">Protein Expression</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement">Inter Lab</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Functional_Analysis">Functional Analysis</a></div>
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Curcumin_Biosensor">Curcumin Bio-sensor</a></div>
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Safety"  id="last">Safety</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 class="menu_sign">Parts</span></a>
+
         <a href="#" class="dropbtn"><span class="menu_sign">Parts</span></a>
 
               <div class="dropdown-content" style="display: none;">
 
               <div class="dropdown-content" style="display: none;">
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Basic_Part">Basic Parts</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Parts" id="first">Parts</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Composite_Part">Composite Parts</a></div>
+
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Basic_Part">Basic Parts</a></div>
 +
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Composite_Part">Composite Parts</a></div>
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Part_Collection">Part Collection</a></div>
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Improve" id="last">Improvement</a></div>
 
               </div>
 
               </div>
 
     </li>
 
     </li>
  
 
     <li class="dropdown">
 
     <li class="dropdown">
         <a href="https://2018.igem.org/Team:NCTU_Formosa/HumanPractice" class="dropbtn"><span class="menu_sign">Human Practice</sapn></a>
+
         <a href="#" class="dropbtn"><span class="menu_sign">Human Practice</sapn></a>
 
               <div class="dropdown-content" style="display: none;">
 
               <div class="dropdown-content" style="display: none;">
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Education</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Human_Practices" id="first">Overview</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">HP Silver</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Public_Engagement">Education &<br>Public Engagement</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">HP Gold</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Human_Practices/Integrated">Integrated HP</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Business_competition">Collaboration</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Collaborations" id="last">Collaboration</a></div>
 
               </div>
 
               </div>
 
     </li>
 
     </li>
  
 
     <li class="dropdown">
 
     <li class="dropdown">
         <a href="https://2016.igem.org/Team:NCTU_Formosa#" class="dropbtn"><span class="menu_sign">Notebook</span></a>
+
         <a href="#" class="dropbtn"><span class="menu_sign">Team</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Team_Member" id="first">Team Introduction</a></div>
 +
                  <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Attributions" id="last">Attributions</a></div>
 +
              </div>
 +
    </li>
 +
 
 +
    <li class="dropdown">
 +
        <a href="#" class="dropbtn"><span class="menu_sign">Notebook</span></a>
 
               <div class="dropdown-content" style="display: none;">
 
               <div class="dropdown-content" style="display: none;">
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook">Lab Note</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Notebook" id="first">Lab Note</a></div>
                   <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Protocol">Protocol</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Protocol" id="last">Protocol</a></div>
 
               </div>
 
               </div>
 
     </li>
 
     </li>
  
     <li class="dropdown">
+
     <li class="dropdown"><a href="https://2018.igem.org/Team:NCTU_Formosa/Achievements" class="dropbtn_final">Achievements</a></li>
        <a href="https://2016.igem.org/Team:NCTU_Formosa/Attributions" class="dropbtn_final"><span class="menu_sign">Team</span></a>
+
              <div class="dropdown-content" style="display: none;">
+
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Gold">Team Members</a></div>
+
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver">Attributions</a></div>
+
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver">Achievements</a></div>
+
              </div>
+
 
     </li>
 
     </li>
  
Line 1,095: Line 1,359:
  
  
 +
</div>
 +
 +
<!----------------------------------------------------------------------------->
 +
 +
<div id="Navigation2">
 +
    <div id="three_bar">
 +
        <p style="color: white; font-weight: bold; z-index: 100;">&#9776;</p>
 +
 +
    </div>
 +
    <div class="igem_2018_menu2_wrapper">
 +
 +
        <!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 +
 +
        <div class="menu2_content">
 +
            <a href="https://2018.igem.org/Team:NCTU_Formosa">
 +
                <div class="menu2_button direct_to_page">
 +
                    HOME
 +
                </div>
 +
            </a>
 +
 +
            <!----------------------------------------------------------------------------->
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Project
 +
            </div>
 +
 +
            <div class="submenu2_wrapper" id="Project_submenu">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Description">
 +
                    <div class="submenu2_button" id="Description_page">
 +
                        Description
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Applied_Design">
 +
                    <div class="submenu2_button" id="Design_page">
 +
                        Design
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Hardware">
 +
                    <div class="submenu2_button" id="Peptide_Prediction_page">
 +
                        IoT System
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Demonstrate">
 +
                    <div class="submenu2_button" id="Spore_Germinaition_Prediction_page">
 +
                        Demostration
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Entrepreneurship">
 +
                  <div class="submenu2_button">
 +
                        Entrepreneurship
 +
                  </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/InterLab">
 +
                    <div class="submenu2_button" id="Safety_page">
 +
                        InterLab
 +
                    </div>
 +
                </a>
 +
 +
            </div>
 +
 +
 +
            <!----------------------------------------------------------------------------->
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Dry Lab
 +
            </div>
 +
 +
            <!-- project submenu -->
 +
            <div class="submenu2_wrapper">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Model">
 +
                    <div class="submenu2_button" id="SCM_Model_page">
 +
                        Overview
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Microbiota_Prediciton">
 +
                    <div class="submenu2_button" id="Spore_Germination_Model_page">
 +
                        Microbiota Prediction
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Peptide_Prediction">
 +
                    <div class="submenu2_button" id="Spore_Germination_Model_page">
 +
                        Peptide Prediction
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Growth_Model">
 +
                    <div class="submenu2_button" id="Spore_Germination_Model_page">
 +
                        Growth Model
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Productivity_Model">
 +
                    <div class="submenu2_button" id="Spore_Germination_Model_page">
 +
                        Productivity Model
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/NGS_Data_Analysis">
 +
                    <div class="submenu2_button" id="Spore_Germination_Model_page">
 +
                        NGS Data Analysis
 +
                    </div>
 +
                </a>
 +
 +
            </div>
 +
 +
            <!----------------------------------------------------------------------------->
 +
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Wet Lab
 +
            </div>
 +
 +
            <!-- project submenu -->
 +
            <div class="submenu2_wrapper">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab">
 +
                    <div class="submenu2_button" id="Fungal_Experiment_page">
 +
                        Experiment Design
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Expression">
 +
                    <div class="submenu2_button" id="Fungal_Experiment_page">
 +
                        Protein Expression
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Functional_Analysis">
 +
                    <div class="submenu2_button" id="Plant_Experiment_page">
 +
                        Functional Analysis
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Curcumin_Biosensor">
 +
                    <div class="submenu2_button" id="Protein_Expression_page">
 +
                        Curcumin Bio-sensor
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Safety">
 +
                    <div class="submenu2_button" id="Safety_page">
 +
                        Safety
 +
                    </div>
 +
                </a>
 +
 +
            </div>
 +
 +
 +
            <!----------------------------------------------------------------------------->
 +
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Parts
 +
            </div>
 +
 +
            <!-- parts submenu -->
 +
            <div class="submenu2_wrapper">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Parts">
 +
                    <div class="submenu2_button" id="Basic_Part_page">
 +
                        Parts
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Basic_Part">
 +
                    <div class="submenu2_button" id="Basic_Part_page">
 +
                        Basic Parts
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Composite_Part">
 +
                    <div class="submenu2_button" id="Composite_Part_page">
 +
                        Composite Parts
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Part_Collection">
 +
                    <div class="submenu2_button" id="Composite_Part_page">
 +
                        Part Collection
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Improve">
 +
                    <div class="submenu2_button" id="Improvement_page">
 +
                        Improvement
 +
                    </div>
 +
                </a>
 +
 +
            </div>
 +
 +
            <!----------------------------------------------------------------------------->
 +
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Human Practice
 +
            </div>
 +
 +
            <!-- human practices submenu -->
 +
            <div class="submenu2_wrapper">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Human_Practices">
 +
                    <div class="submenu2_button" id="Gold_Integrated_page">
 +
                        Overview
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Public_Engagement">
 +
                    <div class="submenu2_button" id="Gold_Integrated_page">
 +
                      Education and Public Engagement
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Human_Practices/Integrated">
 +
                    <div class="submenu2_button" id="Gold_Integrated_page">
 +
                        Integrated HP
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Collaborations">
 +
                    <div class="submenu2_button" id="Collaboration_page">
 +
                        Collaboration
 +
                    </div>
 +
                </a>
 +
            </div>
 +
 +
            <!----------------------------------------------------------------------------->
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Team
 +
            </div>
 +
 +
            <!-- awards submenu -->
 +
            <div class="submenu2_wrapper">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Team_Member">
 +
                    <div class="submenu2_button" id="Team_page">
 +
                        Team Introduction
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Attributions">
 +
                    <div class="submenu2_button" id="Appreciation_page">
 +
                        Attributions
 +
                    </div>
 +
                </a>
 +
 +
                <!----------------------------------------------------------------------------->
 +
 +
            </div>
 +
 +
            <div class="menu2_button">
 +
                <span class="expand_collapse_icon2">  </span> Notebook
 +
            </div>
 +
 +
            <!-- awards submenu -->
 +
            <div class="submenu2_wrapper">
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Notebook">
 +
                    <div class="submenu2_button" id="Lab_Notes_page">
 +
                        Lab Note
 +
                    </div>
 +
                </a>
 +
 +
                <a href="https://2018.igem.org/Team:NCTU_Formosa/Protocol">
 +
                    <div class="submenu2_button" id="Protocol_page">
 +
                        Protocol
 +
                    </div>
 +
                </a>
 +
            </div>
 +
 +
            <a href="https://2018.igem.org/Team:NCTU_Formosa/Achievements">
 +
                <div class="menu2_button direct_to_page">
 +
                    Achievements
 +
                </div>
 +
            </a>
 +
 +
        </div>
 +
    </div>
 
</div>
 
</div>
  
Line 1,117: Line 1,668:
 
$( '.dropdown' ).hover(
 
$( '.dropdown' ).hover(
 
     function(){
 
     function(){
         $(this).children('.dropdown-content').slideDown(500);
+
         $(this).children('.dropdown-content').slideDown(750);
 
     },
 
     },
 
     function(){
 
     function(){
Line 1,124: Line 1,675:
 
);
 
);
 
});
 
});
 +
 +
window.onscroll = function() {myFunction()};
 +
 +
function myFunction() {
 +
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
 +
        element.classList.remove("ul li a");
 +
        document.getElementById("navigation").className = ".test";
 +
    } else {
 +
        element.classList.remove(".test");
 +
        document.getElementById("navigation").className = "";
 +
    }
 +
};
 +
 +
function shadow() {
 +
  $(".main-container").attr("box-shadow","0px 0p 20px 0px;");
 +
};
 +
 
</script>
 
</script>
 +
 +
<!------------------------------->
 +
 +
<script>
 +
$(document).ready(function(){
 +
    $("#three_bar").click(function(){
 +
        $(".igem_2018_menu2_wrapper").toggle();
 +
        $(".submenu2_wrapper").hide();
 +
        $(".menu2_content").children().removeClass("open");
 +
    });
 +
});
 +
 +
 +
$(document).ready(function(){
 +
    $("#display_menu2_control").click(function(){
 +
        $("#menu2_content").toggle(100);
 +
    });
 +
});
 +
 +
$(document).ready(function(){
 +
    $(".menu2_button").click(function(){
 +
        $(".submenu2_wrapper").hide();
 +
        $(".menu2_button").children().removeClass("open");
 +
    });
 +
});
 +
 +
$(document).ready(function(){
 +
    $(".menu2_button").click(function(){
 +
        $(this).children().toggleClass("open");
 +
        $(this).next('.submenu2_wrapper').toggle();
 +
    });
 +
});
 +
 +
var bodyClass = document.body.classList,
 +
    lastScrollY = 0;
 +
window.addEventListener('scroll', function(){
 +
  var st = this.scrollY;
 +
  // 判斷是向上捲動,而且捲軸超過 200px
 +
  if( st < lastScrollY) {
 +
    bodyClass.remove('hideUp');
 +
  }else{
 +
    bodyClass.add('hideUp');
 +
  }
 +
  lastScrollY = st;
 +
});
 +
 +
 +
</script>
 +
<script>
 +
/*var prevScrollpos = window.pageYOffset;
 +
window.onscroll = function() {
 +
var currentScrollPos = window.pageYOffset;
 +
  if (prevScrollpos > currentScrollPos) {
 +
    document.getElementById("main-container").style.top = "1vw";
 +
    document.getElementById("navigate").style.top = "2vw";
 +
  } else {
 +
    document.getElementById("main-container").style.top = "-80px";
 +
    document.getElementById("navigate").style.top = "-80px";
 +
  }
 +
  prevScrollpos = currentScrollPos;
 +
}*/
 +
</script>
 +
 +
 
</html>
 
</html>

Latest revision as of 19:37, 9 December 2018

Navigation Bar