Difference between revisions of "Template:SZU-China/header"

Line 1: Line 1:
 
<html>
 
<html>
  
−
<head>
+
<head>
−
    <meta charset="UTF-8">
+
<meta charset="UTF-8">
−
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Bootstrap&action=raw&ctype=text/css" />
+
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Bootstrap&action=raw&ctype=text/css" />
  
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Fluent&action=raw&ctype=text/css" />
  
−
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Fluent&action=raw&ctype=text/css" />
+
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/FontAwesome&action=raw&ctype=text/css" />
  
−
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/FontAwesome&action=raw&ctype=text/css" />
+
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Custom&action=raw&ctype=text/css" />
  
−
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Custom&action=raw&ctype=text/css" />
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/jquery3.2.1&action=raw&ctype=text/javascript"></script>
  
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/bootstrap&action=raw&ctype=text/javascript"></script>
  
−
    <!--
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/bootstrap.bundle&action=raw&ctype=text/javascript"></script>
−
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
+
  
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/popper&action=raw&ctype=text/javascript"></script>
  
−
<script type="text/javascript" src="js/bootstrap.min.js"></script>
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/smooth-scroll&action=raw&ctype=text/javascript"></script>
  
−
+
<title></title>
−
<script type="text/javascript" src="js/popper.min.js" ></script>
+
</head>
−
-->
+
−
 
+
−
 
+
−
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/jquery3.2.1&action=raw&ctype=text/javascript"></script>
+
−
 
+
−
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/bootstrap&action=raw&ctype=text/javascript"></script>
+
−
 
+
−
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/bootstrap.bundle&action=raw&ctype=text/javascript"></script>
+
  
−
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/popper&action=raw&ctype=text/javascript"></script>
+
<style>
−
 
+
#sideMenu,
−
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/smooth-scroll&action=raw&ctype=text/javascript"></script>
+
#top_title,
−
 
+
#toc,
−
    <title></title>
+
.toc {
−
</head>
+
display: none;
−
 
+
−
<style>
+
−
    #sideMenu, #top_title, #toc, .toc {
+
−
        display: none;
+
−
        }
+
−
        #content {
+
−
            width: 100%;
+
−
            margin: 0px;
+
−
            padding: 0px;
+
−
            background: #FFF;
+
−
        }
+
−
 
+
−
 
+
−
#globalWrapper {
+
−
    font-size: 100%;
+
−
}
+
−
.dropdown-menu {
+
−
    width: 160px !important;
+
−
   
+
 
}
 
}
−
 
+
−
 
+
#content {
−
#HQ_page p{
+
width: 100%;
−
font-size: 20px;
+
margin: 0px;
−
color: #393939;
+
padding: 0px;
−
padding-top: -20px;
+
background: #FFF;
−
}
+
−
 
+
−
body{
+
−
padding-top: -20px;
+
−
}
+
−
 
+
−
h2 h3 h4 {
+
−
font-weight: bold;
+
 
}
 
}
−
 
+
−
.row {
+
#globalWrapper {
 +
font-size: 100%;
 +
}
 +
 +
.dropdown-menu {
 +
width: 160px !important;
 +
}
 +
 +
#HQ_page p {
 +
font-size: 20px;
 +
color: #393939;
 +
padding-top: -20px;
 +
}
 +
 +
body {
 +
padding-top: -20px;
 +
}
 +
 +
.row {
 
padding: 36px;
 
padding: 36px;
 
}
 
}
−
hr {
+
 +
hr {
 
width: auto;
 
width: auto;
 
border-top: 1px solid rgba(0, 0, 0, 0.125);
 
border-top: 1px solid rgba(0, 0, 0, 0.125);
 
}
 
}
 +
</style>
  
−
    </style>
+
<style>
−
 
+
.header-nav {
−
<style>
+
position: fixed;
−
    .header-nav {
+
top: 16px;
−
position: fixed;
+
left: 0;
−
top: 16px;
+
width: 100%;
−
left: 0;
+
padding-top: 0;
−
width: 100%;
+
padding-bottom: 5px;
−
padding-top: 0;
+
background-color: #020202;
−
padding-bottom: 5px;
+
box-shadow: 0 0 6px 0 #333;
−
background-color: #020202;
+
opacity: 0.7;
−
box-shadow: 0 0 6px 0 #333;
+
z-index: 1000;
−
opacity: 0.7;
+
-webkit-transition: all 0.3s;
−
z-index: 1000;
+
transition: all 0.3s;
−
-webkit-transition: all 0.3s;
+
text-align: center;
−
transition: all 0.3s;
+
height: 45px;
−
text-align: center;
+
}
−
height: 45px;
+
−
}
+
−
.header-nav:hover{
+
−
opacity: 1;
+
−
}
+
−
.nav-item1{
+
−
font-size: 20px;
+
−
font-weight: 700;
+
−
padding-right: 15px;
+
−
padding-left: 15px;
+
−
 
+
−
}
+
−
.nav-sub-item{
+
−
font-size: 20px;
+
−
padding: 5px 10px;
+
−
top:0;
+
−
text-align: center
+
−
}
+
−
.sub_menu{
+
−
position: absolute;
+
−
z-index: 1000;
+
−
float: left;
+
−
min-width: 160px;
+
−
top: 39px;
+
−
list-style: none;
+
−
font-size: 12px;
+
−
background-color: #464646;
+
−
border: 1px solid #cccccc;
+
−
color: #fff;
+
−
border: 1px solid rgba(0, 0, 0, 0.15);
+
−
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+
−
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+
−
-webkit-background-clip: padding-box;
+
−
background-clip: padding-box;
+
−
}
+
−
.nav-sub-item:hover{
+
−
background-color: rgb(171,171,171);
+
−
}
+
−
.nav-sub-item a{
+
−
text-decoration: none;
+
−
color: #FFFFFF !important;
+
 
 
−
}
+
.header-nav:hover {
−
.nav-1-item{
+
opacity: 1;
−
font-size: 16px;
+
}
−
font-weight: 700;
+
−
padding: 0px 11px;
+
.nav-item1 {
−
 
+
font-size: 20px;
−
}
+
font-weight: 700;
−
.nav-1-item{
+
padding-right: 15px;
−
display:block;
+
padding-left: 15px;
−
height: 42px;
+
}
−
float: right;
+
−
}
+
.nav-sub-item {
−
a:not([href]):not([tabindex]) {
+
font-size: 20px;
−
    color: #fff;
+
padding: 5px 10px;
−
  }
+
top: 0;
−
#mw-content-text > div:nth-child(2) > div > a:nth-child(2){
+
text-align: center
−
color: #fff !important;  
+
}
−
}
+
−
#mw-content-text > div:nth-child(2) > div > a:nth-child(1){
+
.sub_menu {
−
color: #fff !important;  
+
position: absolute;
−
}
+
z-index: 1000;
−
#header_list > a:nth-child(5){
+
float: left;
−
color: #fff !important;  
+
min-width: 160px;
−
}
+
top: 39px;
−
#header_list > a:nth-child(6){
+
list-style: none;
−
color: #fff !important;  
+
font-size: 12px;
−
}
+
background-color: #464646;
−
#mw-content-text > div:nth-child(2) > a > span{
+
border: 1px solid #cccccc;
−
color: #fff !important;  
+
color: #fff;
−
}
+
border: 1px solid rgba(0, 0, 0, 0.15);
−
#content{
+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
−
margin-top: -18px;
+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
−
}
+
-webkit-background-clip: padding-box;
−
 
+
background-clip: padding-box;
−
#bodyContent
+
}
−
{
+
−
margin-top: -18px;
+
.nav-sub-item:hover {
−
}
+
background-color: rgb(171, 171, 171);
−
 
+
}
−
 
+
−
.animated {
+
.nav-sub-item a {
−
    -webkit-animation-duration: 1s;
+
text-decoration: none;
−
    animation-duration: 1s;
+
color: #FFFFFF !important;
−
    -webkit-animation-fill-mode: both;
+
}
−
    animation-fill-mode: both;
+
−
}
+
.nav-1-item {
−
.bounce {
+
font-size: 16px;
−
    -webkit-animation-name: bounce;
+
font-weight: 700;
−
    animation-name: bounce;
+
padding: 0px 11px;
−
    -webkit-transform-origin: center bottom;
+
}
−
    transform-origin: center bottom;
+
−
}
+
.nav-1-item {
−
@keyframes bounce {
+
display: block;
−
    0%, 20%, 53%, 80%, 100% {
+
height: 42px;
−
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
float: right;
−
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
}
−
        -webkit-transform: translate3d(0,0,0);
+
−
        transform: translate3d(0,0,0);
+
a:not([href]):not([tabindex]) {
−
    }
+
color: #fff;
−
    40%, 43% {
+
}
−
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
−
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
#mw-content-text>div:nth-child(2)>div>a:nth-child(2) {
−
        -webkit-transform: translate3d(0, -30px, 0);
+
color: #fff !important;
−
        transform: translate3d(0, -30px, 0);
+
}
−
    }
+
−
    70% {
+
#mw-content-text>div:nth-child(2)>div>a:nth-child(1) {
−
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
color: #fff !important;
−
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
}
−
        -webkit-transform: translate3d(0, -15px, 0);
+
−
        transform: translate3d(0, -15px, 0);
+
#header_list>a:nth-child(5) {
−
    }
+
color: #fff !important;
−
    90% {
+
}
−
        -webkit-transform: translate3d(0,-4px,0);
+
−
        transform: translate3d(0,-4px,0);
+
#header_list>a:nth-child(6) {
−
    }
+
color: #fff !important;
−
}
+
}
−
 
+
−
 
+
#mw-content-text>div:nth-child(2)>a>span {
−
</style>
+
color: #fff !important;
−
 
+
}
−
 
+
−
<body>
+
−
 
+
−
    <!-- Navbar_down -->
+
#content {
−
    <div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
+
margin-top: -18px;
−
        <a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
+
}
−
            <img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
+
−
            <span class="d-inline-block ml-2">SZU-China</span>
+
#bodyContent {
−
        </a>
+
margin-top: -18px;
−
        <div style="height: 56px;width: 80%;float: right;text-align: right;padding-top: 14px">
+
}
−
            <a class="nav-1-item" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
+
−
            <a class="nav-1-item" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
+
.animated {
−
            <a class="nav-1-item" id="nav1_4">Experiment</a>
+
-webkit-animation-duration: 1s;
−
            <a class="nav-1-item" id="nav1_3">Project</a>
+
animation-duration: 1s;
−
            <a class="nav-1-item" id="nav1_2">Team</a>
+
-webkit-animation-fill-mode: both;
−
            <a class="nav-1-item" id="nav1_1">Awards</a>
+
animation-fill-mode: both;
−
        </div>
+
}
−
    </div>
+
−
    <div class="header-nav" style="text-align: center;display: none">
+
.bounce {
−
        <div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;" id="header_list">
+
-webkit-animation-name: bounce;
−
    <a class="nav-item1" id="nav0" style="color: white;" href="https://2018.igem.org/Team:SZU-China">Home</a>
+
animation-name: bounce;
−
 
+
-webkit-transform-origin: center bottom;
−
            <a class="nav-item1" id="nav1">Awards</a>
+
transform-origin: center bottom;
−
            <a class="nav-item1" id="nav2">Team</a>
+
}
−
            <a class="nav-item1" id="nav3">Project</a>
+
−
            <a class="nav-item1" id="nav4">Experiment</a>
+
@keyframes bounce {
−
            <a class="nav-item1" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
+
0%,
−
            <a class="nav-item1" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
+
20%,
−
        </div>
+
53%,
−
    </div>
+
80%,
−
 
+
100% {
−
    <div class="sub_menu" id="sub1" style="display: none;left: 21%;">
+
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a></div>
+
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied Design</a></div>
+
-webkit-transform: translate3d(0, 0, 0);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a></div>
+
transform: translate3d(0, 0, 0);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Public Engagement</a></div>
+
}
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
+
40%,
−
    </div>
+
43% {
−
    <div class="sub_menu" id="sub2" style="display: none;left: 28.6%">
+
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Team">Team Members</a></div>
+
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Collaborations">Collaborations</a></div>
+
-webkit-transform: translate3d(0, -30px, 0);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
+
transform: translate3d(0, -30px, 0);
−
    </div>
+
}
−
    <div class="sub_menu" id="sub3" style="display: none;left: 35.6%">
+
70% {
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Description">Description</a></div>
+
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Demonstrate">Demonstrate</a></div>
+
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
+
-webkit-transform: translate3d(0, -15px, 0);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Improve">Improve</a></div>
+
transform: translate3d(0, -15px, 0);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Parts">Parts</a></div>
+
}
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Safety">Safety</a></div>
+
90% {
−
    </div>
+
-webkit-transform: translate3d(0, -4px, 0);
−
    <div class="sub_menu" id="sub4" style="display: none;left: 44.3%">
+
transform: translate3d(0, -4px, 0);
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Design">Design</a></div>
+
}
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Procedure">Procedure</a></div>
+
}
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Results">Results</a></div>
+
</style>
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/InterLab">InterLab</a></div>
+
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Notebook">Notebook</a></div>
+
−
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Protocol">Protocol</a></div>
+
−
    </div>
+
−
    <!-- Navbar_down -->
+
−
 
+
−
    <script type="text/javascript">
+
−
        window.onscroll = function () {
+
−
            var t = document.documentElement.scrollTop || document.body.scrollTop;
+
−
            if (t >= 56) {
+
−
                $(".header-nav").show();
+
−
                $("#header_list").addClass("animated animation-done bounce");
+
−
            } else {
+
−
                $(".header-nav").hide();
+
−
            }
+
−
            if (t >= 600) {
+
−
                $("#p1").removeClass("in").addClass("out");
+
−
                $("#ti").show();
+
−
            } else {
+
−
                $("#p1").removeClass("out").addClass("in");
+
−
                $("#ti").hide();
+
−
            }
+
−
        };
+
−
 
+
−
       
+
−
 
+
  
 +
<body>
  
−
        $("#nav1_1").hover(function () {
+
<!-- Navbar_down -->
−
            $("#sub1").show();
+
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
−
            $("#sub1").attr("style", "left:" + document.getElementById("nav1_1").getBoundingClientRect().left +
+
<a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
−
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
+
<img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
−
        }, function () {
+
<span class="d-inline-block ml-2">SZU-China</span>
−
            $("#sub1").hide();
+
</a>
−
        });
+
<div style="height: 56px;width: 80%;float: right;text-align: right;padding-top: 14px">
−
        $("#nav1_2").hover(function () {
+
<a class="nav-1-item" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
−
            $("#sub2").show();
+
<a class="nav-1-item" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
−
            $("#sub2").attr("style", "left:" + document.getElementById("nav1_2").getBoundingClientRect().left +
+
<a class="nav-1-item" id="nav1_4">Experiment</a>
−
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
+
<a class="nav-1-item" id="nav1_3">Project</a>
−
        }, function () {
+
<a class="nav-1-item" id="nav1_2">Team</a>
−
            $("#sub2").hide();
+
<a class="nav-1-item" id="nav1_1">Awards</a>
−
        });
+
</div>
−
        $("#nav1_3").hover(function () {
+
</div>
−
            $("#sub3").show();
+
<div class="header-nav" style="text-align: center;display: none">
−
            $("#sub3").attr("style", "left:" + document.getElementById("nav1_3").getBoundingClientRect().left +
+
<div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;" id="header_list">
−
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
+
<a class="nav-item1" id="nav0" style="color: white;" href="https://2018.igem.org/Team:SZU-China">Home</a>
−
        }, function () {
+
<a class="nav-item1" id="nav1">Awards</a>
−
            $("#sub3").hide();
+
<a class="nav-item1" id="nav2">Team</a>
−
        });
+
<a class="nav-item1" id="nav3">Project</a>
−
        $("#nav1_4").hover(function () {
+
<a class="nav-item1" id="nav4">Experiment</a>
−
            $("#sub4").show();
+
<a class="nav-item1" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
−
            $("#sub4").attr("style", "left:" + document.getElementById("nav1_4").getBoundingClientRect().left +
+
<a class="nav-item1" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
−
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
+
</div>
−
        }, function () {
+
</div>
−
            $("#sub4").hide();
+
−
        });
+
  
−
        $("#nav1").hover(function () {
+
<div class="sub_menu" id="sub1" style="display: none;left: 21%;">
−
            $("#sub1").show();
+
<div class="nav-sub-item">
−
            $("#sub1").attr("style", "left:" + document.getElementById("nav1").getBoundingClientRect().left +
+
<a href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a>
−
                "px;top:" + (document.getElementById("nav1").getBoundingClientRect().top + 11 + document.documentElement
+
</div>
−
                    .scrollTop) + "px");
+
<div class="nav-sub-item">
−
        }, function () {
+
<a href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied Design</a>
−
            $("#sub1").hide();
+
</div>
−
        });
+
<div class="nav-sub-item">
−
        $("#sub1").hover(function () {
+
<a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
−
            $("#sub1").show();
+
</div>
−
        }, function () {
+
<div class="nav-sub-item">
−
            $("#sub1").hide();
+
<a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Public Engagement</a>
−
        });
+
</div>
−
        $("#nav2").hover(function () {
+
<div class="nav-sub-item">
−
            $("#sub2").show();
+
<a href="https://2018.igem.org/Team:SZU-China/Model">Model</a>
−
            $("#sub2").attr("style", "left:" + document.getElementById("nav2").getBoundingClientRect().left +
+
</div>
−
                "px;top:" + (document.getElementById("nav2").getBoundingClientRect().top + 11 + document.documentElement
+
</div>
−
                    .scrollTop) + "px");
+
<div class="sub_menu" id="sub2" style="display: none;left: 28.6%">
−
        }, function () {
+
<div class="nav-sub-item">
−
            $("#sub2").hide();
+
<a href="https://2018.igem.org/Team:SZU-China/Team">Team Members</a>
−
        });
+
</div>
−
        $("#sub2").hover(function () {
+
<div class="nav-sub-item">
−
            $("#sub2").show();
+
<a href="https://2018.igem.org/Team:SZU-China/Collaborations">Collaborations</a>
−
        }, function () {
+
</div>
−
            $("#sub2").hide();
+
<div class="nav-sub-item">
−
        });
+
<a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a>
−
        $("#nav3").hover(function () {
+
</div>
−
            $("#sub3").show();
+
</div>
−
            $("#sub3").attr("style", "left:" + document.getElementById("nav3").getBoundingClientRect().left +
+
<div class="sub_menu" id="sub3" style="display: none;left: 35.6%">
−
                "px;top:" + (document.getElementById("nav3").getBoundingClientRect().top + 11 + document.documentElement
+
<div class="nav-sub-item">
−
                    .scrollTop) + "px");
+
<a href="https://2018.igem.org/Team:SZU-China/Description">Description</a>
−
        }, function () {
+
</div>
−
            $("#sub3").hide();
+
<div class="nav-sub-item">
−
        });
+
<a href="https://2018.igem.org/Team:SZU-China/Demonstrate">Demonstrate</a>
−
        $("#sub3").hover(function () {
+
</div>
−
            $("#sub3").show();
+
<div class="nav-sub-item">
−
        }, function () {
+
<a href="https://2018.igem.org/Team:SZU-China/Model">Model</a>
−
            $("#sub3").hide();
+
</div>
−
        });
+
<div class="nav-sub-item">
−
        $("#nav4").hover(function () {
+
<a href="https://2018.igem.org/Team:SZU-China/Improve">Improve</a>
−
            $("#sub4").show();
+
</div>
−
            $("#sub4").attr("style", "left:" + document.getElementById("nav4").getBoundingClientRect().left +
+
<div class="nav-sub-item">
−
                "px;top:" + (document.getElementById("nav4").getBoundingClientRect().top + 11 + document.documentElement
+
<a href="https://2018.igem.org/Team:SZU-China/Parts">Parts</a>
−
                    .scrollTop) + "px");
+
</div>
−
        }, function () {
+
<div class="nav-sub-item">
−
            $("#sub4").hide();
+
<a href="https://2018.igem.org/Team:SZU-China/Safety">Safety</a>
−
        });
+
</div>
−
        $("#sub4").hover(function () {
+
</div>
−
            $("#sub4").show();
+
<div class="sub_menu" id="sub4" style="display: none;left: 44.3%">
−
        }, function () {
+
<div class="nav-sub-item">
−
            $("#sub4").hide();
+
<a href="https://2018.igem.org/Team:SZU-China/Design">Design</a>
−
        });
+
</div>
−
    </script>
+
<div class="nav-sub-item">
 +
<a href="https://2018.igem.org/Team:SZU-China/Procedure">Procedure</a>
 +
</div>
 +
<div class="nav-sub-item">
 +
<a href="https://2018.igem.org/Team:SZU-China/Results">Results</a>
 +
</div>
 +
<div class="nav-sub-item">
 +
<a href="https://2018.igem.org/Team:SZU-China/InterLab">InterLab</a>
 +
</div>
 +
<div class="nav-sub-item">
 +
<a href="https://2018.igem.org/Team:SZU-China/Notebook">Notebook</a>
 +
</div>
 +
<div class="nav-sub-item">
 +
<a href="https://2018.igem.org/Team:SZU-China/Protocol">Protocol</a>
 +
</div>
 +
</div>
 +
<!-- Navbar_down -->
  
 +
<script type="text/javascript">
 +
window.onscroll = function() {
 +
var t = document.documentElement.scrollTop || document.body.scrollTop;
 +
if(t >= 56) {
 +
$(".header-nav").show();
 +
$("#header_list").addClass("animated animation-done bounce");
 +
} else {
 +
$(".header-nav").hide();
 +
}
 +
if(t >= 600) {
 +
$("#p1").removeClass("in").addClass("out");
 +
$("#ti").show();
 +
} else {
 +
$("#p1").removeClass("out").addClass("in");
 +
$("#ti").hide();
 +
}
 +
};
  
 +
$("#nav1_1").hover(function() {
 +
$("#sub1").show();
 +
$("#sub1").attr("style", "left:" + document.getElementById("nav1_1").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
}, function() {
 +
$("#sub1").hide();
 +
});
 +
$("#nav1_2").hover(function() {
 +
$("#sub2").show();
 +
$("#sub2").attr("style", "left:" + document.getElementById("nav1_2").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
}, function() {
 +
$("#sub2").hide();
 +
});
 +
$("#nav1_3").hover(function() {
 +
$("#sub3").show();
 +
$("#sub3").attr("style", "left:" + document.getElementById("nav1_3").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
}, function() {
 +
$("#sub3").hide();
 +
});
 +
$("#nav1_4").hover(function() {
 +
$("#sub4").show();
 +
$("#sub4").attr("style", "left:" + document.getElementById("nav1_4").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
}, function() {
 +
$("#sub4").hide();
 +
});
  
 +
$("#nav1").hover(function() {
 +
$("#sub1").show();
 +
$("#sub1").attr("style", "left:" + document.getElementById("nav1").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav1").getBoundingClientRect().top + 11 + document.documentElement
 +
.scrollTop) + "px");
 +
}, function() {
 +
$("#sub1").hide();
 +
});
 +
$("#sub1").hover(function() {
 +
$("#sub1").show();
 +
}, function() {
 +
$("#sub1").hide();
 +
});
 +
$("#nav2").hover(function() {
 +
$("#sub2").show();
 +
$("#sub2").attr("style", "left:" + document.getElementById("nav2").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav2").getBoundingClientRect().top + 11 + document.documentElement
 +
.scrollTop) + "px");
 +
}, function() {
 +
$("#sub2").hide();
 +
});
 +
$("#sub2").hover(function() {
 +
$("#sub2").show();
 +
}, function() {
 +
$("#sub2").hide();
 +
});
 +
$("#nav3").hover(function() {
 +
$("#sub3").show();
 +
$("#sub3").attr("style", "left:" + document.getElementById("nav3").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav3").getBoundingClientRect().top + 11 + document.documentElement
 +
.scrollTop) + "px");
 +
}, function() {
 +
$("#sub3").hide();
 +
});
 +
$("#sub3").hover(function() {
 +
$("#sub3").show();
 +
}, function() {
 +
$("#sub3").hide();
 +
});
 +
$("#nav4").hover(function() {
 +
$("#sub4").show();
 +
$("#sub4").attr("style", "left:" + document.getElementById("nav4").getBoundingClientRect().left +
 +
"px;top:" + (document.getElementById("nav4").getBoundingClientRect().top + 11 + document.documentElement
 +
.scrollTop) + "px");
 +
}, function() {
 +
$("#sub4").hide();
 +
});
 +
$("#sub4").hover(function() {
 +
$("#sub4").show();
 +
}, function() {
 +
$("#sub4").hide();
 +
});
 +
</script>
  
−
</body>
+
</body>
  
 
</html>
 
</html>

Revision as of 17:58, 17 October 2018