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> |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | |||
− | |||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" 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 | ||
} | } | ||
− | + | 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){ | + | @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> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </style> | + | |
</head> | </head> | ||
<body> | <body> | ||
− | + | <div class="main-container";> | |
− | + | ||
− | + | <!--隊徽--> | |
− | < | + | <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%"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</a> | </a> | ||
− | < | + | <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> | + | <a href="https://2016.igem.org/Team:NCTU_Formosa/Project" class="dropbtn"><span class="menu_sign">Project</span></a> |
− | + | <div class="dropdown-content"> | |
− | <a href=" | + | <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/Demonstrate">Device</a></div> |
− | + | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Proof">Results</a></div> | |
− | </a> | + | <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> | + | </div> |
− | + | </li> | |
− | + | ||
+ | <li class="dropdown"> | ||
+ | <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><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/Engagement">Education</a></div> | ||
+ | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Meetups">Meetups</a></div> | ||
+ | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Further_Considerations">Further Considerations</a></div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship" class="dropbtn"><span class="menu_sign">Entrepreneurship</span></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Business Model</a></div> | ||
+ | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">Marketing & Future</a></div> | ||
+ | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">Law & Regulations</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> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a href="https://2016.igem.org/Team:NCTU_Formosa/Parts" class="dropbtn"><span class="menu_sign">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="#" class="dropbtn"><span class="menu_sign">Notebook</span></a> | |
− | + | <div class="dropdown-content"> | |
− | + | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook">Lab Note</a></div> | |
− | + | <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Protocol">Protocol</a></div> | |
− | + | </div> | |
− | + | </li> | |
− | + | ||
− | </ | + | |
− | < | + | |
− | + | <li class="dropdown"> | |
− | < | + | <a href="https://2016.igem.org/Team:NCTU_Formosa/Attributions" class="dropbtn">Team</a> |
− | + | </li> | |
− | + | ||
− | + | <li class="dropdown"> | |
− | + | <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> | ||
+ | </ul> | ||
+ | |||
+ | |||
</div> | </div> | ||
<script> | <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> | </script> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</body> | </body> | ||
</html> | </html> | ||
− |
Revision as of 03:04, 4 July 2017