(25 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 153: | 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; |
} | } | ||
− | |||
− | |||
− | |||
− | |||
#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 225: | Line 221: | ||
<body> | <body> | ||
− | + | <div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;position:relative;z-index:1000;"> | |
− | + | <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=" | + | <span class="d-inline-block 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 267: | 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 & 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: | + | <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 305: | 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 & 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<= | + | 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 333: | Line 347: | ||
}); | }); | ||
</script> | </script> | ||
− | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 353: | 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