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

Line 1: Line 1:
−
 
 
<html>
 
<html>
  
Line 84: Line 83:
  
 
<style>
 
<style>
−
.header-nav {
+
    .header-nav {
 
position: fixed;
 
position: fixed;
 
top: 16px;
 
top: 16px;
Line 138: Line 137:
 
.nav-sub-item a{
 
.nav-sub-item a{
 
text-decoration: none;
 
text-decoration: none;
−
color: #FFFFFF; !important
+
color: #FFFFFF !important;
 
 
 
}
 
}
Line 212: Line 211:
  
 
     <!-- Navbar_down -->
 
     <!-- Navbar_down -->
−
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
+
    <div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
−
<a class="navbar-brand" href="#" >
+
        <a class="navbar-brand" href="#">
−
<img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
+
            <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>
+
            <span class="d-inline-block ml-2">SZU-China</span>
−
</a>
+
        </a>
−
<div style="height: 56px;width: 80%;float: right;text-align: right;padding-top: 14px">
+
        <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="#">Applet</a>
−
<a class="nav-1-item" href="#">Human Practices</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_4">Experiment</a>
−
<a class="nav-1-item" id="nav1_3">Project</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_2">Team</a>
−
<a class="nav-1-item" id="nav1_1">Awards</a>
+
            <a class="nav-1-item" id="nav1_1">Awards</a>
−
</div>
+
        </div>
−
</div>
+
    </div>
−
<div class="header-nav" style="text-align: center;display: none">
+
    <div class="header-nav" style="text-align: center;display: none">
−
<div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;">
+
        <div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;" id="header_list">
−
<a class="nav-item1" id="nav1">Awards</a>
+
            <a class="nav-item1" id="nav1">Awards</ a>
−
<a class="nav-item1" id="nav2">Team</a>
+
                <a class="nav-item1" id="nav2">Team</ a>
−
<a class="nav-item1" id="nav3">Project</a>
+
                    <a class="nav-item1" id="nav3">Project</ a>
−
<a class="nav-item1" id="nav4">Experiment</a>
+
                        <a class="nav-item1" id="nav4">Experiment</ a>
−
<a class="nav-item1" href="#">Human Practices</a>
+
                            <a class="nav-item1">Human Practices</ a>
−
<a class="nav-item1" href="#">Applet</a>
+
                                <a class="nav-item1">Applet</ a>
−
</div>
+
        </div>
 +
    </div>
  
−
</div>
+
    <div class="sub_menu" id="sub1" style="display: none;left: 21%;">
−
<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/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/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/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/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 class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
+
    </div>
−
</div>
+
    <div class="sub_menu" id="sub2" style="display: none;left: 28.6%">
−
<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/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/Collaborations">Collaborations</a></div>
+
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
−
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
+
    </div>
−
</div>
+
    <div class="sub_menu" id="sub3" style="display: none;left: 35.6%">
−
<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/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/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/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/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/Parts">Parts</a></div>
+
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Safety">Safety</a></div>
−
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Safety">Safety</a></div>
+
    </div>
−
</div>
+
    <div class="sub_menu" id="sub4" style="display: none;left: 44.3%">
−
<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/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/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/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/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/Notebook">Notebook</a></div>
+
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Protocol">Protocol</a></div>
−
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Protocol">Protocol</a></div>
+
    </div>
−
</div>
+
    <!-- Navbar_down -->
−
<!-- Navbar_down -->
+
  
−
<script type="text/javascript">
+
    <script type="text/javascript">
−
    window.onscroll= function(){
+
        window.onscroll = function () {
−
        var t = document.documentElement.scrollTop||document.body.scrollTop;
+
            var t = document.documentElement.scrollTop || document.body.scrollTop;
−
        if(t>=56){
+
            if (t >= 56) {
−
            $(".header-nav").show();
+
                $(".header-nav").show();
−
        }else{
+
                $("#header_list").addClass("animated animation-done bounce");
−
            $(".header-nav").hide();
+
            } else {
−
        }
+
                $(".header-nav").hide();
−
        if(t>=600){
+
            }
−
            $("#p1").removeClass("in").addClass("out");
+
            if (t >= 600) {
−
            $("#ti").show();
+
                $("#p1").removeClass("in").addClass("out");
−
        }else{
+
                $("#ti").show();
−
            $("#p1").removeClass("out").addClass("in");
+
            } else {
−
            $("#ti").hide();
+
                $("#p1").removeClass("out").addClass("in");
−
        }
+
                $("#ti").hide();
−
    };
+
            }
 +
        };
  
−
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();
+
−
}
+
  
  
  
−
    $("#nav1_1").hover(function(){
+
        $("#nav1_1").hover(function () {
−
        $("#sub1").show();
+
            $("#sub1").show();
−
        $("#sub1").attr("style","left:" + document.getElementById("nav1_1").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav1_1").getBoundingClientRect().top+22)+"px");
+
            $("#sub1").attr("style", "left:" + document.getElementById("nav1_1").getBoundingClientRect().left +
−
    },function(){
+
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
−
        $("#sub1").hide();
+
        }, function () {
−
    });
+
            $("#sub1").hide();
−
    $("#nav1_2").hover(function(){
+
        });
−
        $("#sub2").show();
+
        $("#nav1_2").hover(function () {
−
        $("#sub2").attr("style","left:" + document.getElementById("nav1_2").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav1_1").getBoundingClientRect().top+22)+"px");
+
            $("#sub2").show();
−
    },function(){
+
            $("#sub2").attr("style", "left:" + document.getElementById("nav1_2").getBoundingClientRect().left +
−
        $("#sub2").hide();
+
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
−
    });
+
        }, function () {
−
    $("#nav1_3").hover(function(){
+
            $("#sub2").hide();
−
        $("#sub3").show();
+
        });
−
        $("#sub3").attr("style","left:" + document.getElementById("nav1_3").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav1_1").getBoundingClientRect().top+22)+"px");
+
        $("#nav1_3").hover(function () {
−
    },function(){
+
            $("#sub3").show();
−
        $("#sub3").hide();
+
            $("#sub3").attr("style", "left:" + document.getElementById("nav1_3").getBoundingClientRect().left +
−
    });
+
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
−
    $("#nav1_4").hover(function(){
+
        }, function () {
−
        $("#sub4").show();
+
            $("#sub3").hide();
−
        $("#sub4").attr("style","left:" + document.getElementById("nav1_4").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav1_1").getBoundingClientRect().top+22)+"px");
+
        });
−
    },function(){
+
        $("#nav1_4").hover(function () {
−
        $("#sub4").hide();
+
            $("#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(){
+
        $("#nav1").hover(function () {
−
        $("#sub1").show();
+
            $("#sub1").show();
−
        $("#sub1").attr("style","left:" + document.getElementById("nav1").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav1").getBoundingClientRect().top+11+document.documentElement.scrollTop)+"px");
+
            $("#sub1").attr("style", "left:" + document.getElementById("nav1").getBoundingClientRect().left +
−
    },function(){
+
                "px;top:" + (document.getElementById("nav1").getBoundingClientRect().top + 11 + document.documentElement
−
        $("#sub1").hide();
+
                    .scrollTop) + "px");
−
    });
+
        }, function () {
−
    $("#sub1").hover(function(){
+
            $("#sub1").hide();
−
        $("#sub1").show();
+
        });
−
    },function(){
+
        $("#sub1").hover(function () {
−
        $("#sub1").hide();
+
            $("#sub1").show();
−
    });
+
        }, function () {
−
    $("#nav2").hover(function(){
+
            $("#sub1").hide();
−
        $("#sub2").show();
+
        });
−
        $("#sub2").attr("style","left:" + document.getElementById("nav2").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav2").getBoundingClientRect().top+11+document.documentElement.scrollTop)+"px");
+
        $("#nav2").hover(function () {
−
    },function(){
+
            $("#sub2").show();
−
        $("#sub2").hide();
+
            $("#sub2").attr("style", "left:" + document.getElementById("nav2").getBoundingClientRect().left +
−
    });
+
                "px;top:" + (document.getElementById("nav2").getBoundingClientRect().top + 11 + document.documentElement
−
    $("#sub2").hover(function(){
+
                    .scrollTop) + "px");
−
        $("#sub2").show();
+
        }, function () {
−
    },function(){
+
            $("#sub2").hide();
−
        $("#sub2").hide();
+
        });
−
    });
+
        $("#sub2").hover(function () {
−
    $("#nav3").hover(function(){
+
            $("#sub2").show();
−
        $("#sub3").show();
+
        }, function () {
−
        $("#sub3").attr("style","left:" + document.getElementById("nav3").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav3").getBoundingClientRect().top+11+document.documentElement.scrollTop)+"px");
+
            $("#sub2").hide();
−
    },function(){
+
        });
−
        $("#sub3").hide();
+
        $("#nav3").hover(function () {
−
    });
+
            $("#sub3").show();
−
    $("#sub3").hover(function(){
+
            $("#sub3").attr("style", "left:" + document.getElementById("nav3").getBoundingClientRect().left +
−
        $("#sub3").show();
+
                "px;top:" + (document.getElementById("nav3").getBoundingClientRect().top + 11 + document.documentElement
−
    },function(){
+
                    .scrollTop) + "px");
−
        $("#sub3").hide();
+
        }, function () {
−
    });
+
            $("#sub3").hide();
−
    $("#nav4").hover(function(){
+
        });
−
        $("#sub4").show();
+
        $("#sub3").hover(function () {
−
        $("#sub4").attr("style","left:" + document.getElementById("nav4").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav4").getBoundingClientRect().top+11+document.documentElement.scrollTop)+"px");
+
            $("#sub3").show();
−
    },function(){
+
        }, function () {
−
        $("#sub4").hide();
+
            $("#sub3").hide();
−
    });
+
        });
−
    $("#sub4").hover(function(){
+
        $("#nav4").hover(function () {
−
        $("#sub4").show();
+
            $("#sub4").show();
−
    },function(){
+
            $("#sub4").attr("style", "left:" + document.getElementById("nav4").getBoundingClientRect().left +
−
        $("#sub4").hide();
+
                "px;top:" + (document.getElementById("nav4").getBoundingClientRect().top + 11 + document.documentElement
−
    });
+
                    .scrollTop) + "px");
−
</script>
+
        }, function () {
 +
            $("#sub4").hide();
 +
        });
 +
        $("#sub4").hover(function () {
 +
            $("#sub4").show();
 +
        }, function () {
 +
            $("#sub4").hide();
 +
        });
 +
    </script>
  
  

Revision as of 18:14, 12 October 2018