|
|
| Line 7: |
Line 7: |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| − | *{
| |
| − | font-family:"Open Sans",serif,sans-serif
| |
| − | font-size:1em;
| |
| − | }
| |
| | | | |
| − | body{
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | .main-container{
| |
| − | background:white;
| |
| − | position:fixed;
| |
| − | width:100vw;
| |
| − | height:10vh;
| |
| − | }
| |
| − |
| |
| − | .NCTU_Formosa{
| |
| − | position:relative;
| |
| − | width:50px;
| |
| − | height:50px;
| |
| − | overflow:visible;
| |
| − | top:1vw;
| |
| − | left:5vw;
| |
| − | }
| |
| − |
| |
| − | @media screen and (min-width: 768px) {
| |
| − | .container{
| |
| − | display:none;
| |
| − | }
| |
| − | .main-menu{
| |
| − | position:relative;
| |
| − | list-style-type: none !important;
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | display:block;
| |
| − | float:right;
| |
| − | }
| |
| − | 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 */
| |
| − |
| |
| − | }
| |
| − |
| |
| − | li{
| |
| − | float:left;
| |
| − | }
| |
| − | ul>li>a{
| |
| − | color:black !important;
| |
| − | }
| |
| − | li .dropdown{
| |
| − | display:inline-block;
| |
| − | }
| |
| − |
| |
| − | li > a, .dropbtn {
| |
| − | display: inline-block;
| |
| − | text-align: center;
| |
| − | text-color:black;
| |
| − | padding: 10px 10px;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | /*下拉式menu*/
| |
| − |
| |
| − | li > a:hover, .dropdown:hover .dropbtn{
| |
| − | color:red;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content{
| |
| − | display:none;
| |
| − | background:white;
| |
| − | position:absolute;
| |
| − | width:auto;
| |
| − |
| |
| − | }
| |
| − | .dropdown-content a{
| |
| − | color: black;
| |
| − | padding:10px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align:left;
| |
| − | size:1em;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .dropdown-content a:hover{
| |
| − | color:red;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*screen change*/
| |
| − | @media screen and (max-width: 768px) {
| |
| − | /*menu icon*/
| |
| − | .container {
| |
| − | display:inline-block;
| |
| − | cursor: pointer;
| |
| − | position:relative;
| |
| − | float:right;
| |
| − | margin-right:20px;
| |
| − | margin-top:10px;
| |
| − | }
| |
| − |
| |
| − | .bar1, .bar2, .bar3 {
| |
| − | width: 35px;
| |
| − | height: 5px;
| |
| − | background-color: #333;
| |
| − | margin: 6px 0;
| |
| − | 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*/
| |
| − | 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 */
| |
| − |
| |
| − | }
| |
| − | .main-menu{
| |
| − | display:none;
| |
| − | }
| |
| − | .active_menu{display:none;}
| |
| − |
| |
| − | ul>li>a{
| |
| − | color:black;
| |
| − | text-align:center;
| |
| − | }
| |
| − | li,.dropdown{
| |
| − | display:block;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | li > a, .dropbtn {
| |
| − | display: inline-block;
| |
| − | text-align: center;
| |
| − | text-color:black;
| |
| − | padding: 14px 16px;
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | /*下拉式menu*/
| |
| − |
| |
| − | li > a:hover, .dropdown:hover .dropbtn{
| |
| − | color:red;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content{
| |
| − | background:white;
| |
| − | position:absolute;
| |
| − | width:100%;
| |
| − | text-align:center;
| |
| − | display: none;
| |
| − |
| |
| − | }
| |
| − | .dropdown-content a{
| |
| − | color: black;
| |
| − | padding:5px;
| |
| − | text-decoration: none;
| |
| − | text-align:center;
| |
| − | size:1em;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .dropdown-content a:hover{
| |
| − | color:red;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <div class="main-container";>
| |
| − |
| |
| − | <!--隊徽-->
| |
| − | <!--<img src="NCTU.png" class="NCTU_Formosa"></img>-->
| |
| − | <!--下拉選單-->
| |
| − | <div class="container" id="icon_menu" onclick="myFunction(this)"onclick="Function(this)">
| |
| − | <div class="bar1"></div>
| |
| − | <div class="bar2"></div>
| |
| − | <div class="bar3"></div>
| |
| − | </div>
| |
| − | <ul class="main-menu" id="menu">
| |
| − | <li><a href="https://2016.igem.org/Team:NCTU_Formosa">Home</a></li>
| |
| − |
| |
| − | <li class="dropdown">
| |
| − | <a href="#" class="dropbtn"><span>Project</span></a>
| |
| − | <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/Design">Design</a></div>
| |
| − | <div><a href="###">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/Model">Modelling</a></div>
| |
| − | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safty</a></div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="dropdown">
| |
| − | <a href="https://2016.igem.org/Team:NCTU_Formosa/Human_Practices" class="dropbtn"><span>Human Practice</span></a>
| |
| − | <div class="dropdown-content">
| |
| − | <div><a href="#">Study</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="#">Meetups</a></div>
| |
| − | <div><a href="#">Further Considerations</a></div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="dropdown">
| |
| − | <a href="##" class="dropbtn"><span>Entrepreneurship</span></a>
| |
| − | <div class="dropdown-content">
| |
| − | <div><a href="##">Law & Regulations</a></div>
| |
| − | <div><a href="##">Sponser</a></div>
| |
| − | <div><a href="##">Marketing & Future</a></div>
| |
| − | <div><a href="##">Manufacturing & Future</a></div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − | <li class="dropdown">
| |
| − | <a href="https://2016.igem.org/Team:NCTU_Formosa/Parts" class="dropbtn"><span>Parts</span></a>
| |
| − | <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/Composite_Part">Composite Parts</a></div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − | <li class="dropdown">
| |
| − | <a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook" class="dropbtn">Notebook</a>
| |
| − | <div class="dropdown-content">
| |
| − | <div><a href="#">Lab Note</a></div>
| |
| − | <div><a href="#">Protocol</a></div>
| |
| − | </div>
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <li class="dropdown">
| |
| − | <a href="https://2016.igem.org/Team:NCTU_Formosa/Team">Team</a>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a href="##">Achievement</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <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(600);
| |
| − | },
| |
| − | function(){
| |
| − | $(this).children('.dropdown-content').slideUp(500);
| |
| − | }
| |
| − | );
| |
| − | });
| |
| − | </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>
| |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
