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

 
(21 intermediate revisions by 2 users not shown)
Line 85: Line 85:
 
     .header-nav {
 
     .header-nav {
 
position: fixed;
 
position: fixed;
 +
top: 16px;
 
left: 0;
 
left: 0;
 
width: 100%;
 
width: 100%;
Line 97: Line 98:
 
text-align: center;
 
text-align: center;
 
height: 45px;
 
height: 45px;
−
                top: 16px;
 
 
}
 
}
 
.header-nav:hover{
 
.header-nav:hover{
Line 117: Line 117:
 
.sub_menu{
 
.sub_menu{
 
position: absolute;
 
position: absolute;
−
z-index: 1400;
+
z-index: 1000;
 
float: left;
 
float: left;
 
min-width: 160px;
 
min-width: 160px;
Line 154: Line 154:
 
     color: #fff;
 
     color: #fff;
 
   }
 
   }
−
 
+
#mw-content-text > div:nth-child(2) > div > a:nth-child(2){
 +
color: #fff !important;
 +
}
 
#mw-content-text > div:nth-child(2) > div > a:nth-child(1){
 
#mw-content-text > div:nth-child(2) > div > a:nth-child(1){
−
color: #fff;
+
color: #fff !important;  
 
}
 
}
−
 
−
#mw-content-text > div:nth-child(2) > div > a:nth-child(2){
 
−
color: #fff;
 
−
}
 
 
#header_list > a:nth-child(5){
 
#header_list > a:nth-child(5){
−
color: #fff;
+
color: #fff !important;  
 
}
 
}
−
 
 
#header_list > a:nth-child(6){
 
#header_list > a:nth-child(6){
−
color: #fff;
+
color: #fff !important;  
 
}
 
}
−
 
 
#mw-content-text > div:nth-child(2) > a > span{
 
#mw-content-text > div:nth-child(2) > a > span{
−
color: #fff;
+
color: #fff !important;  
 
}
 
}
−
 
 
#content{
 
#content{
 
margin-top: -18px;
 
margin-top: -18px;
Line 226: Line 221:
  
 
<body>
 
<body>
−
 
+
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;position:relative;z-index:1000;">
−
  <!-- Navbar_down -->
+
<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: 0px">
+
<span class="d-inline-block ml-2">SZU-China</span>
−
<img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
+
</a>
−
<span class="d-inline-block align-center ml-2">SZU-China</span>
+
−
</a>
+
 
<div style="height: 56px;width: 60%;float: right;text-align: right;padding-top: 14px">
 
<div style="height: 56px;width: 60%;float: right;text-align: right;padding-top: 14px">
−
<a class="nav-1-item">Applet</a>
+
<a class="nav-1-item" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
−
<a class="nav-1-item">Human Practices</a>
+
<a class="nav-1-item father" id="nav1_5" data-id="5" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
 
<a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a>
 
<a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a>
 
<a class="nav-1-item father" id="nav1_3" data-id="3">Project</a>
 
<a class="nav-1-item father" id="nav1_3" data-id="3">Project</a>
Line 268: Line 261:
 
         <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 class="sub_menu son" id="sub5" style="display: none;left: 44.3%">
 +
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Integrated HP</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/MeetUp">Meetup</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; Public engagement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 
     </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;" id="header_list">
+
<div style="width: 100%;height: 45px;text-align: center;" id="header_list">
−
<a class="nav-item1 nav-father" id="nav1" data-id="1">Awards</a>
+
<a class="nav-item1" id="nav0" style="color: white;" href="https://2018.igem.org/Team:SZU-China">Home</a>
−
<a class="nav-item1 nav-father" id="nav2" data-id="2">Team</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav1" data-id="1">Awards</a>
−
<a class="nav-item1 nav-father" id="nav3" data-id="3">Project</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav2" data-id="2">Team</a>
−
<a class="nav-item1 nav-father" id="nav4" data-id="4">Experiment</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav3" data-id="3">Project</a>
−
<a class="nav-item1">Human Practices</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav4" data-id="4">Experiment</a>
−
<a class="nav-item1">Applet</a>
+
<a class="nav-item1 nav-father" style="display:inline-block;height:45px;color: white;" id="nav5" data-id="5" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
 +
<a class="nav-item1" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
 
</div>
 
</div>
 
     <div class="sub_menu nav_son" id="header_nav1" style="display: none;left: 21%;">
 
     <div class="sub_menu nav_son" id="header_nav1" style="display: none;left: 21%;">
Line 306: Line 310:
 
         <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 class="sub_menu nav_son" id="header_nav5" style="display: none;left: 44.3%">
 +
<div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Integrated HP</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/MeetUp">Meetup</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; Public engagement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 
     </div>
 
     </div>
 
</div>
 
</div>
 
<script>
 
<script>
−
     for(i=1;i<=4;i++){
+
     for(i=1;i<=5;i++){
 
         $("#sub"+i).attr("style","left:" + document.getElementById("nav1_"+i).getBoundingClientRect().left+"px;display:none");
 
         $("#sub"+i).attr("style","left:" + document.getElementById("nav1_"+i).getBoundingClientRect().left+"px;display:none");
 
     }
 
     }
Line 334: Line 347:
 
     });
 
     });
 
</script>
 
</script>
−
<!-- Navbar_down -->
 
  
 
     <script type="text/javascript">
 
     <script type="text/javascript">
Line 354: Line 366:
 
         };
 
         };
  
 +
       
 +
 +
 +
 +
        $("#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>
  

Latest revision as of 23:36, 17 October 2018