|
|
Line 2: |
Line 2: |
| <html> | | <html> |
| | | |
− |
| |
− |
| |
− | <!--make the menu hidden------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
− | <script>
| |
− | $(document).ready(function(){
| |
− | $('#sideMenu').remove();
| |
− | let trigger = document.createElement('div');
| |
− | $(trigger).attr('id','menu-trigger');
| |
− | let menu = document.getElementById('top_menu_14');
| |
− | $(trigger).mouseenter(function(){
| |
− | $(menu).css('top','0');
| |
− | });
| |
− | $(trigger).mouseleave(function(){
| |
− | $(menu).css('top','-20px');
| |
− | });
| |
− | document.body.appendChild(trigger);
| |
− | });
| |
− | </script>
| |
− |
| |
− |
| |
− |
| |
− | <style>
| |
− |
| |
− | #top_menu_14{
| |
− | top: -20px; padding-bottom: 2px; transition: top 0.3s;
| |
− | }
| |
− | #top_menu_14:hover {
| |
− | top: 0 !important;
| |
− | }
| |
− | #menu-trigger{
| |
− | width:100%;
| |
− | height:16px;
| |
− | position:fixed;
| |
− | left:0;
| |
− | top:0;
| |
− | z-index:10;
| |
− | }
| |
− | #HQ_page ul.navigation-bar > li > ul.sub-menu > li{
| |
− | min-width: 100px;
| |
− | }
| |
− | #HQ_page ul.navigation-bar > li > ul > li.long{
| |
− | min-width: 160px;
| |
− | }
| |
− | </style>
| |
− | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
− | <style>
| |
− | #navUl{
| |
− | list-style: none;
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | overflow: hidden;
| |
− | position:fixed;
| |
− | width: 1500px;
| |
− | }
| |
− | .navLi:not(.navImg){
| |
− | float: right;
| |
− | }
| |
− | .navA{
| |
− | display: block;
| |
− | height: 110px;
| |
− | padding:0 20px;
| |
− | color:white;
| |
− | font-family:_Butler;
| |
− | font-weight: 400;
| |
− | font-size: 30px;
| |
− | text-align: center;
| |
− | line-height: 110px;
| |
− | }
| |
− | .teamName{
| |
− | font-family:_Zelda;
| |
− | font-weight: 400;
| |
− | font-size: 35px;
| |
− | }
| |
− | .navA:link{
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | .navA:visited{
| |
− | color: white;
| |
− | }
| |
− |
| |
− | .navA:hover:not(.activeA){
| |
− | color: rgba(0,189,234,1);
| |
− | }
| |
− | .jqhover {
| |
− | color:black !important;
| |
− | }
| |
− | .navA:hover{
| |
− | text-decoration:none;
| |
− | }
| |
− |
| |
− | .navA:active{
| |
− | text-decoration:none;
| |
− | color: white;
| |
− | }
| |
− |
| |
− | </style>
| |
− |
| |
− |
| |
− |
| |
− | <ul id="navUl" style="z-index: 999;">
| |
− | <li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li>
| |
− | <li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA" style="width=80px;height:80px;padding:15px; " src="https://static.igem.org/mediawiki/2018/6/6b/T--Fudan-CHINA--teamBadgeWhite_noCircle.png" /></a></li>
| |
− | <li class="navLi navImg" style="float: left;position: relative;"><a class="navA activeA teamName" href="https://2018.igem.org/Team:Fudan-CHINA">Fudan-CHINA</a></li>
| |
− | <li class="navLi"><a class="navA" href="#7">Team</a></li>
| |
− | <li class="navLi"><a class="navA" href="#6">Parts</a></li>
| |
− | <li class="navLi"><a class="navA" href="#5">Practices</a></li>
| |
− | <li class="navLi"><a class="navA" href="#4">Lab</a></li>
| |
− | <li class="navLi"><a class="navA" href="#3">Modeling</a></li>
| |
− | <li class="navLi"><a class="navA" href="#2">Project</a></li>
| |
− | </ul>
| |
− | <script>
| |
− | function navFun(){
| |
− | var winWidth=$(window).width();
| |
− | var navWidth=$('#navUl').width();
| |
− | var winHeight=$(window).height();
| |
− | $("#navUl").css("left",0.5*(winWidth-navWidth));
| |
− | $("#navUl").css("top",0.1*winHeight);
| |
− | };
| |
− | window.onload=navFun();
| |
− |
| |
− | $(window).resize(function(){
| |
− | navFun();
| |
− | });
| |
− |
| |
− | $(window).scroll(function(){
| |
− | var winHeight=$(window).height();
| |
− | var topDis = $(window).scrollTop();
| |
− | if(topDis >150){
| |
− | $("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(4,198,215,1)",boxShadow:"0px 0px 5px"},"fast");
| |
− | $(".navA:not(.activeA)").hover(function () {
| |
− | $(this).addClass("jqhover");
| |
− | }).mouseout(function () {
| |
− | $(this).removeClass("jqhover");
| |
− | });
| |
− | }
| |
− | else{
| |
− | $("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
| |
− | $(".navA:not(.activeA)").hover(function () {
| |
− | $(this).removeClass("jqhover");
| |
− | });
| |
− | };
| |
− | });
| |
− | </script>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
− |
| |
− |
| |
| | | |
| | | |
Line 173: |
Line 14: |
| | | |
| <script> | | <script> |
− | /* function bgPicFun(){
| + | function bgPicFun(){ |
| var winWidth=$(window).width(); | | var winWidth=$(window).width(); |
| $(".bgPic").css("width",winWidth); | | $(".bgPic").css("width",winWidth); |
Line 180: |
Line 21: |
| $(window).resize(function(){ | | $(window).resize(function(){ |
| bgPicFun(); | | bgPicFun(); |
− | });*/ | + | }); |
| </script> | | </script> |
| | | |
Line 211: |
Line 52: |
| <script> | | <script> |
| function pjNameFun(){ | | function pjNameFun(){ |
| + | var winWidth=$(window).width(); |
| + | var winHeight=$(window).height(); |
| + | var stepWidth=$('#step').width(); |
| + | var stepHeight=$('#step').height(); |
| + | var fnWidth=$('#fullName').width(); |
| + | var fnHeight=$('#fullName').height(); |
| + | var fnTop=1.2*stepHeight; |
| + | var totalTop=fnTop+fnHeight; |
| + | $("#step").css("left",0.5*(winWidth-stepWidth)); |
| + | $("#step").css("top",0.5*(winHeight-totalTop)); |
| + | var stepY = $('#step').offset().top; |
| + | $("#fullName").css("left",0.5*(winWidth-fnWidth)); |
| + | $("#fullName").css("top",stepY+fnTop); |
| + | }; |
| + | /*function pjNameFun(){ |
| var winWidth=$(window).width(); | | var winWidth=$(window).width(); |
| var winHeight=$(window).height(); | | var winHeight=$(window).height(); |
Line 221: |
Line 77: |
| $("#fullName").css("left",0.5*(winWidth-fnWidth)); | | $("#fullName").css("left",0.5*(winWidth-fnWidth)); |
| $("#fullName").css("top",stepY+1.2*stepHeight); | | $("#fullName").css("top",stepY+1.2*stepHeight); |
− | }; | + | };*/ |
− | window.onload=setTimeout(function(){pjNameFun();},500); | + | window.onload=pjNameFun(); |
| $(window).resize(function(){ | | $(window).resize(function(){ |
| pjNameFun(); | | pjNameFun(); |
| }); | | }); |
− |
| |
| | | |
| </script> | | </script> |