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

(Created page with "<html> <script> // This is the jquery part of your template. // Try not modify any of this code too much since it makes your menu work. $(document).ready(function() {...")
 
Line 745: Line 745:
  
 
</div>
 
</div>
 +
 +
<head>
 +
  <meta charset="UTF-8">
 +
  <title>Navigation Bar</title>
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
  <script src="jQueryAssets/jquery-1.11.1.min.js"></script>
 +
  <script src="jQueryAssets/jquery.ui-1.10.4.dialog.min.js"></script>
 +
  <link href="X.css" rel="stylesheet" type="text/css">
 +
  <script src="X.js" type="text/javascript"></script>
 +
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 +
  <link href="https://fonts.googleapis.com/css?family=Aldrich" rel="stylesheet">
 +
 +
<style>
 +
 +
*{
 +
 +
}
 +
 +
body{
 +
    margin:0;
 +
    background-color: white;
 +
}
 +
 +
 +
 +
.main-container{
 +
                background:#00255A;
 +
                position:fixed;
 +
                width:100%;
 +
                height:auto;
 +
                z-index:999;
 +
}
 +
 +
 +
.dropbtn{
 +
              margin-top:3px;
 +
              font-family: Aldrich;
 +
              font-weight: bold;
 +
}
 +
 +
.dropbtn_final{
 +
              margin-top:3px;
 +
              margin-right: 15px;
 +
              font-family: Aldrich;
 +
              font-weight: bold;
 +
}
 +
 +
 +
 +
.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:white !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;
 +
                  color: white;
 +
                  padding-right: 10px;
 +
                  margin-right:10px;
 +
                  text-decoration:none !important;
 +
                }
 +
 +
.main-menu{
 +
  position:relative;
 +
  list-style-type: none !important;
 +
  margin-right:2px;
 +
  display:block;
 +
  float:right !important;
 +
  font-weight:400 !important;
 +
  font-size:15px;
 +
 +
  }
 +
 +
            /*下拉式menu*/
 +
 +
.dropdown > a:hover, .dropdown:hover .dropbtn{
 +
                                        color:white !important;
 +
                                        }
 +
 +
.dropdown-content{
 +
                  display:none;
 +
                  background:#E8E3E8;
 +
                  position:absolute;
 +
                  width:auto !important;
 +
 +
                }
 +
.dropdown-content a{
 +
                    color: white;
 +
                    padding:15px;
 +
                    text-decoration: none;
 +
                    display: block;
 +
                    text-align:left !important;
 +
                    size:1em;
 +
                    }
 +
 +
 +
.dropdown-content a:hover{
 +
                          color:#00255A;
 +
                          }
 +
 +
 +
 +
 +
 +
 +
/*menu*/
 +
@media screen and (min-width: 768px) {
 +
.main-container{
 +
                background:#00255A !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:#00255A !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:white !important;
 +
            border:solid 3px #94ecf7;
 +
            border-radius: 25px !important;
 +
            text-align:center !important;
 +
            list-style-type: none !important;
 +
            text-decoration: none;
 +
            transition-duration: 0.5s;
 +
          }
 +
.dropdown{
 +
            background:#00255A;
 +
            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;
 +
                  color:white !important;
 +
                  padding: 6px 10px !important;
 +
                  margin-bottom: 10px;
 +
                  margin-right: 15px;
 +
                  text-decoration:none !important;
 +
                }
 +
 +
            /*下拉式menu*/
 +
 +
.dropdown > a:hover, .dropdown:hover .dropbtn{
 +
                                        color:#00255A !important;
 +
                                        background: #94ecf7;
 +
                                        }
 +
 +
.dropdown-content{
 +
                  background:#00255A;
 +
                  position:absolute;
 +
                  width:100%;
 +
                  text-align:center;
 +
                  display: none;
 +
                  Z-index:100;
 +
                }
 +
.dropdown-content a{
 +
                    color: white;
 +
                    padding-top:5px;
 +
                    text-decoration: none;
 +
                    text-align:center;
 +
                    size:1.3em;
 +
                    font-family: Aldrich;
 +
                    font-weight: bold;
 +
 +
                    }
 +
 +
 +
.dropdown-content a:hover{
 +
                          color:#94ecf7;
 +
                          }
 +
 +
}
 +
 +
</style>
 +
 +
 +
</head>
 +
<body>
 +
 +
<div class="main-container">
 +
 +
    <!--隊徽-->
 +
<a href="https://2016.igem.org/Team:NCTU_Formosa">
 +
<img src="./Team_NCTU Formosa - 2016.igem.org_files/2016NCTU_FORMOSA_YA.png" class="NCTU_Formosa" width="10%">
 +
</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 href="https://2016.igem.org/Team:NCTU_Formosa/Project" class="dropbtn"><span class="menu_sign">Project</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <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>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Model">Demonstration</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safety</a></div>
 +
              </div>
 +
    </li>
 +
 +
    <li class="dropdown">
 +
        <a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship" class="dropbtn"><span class="menu_sign">Modeling</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Overview</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">Growth Model</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">Correlation Model</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Business_competition">Productivity Model</a></div>
 +
              </div>
 +
    </li>
 +
 +
    <li class="dropdown">
 +
      <a href="https://2016.igem.org/Team:NCTU_Formosa/Human_Practices" class="dropbtn"><span class="menu_sign">Experiment</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Integrated_Practices">Experiment Design</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">Experiment Results</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement">Inter Lab</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" style="display: none;">
 +
                  <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/Entrepreneurship" class="dropbtn"><span class="menu_sign">Human Practice</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Education</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">HP Silver</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">HP Gold</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Business_competition">Collaboration</a></div>
 +
              </div>
 +
    </li>
 +
 +
    <li class="dropdown">
 +
        <a href="https://2016.igem.org/Team:NCTU_Formosa#" class="dropbtn"><span class="menu_sign">Notebook</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <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_final"><span class="menu_sign">Team</span></a>
 +
              <div class="dropdown-content" style="display: none;">
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Gold">Team Members</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver">Attributions</a></div>
 +
                  <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver">Achievements</a></div>
 +
              </div>
 +
    </li>
 +
 +
</ul>
 +
 +
 +
</div>
 +
 +
</body>
 +
 +
<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>

Revision as of 15:51, 12 September 2018

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Navigation Bar