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

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" id="menu" style="list-style-image: none;">
+
<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/Project/Demostrate">Demonstration</a></div>
+
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Demostrate">Demonstration</a></div>
                   <div><a href="https://2018.igem.org/Team:NCTU_Formosa/Project/Improve">Improvement</a></div>
+
                   <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/Notebook" class="dropbtn"><span class="menu_sign">Notebook</span></a>
+
         <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><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 class="dropdown">
+
        <a href="https://2018.igem.org/Team:NCTU_Formosa/Team_Member" class="dropbtn_final"><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 Members</a></div>
+
                   <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;">&#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_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

Navigation Bar