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

(Created page with "<html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content=...")
 
Line 1: Line 1:
 
<html>
 
<html>
  
−
<head>
+
<head>
−
<meta charset="utf-8">
+
    <meta charset="UTF-8">
−
<title></title>
+
    <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" />
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
−
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS&action=raw&ctype=text/css" />
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/jquery&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>
+
  
  
 +
    <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" />
  
−
</head>
+
    <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" />
−
<style>
+
−
        #sideMenu, #top_title {
+
−
            display: none;
+
−
        }
+
  
 +
    <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="js/jquery-3.3.1.min.js"></script>
 +
 +
 +
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 +
 +
 +
<script type="text/javascript" src="js/popper.min.js" ></script>
 +
-->
 +
 +
 +
    <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>
 +
 +
    <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>
 +
</head>
 +
 +
<style>
 +
    #sideMenu, #top_title, #toc, .toc {
 +
        display: none;
 +
        }
 
         #content {
 
         #content {
 
             width: 100%;
 
             width: 100%;
Line 27: Line 48:
 
         }
 
         }
  
−
        </style>
+
.fixed-top {
−
<body>
+
  top: 12px;
−
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
+
  }
−
<div class="container-fluid">
+
−
<a class="navbar-brand" href="#">SZU-China</a>
+
−
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+
−
    <span class="navbar-toggler-icon"></span>
+
−
</button>
+
  
−
<div class="collapse navbar-collapse" id="navbarSupportedContent">
+
#globalWrapper {
−
<ul class="navbar-nav mr-auto">
+
    font-size: 100%;
−
<li class="nav-item active">
+
}
−
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+
.dropdown-menu {
−
</li>
+
    width: 160px !important;
−
<li class="nav-item dropdown">
+
   
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
}
−
Team
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="#">Team Members</a>
+
−
<a class="dropdown-item" href="#">Collaborations</a>
+
  
−
</div>
 
−
</li>
 
−
<li class="nav-item dropdown">
 
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
−
Project
 
−
</a>
 
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
−
<a class="dropdown-item" href="demo.html">Description</a>
 
−
<a class="dropdown-item" href="#">Design</a>
 
−
<a class="dropdown-item" href="#">Model</a>
 
−
<a class="dropdown-item" href="#">Biobricks</a>
 
−
<a class="dropdown-item" href="#">Improve</a>
 
  
−
</div>
+
#HQ_page p{
−
</li>
+
font-size: 20px;
−
<li class="nav-item dropdown">
+
color: #393939;
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
}
−
Experiment
+
body{
−
</a>
+
padding-top: 40px;
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
}
−
<a class="dropdown-item" href="#">Demonstrate</a>
+
h2 h3 h4 {
−
<a class="dropdown-item" href="#">Results</a>
+
font-weight: bold;
−
<a class="dropdown-item" href="#">Safety</a>
+
}
−
<a class="dropdown-item" href="#">InterLab</a>
+
  
−
</div>
+
.row {
−
</li>
+
padding: 36px;
 +
}
 +
hr {
 +
width: auto;
 +
border-top: 1px solid rgba(0, 0, 0, 0.125);
 +
}
  
−
<li class="nav-item dropdown">
+
    </style>
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
−
Human Practices
+
−
</a>
+
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
−
<a class="dropdown-item" href="#">Human Practices</a>
+
−
<a class="dropdown-item" href="#">Education and Engagement</a>
+
  
−
</div>
+
<style>
−
</li>
+
.header-nav {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
padding-top: 0;
 +
padding-bottom: 5px;
 +
background-color: #020202;
 +
box-shadow: 0 0 6px 0 #333;
 +
opacity: 0.7;
 +
z-index: 1000;
 +
-webkit-transition: all 0.3s;
 +
transition: all 0.3s;
 +
text-align: center;
 +
height: 45px;
 +
}
 +
.header-nav:hover{
 +
opacity: 1;
 +
}
 +
.nav-item1{
 +
font-size: 20px;
 +
font-weight: 700;
 +
padding-right: 15px;
 +
padding-left: 15px;
  
−
<li class="nav-item dropdown">
+
}
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
.nav-sub-item{
−
Human Practices
+
font-size: 20px;
−
</a>
+
padding: 5px 10px;
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
top:0;
−
<a class="dropdown-item" href="#">Human Practices</a>
+
text-align: center
−
<a class="dropdown-item" href="#">Education and Engagement</a>
+
}
 +
.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:inherit;
 +
}
 +
.nav-1-item{
 +
font-size: 16px;
 +
font-weight: 700;
 +
padding: 0px 11px;
  
−
</div>
+
}
−
</li>
+
.nav-1-item{
 +
display:block;
 +
height: 42px;
 +
float: right;
 +
}
 +
</style>
  
−
<li class="nav-item dropdown">
 
−
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
−
Judging
 
−
</a>
 
−
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
−
<a class="dropdown-item" href="#">Judging Form</a>
 
−
<a class="dropdown-item" href="#">Awards</a>
 
  
−
</div>
 
−
</li>
 
−
</ul>
 
  
−
</div>
+
<body>
−
</div>
+
 
−
</nav>
+
    <!-- Navbar_down -->
−
+
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
−
+
<a class="navbar-brand" href="#" style="margin-top: 10.5px">
−
</body>
+
<img src="" height="20" alt="Route 66 in navbar">
 +
<span class="d-inline-block align-top ml-2">SZU-China</span>
 +
</a>
 +
<div style="height: 56px;width: 80%;float: right;text-align: right;padding-top: 14px">
 +
<a class="nav-1-item" href="#">Applet</a>
 +
<a class="nav-1-item" href="#">Human Practices</a>
 +
<a class="nav-1-item" id="nav1_4">Experiment</a>
 +
<a class="nav-1-item" id="nav1_3">Project</a>
 +
<a class="nav-1-item" id="nav1_2">Team</a>
 +
<a class="nav-1-item" id="nav1_1">Awards</a>
 +
</div>
 +
</div>
 +
<div class="header-nav" style="text-align: center;display: none">
 +
<div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;">
 +
<a class="nav-item1" id="nav1">Awards</a>
 +
<a class="nav-item1" id="nav2">Team</a>
 +
<a class="nav-item1" id="nav3">Project</a>
 +
<a class="nav-item1" id="nav4">Experiment</a>
 +
<a class="nav-item1" href="#">Human Practices</a>
 +
<a class="nav-item1" href="#">Applet</a>
 +
</div>
 +
 
 +
</div>
 +
<div class="sub_menu" id="sub1" style="display: none;left: 21%;">
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied Design</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a></div>
 +
<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>
 +
</div>
 +
<div class="sub_menu" id="sub2" style="display: none;left: 28.6%">
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Team">Team Members</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Collaborations">Collaborations</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
 +
</div>
 +
<div class="sub_menu" id="sub3" style="display: none;left: 35.6%">
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Description">Description</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Demonstrate">Demonstrate</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Improve">Improve</a></div>
 +
<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>
 +
</div>
 +
<div class="sub_menu" id="sub4" style="display: none;left: 44.3%">
 +
<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>
 +
<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();
 +
        }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+40)+"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+40)+"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+40)+"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+40)+"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+29+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+29+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+29+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+29+document.documentElement.scrollTop)+"px");
 +
    },function(){
 +
        $("#sub4").hide();
 +
    });
 +
    $("#sub4").hover(function(){
 +
        $("#sub4").show();
 +
    },function(){
 +
        $("#sub4").hide();
 +
    });
 +
</script>
 +
 
 +
 
 +
</body>
  
 
</html>
 
</html>

Revision as of 16:04, 11 October 2018