Difference between revisions of "Template:TCFSH Taiwan"

Line 453: Line 453:
  
  
<head>  
+
<html>
 +
<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">
 +
<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,400" rel="stylesheet">
  
<!-- This tells the browser that your page is responsive -->
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
 
     <style type="text/css">
 
     <style type="text/css">
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
Line 464: Line 468:
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
</style>
 
  
 +
    *{
 +
      font-family:"Open Sans",serif,sans-serif
 +
    }
 +
   
 +
    body{
 +
        margin:0;
 +
    }
  
  
 +
   
 +
    .main-container{
 +
                    background:#E8E3E8;
 +
                    position:fixed;
 +
                    width:100vw;
 +
                    height:auto;
 +
                    z-index:999;
 +
                    }
 +
 +
 +
    .dropbtn{
 +
                  margin-top:5px;
 +
}
 +
 +
 +
   
 +
    .dropbtn 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 */
 +
                text-decoration:none !important;
 +
                list-style-type:none !important;           
 +
              }
 +
 +
  .dropdown{
 +
      float:left;
 +
      text-decoration:none !important;
 +
      list-style-type:none !important;
 +
      }
 +
    ul>.dropdown>a{
 +
                color:black !important;
 +
                list-style-type:none !important;
 +
                text-decoration:none !important;
 +
                text-align:left;
 +
              }
 +
    li .dropdown{
 +
                display:inline-block;
 +
                }
 +
               
 +
    .dropdown > a, .dropbtn {
 +
                      display: inline-block;
 +
                      text-align: center;
 +
                      text-color:black;
 +
                      padding-right: 10px;
 +
                      margin-right:10px;
 +
                      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*/
 +
 +
    .dropdown > a:hover, .dropdown:hover .dropbtn{
 +
                                            color:red !important;
 +
                                            }
 +
 +
    .dropdown-content{
 +
                      display:none;
 +
                      background:#E8E3E8;
 +
                      position:absolute;
 +
                      width:auto !important;
 +
                     
 +
                    }
 +
    .dropdown-content a{
 +
                        color: black;
 +
                        padding:15px;
 +
                        text-decoration: none;
 +
                        display: block;
 +
                        text-align:left !important;
 +
                        size:1em;
 +
                        }
 +
                       
 +
   
 +
    .dropdown-content a:hover{
 +
                              color:red;
 +
                              }
 +
   
 +
   
 +
 +
 +
 +
 +
/*manu*/
 +
@media screen and (min-width: 768px) {
 +
.main-container{
 +
                    background:white !important;
 +
                    position:fixed;
 +
                    width:100vw;
 +
                    height:10.5vh;
 +
                    display:block important;
 +
                    }
 +
  .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;
 +
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 */
 +
                               
 +
}
 +
 +
.active_menu{display:none;}
 +
   
 +
    ul>.dropdown>a{
 +
                color:black !important;
 +
                text-align:center !important;
 +
                list-style-type: none !important;
 +
                text-decoration: none;
 +
              }
 +
    .dropdown{
 +
                background:white;
 +
                display:block !important;
 +
                text-align:center;
 +
                list-style-type: none !important;
 +
                text-decoration: none !important;
 +
                font-family:"Open Sans",serif,sans-serif;
 +
                }
 +
               
 +
    .dropdown > a, .dropbtn {
 +
                      display:block !important;
 +
                      text-align: center !important;
 +
                      text-color:black !important;
 +
                      padding: 12px 12px !important;
 +
                      text-decoration:none !important;   
 +
                    }
 +
 +
                /*下拉式menu*/
 +
 +
    .dropdown > a:hover, .dropdown:hover .dropbtn{
 +
                                            color:red !important;
 +
                                            }
 +
 +
    .dropdown-content{
 +
                      background:white;
 +
                      position:absolute;
 +
                      width:100%;
 +
                      text-align:center;
 +
                      display: none;
 +
                      Z-index:100;
 +
                    }
 +
    .dropdown-content a{
 +
                        color: black;
 +
                        padding-top:5px;       
 +
                        text-decoration: none;
 +
                        text-align:center;
 +
                        size:1.3em;
 +
                       
 +
                        }
 +
 +
   
 +
    .dropdown-content a:hover{
 +
                              color:red;
 +
                              }
 +
 +
}
 +
 +
    </style>
 +
   
 
</head>
 
</head>
 +
 +
<body>
 +
 +
<div class="main-container">
 +
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan">
 +
  <img src="https://static.igem.org/mediawiki/2017/5/53/TEAM_name_logo_Tcfsh_new.png" class="TCFSH_Taiwan" width="20%">
 +
  </a>
 +
      <ul class="main-menu" id="menu"  style="list-style-image: none;">
 +
        <li class="dropdown"><a href="https://2017.igem.org/Team:TCFSH_Taiwan"  class="dropbtn">Home</a></li>
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Project" class="dropbtn"><span class="menu_sign">Project</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">Description</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Design">Design</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Demonstrate">Device</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Results">Results</a></div>
 +
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Modeling</a></div>
 +
                                         
 +
                  </div>
 +
        </li>
 +
 +
                 
 +
        <li class="dropdown">
 +
            <a href="#" class="dropbtn"><span class="menu_sign">Awards</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Applied_Design">Applied Design</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Entrepreneurship">Entrepreneurship</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Measurement">Measurement</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Plant">Plant</a></div>
 +
                  </div>
 +
        </li>
 +
 +
 +
        <li class="dropdown">
 +
            <a href="#" class="dropbtn"><span class="menu_sign">Human Practices</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">Silver HP</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Gold_Integrated">Integrated and Gold</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Engagement">Public Engagement</a></div>
 +
                  </div>
 +
        </li>
 +
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Parts" class="dropbtn"><span class="menu_sign">Parts</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">Basic Parts</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Composite_Part">Composite Parts</a></div>
 +
                  </div>
 +
        </li>
 +
 
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Attributions" class="dropbtn"><span class="menu_sign">Team</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Team">Team</a></div>
 +
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Collaborations">Collaborations</a></div>                     
 +
                  </div>
 +
        </li>
 +
 +
      <li class="dropdown">
 +
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Safety" class="dropbtn">Safety</a>             
 +
        </li>
 +
       
 +
    </ul>
 +
</div>
 +
 +
<script>
 +
function myFunction(x) {
 +
   
 +
    x.classList.toggle("change");
 +
   
 +
};
 +
 +
$(document).ready(function(){
 +
    $("#icon_menu").click(
 +
    function(){$("#menu").toggle()}
 +
    );
 +
     
 +
});
 +
 +
$(document).ready(function() {
 +
   
 +
    $( '.dropdown' ).hover(
 +
        function(){
 +
            $(this).children('.dropdown-content').slideDown(500);
 +
        },
 +
        function(){
 +
            $('.dropdown').children('.dropdown-content').hide();
 +
        }
 +
    );
 +
});
 +
</script>
 +
 +
</div>
 +
 +
</body>
 +
</html>
 +
  
  

Revision as of 04:44, 25 October 2017




<a href="https://2017.igem.org/Team:Example2"> <img src="http://placehold.it/350x150"> </a>