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

Line 85: Line 85:
 
     .header-nav {
 
     .header-nav {
 
position: fixed;
 
position: fixed;
−
top: 16px;
 
 
left: 0;
 
left: 0;
 
width: 100%;
 
width: 100%;
Line 227: Line 226:
 
<body>
 
<body>
  
−
    <!-- Navbar_down -->
+
  <!-- Navbar_down -->
−
    <div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
+
<div style="height: 16px;width: 100%"></div>
−
        <a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
+
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;">
−
            <img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
+
<a class="navbar-brand" href="#" style="margin-top: 10.5px">
−
            <span class="d-inline-block ml-2">SZU-China</span>
+
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="20" alt="Route 66 in navbar">
−
        </a>
+
<span class="d-inline-block align-top ml-2">Navbar</span>
−
        <div style="height: 56px;width: 80%;float: right;text-align: right;padding-top: 14px">
+
</a>
−
            <a class="nav-1-item" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
+
<div style="height: 56px;width: 60%;float: right;text-align: right;padding-top: 14px">
−
            <a class="nav-1-item" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
+
<a class="nav-1-item">Applet</a>
−
            <a class="nav-1-item" id="nav1_4">Experiment</a>
+
<a class="nav-1-item">Human Practices</a>
−
            <a class="nav-1-item" id="nav1_3">Project</a>
+
<a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a>
−
            <a class="nav-1-item" id="nav1_2">Team</a>
+
<a class="nav-1-item father" id="nav1_3" data-id="3">Project</a>
−
            <a class="nav-1-item" id="nav1_1">Awards</a>
+
<a class="nav-1-item father" id="nav1_2" data-id="2">Team</a>
−
        </div>
+
<a class="nav-1-item father" id="nav1_1" data-id="1">Awards</a>
 +
</div>
 +
    <div class="sub_menu son" 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>
−
     <div class="header-nav" style="text-align: center;display: none">
+
     <div class="sub_menu son" id="sub2" style="display: none;left: 28.6%">
−
        <div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;" id="header_list">
+
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Team">Team Members</a></div>
−
            <a class="nav-item1" id="nav1">Awards</a>
+
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Collaborations">Collaborations</a></div>
−
            <a class="nav-item1" id="nav2">Team</a>
+
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
−
            <a class="nav-item1" id="nav3">Project</a>
+
−
            <a class="nav-item1" id="nav4">Experiment</a>
+
−
            <a class="nav-item1" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
+
−
            <a class="nav-item1" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
+
−
        </div>
+
 
     </div>
 
     </div>
−
 
+
    <div class="sub_menu son" id="sub3" style="display: none;left: 35.6%">
−
     <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/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 son" 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>
 +
</div>
 +
<div class="header-nav" style="text-align: center;display: none">
 +
<div style="width: 100%;height: 30px;margin-top: 10px;text-align: center;" id="header_list">
 +
<a class="nav-item1 nav-father" id="nav1" data-id="1">Awards</a>
 +
<a class="nav-item1 nav-father" id="nav2" data-id="2">Team</a>
 +
<a class="nav-item1 nav-father" id="nav3" data-id="3">Project</a>
 +
<a class="nav-item1 nav-father" id="nav4" data-id="4">Experiment</a>
 +
<a class="nav-item1">Human Practices</a>
 +
<a class="nav-item1">Applet</a>
 +
</div>
 +
     <div class="sub_menu nav_son" id="header_nav1" 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>
Line 260: Line 286:
 
         <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 nav_son" id="header_nav2" 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 nav_son" id="header_nav3" 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>
Line 273: Line 299:
 
         <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 nav_son" id="header_nav4" 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>
Line 281: Line 307:
 
         <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 -->
+
</div>
 +
<script>
 +
     for(i=1;i<=4;i++){
 +
        $("#sub"+i).attr("style","left:" + document.getElementById("nav1_"+i).getBoundingClientRect().left+"px;display:none");
 +
    }
 +
    $(".nav-father").hover(function(){
 +
        $("#header_nav"+$(this).data("id")).show();
 +
        $("#header_nav"+$(this).data("id")).attr("style","left:" + document.getElementById("nav"+$(this).data("id")).getBoundingClientRect().left+"px;");
 +
    },function(){
 +
        $("#header_nav"+$(this).data("id")).hide();
 +
    });
 +
    $(".nav_son").hover(function(){
 +
        $(this).show();
 +
    },function(){
 +
        $(this).hide();
 +
    });
 +
    $(".father").hover(function(){
 +
        $("#sub"+$(this).data("id")).show();
 +
    },function(){
 +
        $("#sub"+$(this).data("id")).hide();
 +
    });
 +
    $(".son").hover(function(){
 +
        $(this).show();
 +
    },function(){
 +
        $(this).hide();
 +
    });
 +
</script>
 +
<!-- Navbar_down -->
  
 
     <script type="text/javascript">
 
     <script type="text/javascript">
Line 301: Line 354:
 
         };
 
         };
  
−
       
 
−
 
−
 
−
 
−
        $("#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>
 
     </script>
  

Revision as of 20:31, 13 October 2018