(50 intermediate revisions by 2 users not shown) | |||
Line 83: | Line 83: | ||
<style> | <style> | ||
− | + | .header-nav { | |
position: fixed; | position: fixed; | ||
top: 16px; | top: 16px; | ||
Line 137: | Line 137: | ||
.nav-sub-item a{ | .nav-sub-item a{ | ||
text-decoration: none; | text-decoration: none; | ||
− | color: #FFFFFF | + | color: #FFFFFF !important; |
} | } | ||
Line 151: | Line 151: | ||
float: right; | float: right; | ||
} | } | ||
+ | a:not([href]):not([tabindex]) { | ||
+ | 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){ | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | #header_list > a:nth-child(5){ | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | #header_list > a:nth-child(6){ | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | #mw-content-text > div:nth-child(2) > a > span{ | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | #content{ | ||
+ | margin-top: -18px; | ||
+ | } | ||
+ | |||
+ | #bodyContent | ||
+ | { | ||
+ | margin-top: -18px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .animated { | ||
+ | -webkit-animation-duration: 1s; | ||
+ | animation-duration: 1s; | ||
+ | -webkit-animation-fill-mode: both; | ||
+ | animation-fill-mode: both; | ||
+ | } | ||
+ | .bounce { | ||
+ | -webkit-animation-name: bounce; | ||
+ | animation-name: bounce; | ||
+ | -webkit-transform-origin: center bottom; | ||
+ | transform-origin: center bottom; | ||
+ | } | ||
+ | @keyframes bounce { | ||
+ | 0%, 20%, 53%, 80%, 100% { | ||
+ | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | ||
+ | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | transform: translate3d(0,0,0); | ||
+ | } | ||
+ | 40%, 43% { | ||
+ | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | ||
+ | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | ||
+ | -webkit-transform: translate3d(0, -30px, 0); | ||
+ | transform: translate3d(0, -30px, 0); | ||
+ | } | ||
+ | 70% { | ||
+ | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | ||
+ | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | ||
+ | -webkit-transform: translate3d(0, -15px, 0); | ||
+ | transform: translate3d(0, -15px, 0); | ||
+ | } | ||
+ | 90% { | ||
+ | -webkit-transform: translate3d(0,-4px,0); | ||
+ | transform: translate3d(0,-4px,0); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
<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"> | |
− | + | <a class="nav-1-item" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a> | |
− | <div style="height: 56px;width: | + | <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" href=" | + | <a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a> |
− | <a class="nav-1-item" href=" | + | <a class="nav-1-item father" id="nav1_3" data-id="3">Project</a> |
− | <a class="nav-1-item" id="nav1_4">Experiment</a> | + | <a class="nav-1-item father" id="nav1_2" data-id="2">Team</a> |
− | <a class="nav-1-item" id="nav1_3">Project</a> | + | <a class="nav-1-item father" id="nav1_1" data-id="1">Awards</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="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 class="sub_menu son" 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 son" 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 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 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 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" id="nav1">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" id="nav2">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" id="nav3">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" id="nav4">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" href=" | + | <a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav4" data-id="4">Experiment</a> |
− | <a class="nav-item1" href=" | + | <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="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 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/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 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/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 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/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 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> | ||
− | < | + | <script> |
− | + | for(i=1;i<=5;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(){ | },function(){ | ||
− | $("# | + | $("#header_nav"+$(this).data("id")).hide(); |
}); | }); | ||
− | $(" | + | $(".nav_son").hover(function(){ |
− | $( | + | $(this).show(); |
− | + | ||
},function(){ | },function(){ | ||
− | $( | + | $(this).hide(); |
}); | }); | ||
− | $(" | + | $(".father").hover(function(){ |
− | $("# | + | $("#sub"+$(this).data("id")).show(); |
− | + | ||
},function(){ | },function(){ | ||
− | $("# | + | $("#sub"+$(this).data("id")).hide(); |
}); | }); | ||
− | $(" | + | $(".son").hover(function(){ |
− | $( | + | $(this).show(); |
− | + | ||
},function(){ | },function(){ | ||
− | $( | + | $(this).hide(); |
}); | }); | ||
+ | </script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | window.onscroll = function () { | ||
+ | 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(); | ||
+ | } | ||
+ | if (t >= 600) { | ||
+ | $("#p1").removeClass("in").addClass("out"); | ||
+ | $("#ti").show(); | ||
+ | } else { | ||
+ | $("#p1").removeClass("out").addClass("in"); | ||
+ | $("#ti").hide(); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | |||
− | + | ||
− | $("#sub1").show(); | + | |
− | $("#sub1").attr("style","left:" + document.getElementById("nav1").getBoundingClientRect().left+"px;top:"+(document.getElementById("nav1").getBoundingClientRect().top | + | $("#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(); | |
− | + | }); | |
− | </script> | + | $("#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> | ||
Latest revision as of 23:36, 17 October 2018