Line 1,023: | Line 1,023: | ||
} | } | ||
+ | /* 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;} | ||
+ | .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; | ||
+ | position: absolute; | ||
+ | top: 0px | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | #three_bar{ | ||
+ | position: relative !important; | ||
+ | top: 0px !important; | ||
+ | cursor: pointer; | ||
+ | padding: 0 !important; | ||
+ | margin: 0 !important; | ||
+ | display: none !important; | ||
+ | z-index: 100 !important; | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 768px) { | ||
+ | #three_bar{ | ||
+ | display: block !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | #three_bar>p{ | ||
+ | font-size: 20px !important; | ||
+ | position: relative !important; | ||
+ | padding-top: -5px !important; | ||
+ | padding-left: 12px !important; | ||
+ | } | ||
+ | |||
+ | .igem_2018_menu2_wrapper { | ||
+ | width: 15%; | ||
+ | height:100vh; | ||
+ | position:fixed; | ||
+ | left:0%; | ||
+ | padding:0px; | ||
+ | top:60px; | ||
+ | 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; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | .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: 5%; } | ||
+ | .menu2_bottom_padding {display:none;} | ||
+ | .menu2_button.direct_to_page { padding-left: 36px; } | ||
+ | } | ||
+ | |||
</style> | </style> | ||
Line 1,039: | Line 1,210: | ||
</a> | </a> | ||
− | <ul class="main-menu" | + | <ul class="main-menu" style="list-style-image: none;"> |
<li class="dropdown"><a href="https://2018.igem.org/Team:NCTU_Formosa" class="dropbtn" id="navigation">Home</a></li> | <li class="dropdown"><a href="https://2018.igem.org/Team:NCTU_Formosa" class="dropbtn" id="navigation">Home</a></li> | ||
Line 1,048: | Line 1,219: | ||
<div><a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Design">Design</a></div> | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Design">Design</a></div> | ||
<div><a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Hardware">Hardware</a></div> | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Hardware">Hardware</a></div> | ||
− | <div><a href="https://2018.igem.org/Team:NCTU_Formosa | + | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Demostrate">Demonstration</a></div> |
− | <div><a href="https://2018.igem.org/Team:NCTU_Formosa | + | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Improve">Improvement</a></div> |
</div> | </div> | ||
</li> | </li> | ||
Line 1,095: | Line 1,266: | ||
<li class="dropdown"> | <li class="dropdown"> | ||
− | <a href="https://2018.igem.org/Team:NCTU_Formosa/ | + | <a href="https://2018.igem.org/Team:NCTU_Formosa/Team_Member" class="dropbtn"><span class="menu_sign">Team</span></a> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div class="dropdown-content" style="display: none;"> | <div class="dropdown-content" style="display: none;"> | ||
− | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Team_Member">Team | + | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Team_Member">Team Introduction</a></div> |
<div><a href="https://2018.igem.org/Team:NCTU_Formosa/Attributions">Attributions</a></div> | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Attributions">Attributions</a></div> | ||
<div><a href="https://2018.igem.org/Team:NCTU_Formosa/Achievements">Achievements</a></div> | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Achievements">Achievements</a></div> | ||
</div> | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Notebook" class="dropbtn_final"><span class="menu_sign">Notebook</span></a> | ||
+ | <div class="dropdown-content" style="display: none;"> | ||
+ | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Notebook">Lab Note</a></div> | ||
+ | <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Protocol">Protocol</a></div> | ||
+ | </div> | ||
</li> | </li> | ||
Line 1,116: | Line 1,287: | ||
</div> | </div> | ||
+ | <!-----------------------------------------------------------------------------> | ||
+ | |||
+ | <div id="Navigation2"> | ||
+ | <div id="three_bar"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/ff/T--NCTU_Formosa--Navigation.png" class="nav"> | ||
+ | <p style="color: white; font-weight: bold; z-index: 100;">☰</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_button" id="display_menu2_control"> | ||
+ | MENU | ||
+ | </div> | ||
+ | <div id="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/Project/Design"> | ||
+ | <div class="submenu2_button" id="Design_page"> | ||
+ | Design | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Hardware"> | ||
+ | <div class="submenu2_button" id="Peptide_Prediction_page"> | ||
+ | Hardware | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Demostrate"> | ||
+ | <div class="submenu2_button" id="Spore_Germinaition_Prediction_page"> | ||
+ | Demostration | ||
+ | </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> 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/Weka"> | ||
+ | <div class="submenu2_button" id="Spore_Germination_Model_page"> | ||
+ | Weka | ||
+ | </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/Model_1"> | ||
+ | <div class="submenu2_button" id="Spore_Germination_Model_page"> | ||
+ | Growth Model | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Dry_Lab/Model_4"> | ||
+ | <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/MIC"> | ||
+ | <div class="submenu2_button" id="Plant_Experiment_page"> | ||
+ | MIC Test | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Growth_Curve"> | ||
+ | <div class="submenu2_button" id="Protein_Expression_page"> | ||
+ | Growth Curve | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Soil_Exp"> | ||
+ | <div class="submenu2_button" id="Safety_page"> | ||
+ | Soil Experiment | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Wet_Lab/Safety"> | ||
+ | <div class="submenu2_button" id="Safety_page"> | ||
+ | Safety | ||
+ | </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> 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> | ||
+ | |||
+ | </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> | ||
+ | |||
+ | <a href="https://2018.igem.org/Team:NCTU_Formosa/Achievements"> | ||
+ | <div class="submenu2_button" id="Appreciation_page"> | ||
+ | Achievements | ||
+ | </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> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</body> | </body> | ||
Line 1,161: | Line 1,613: | ||
</script> | </script> | ||
+ | |||
+ | <!-------------------------------> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $("#three_bar").click(function(){ | ||
+ | $(".igem_2018_menu2_wrapper").toggle(); | ||
+ | $(".submenu2_wrapper").hide(); | ||
+ | $(".menu2_button").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(); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
</html> | </html> |
Revision as of 22:01, 30 September 2018