Line 1: | Line 1: | ||
<html> | <html> | ||
− | + | <!--start----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | |
− | <!--start----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | + | |
</p> | </p> | ||
Line 42: | Line 41: | ||
@font-face | @font-face | ||
{ | { | ||
− | font-family:_Quicksand; | + | font-family:_Quicksand; |
src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf'); | src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf'); | ||
} | } | ||
Line 57: | Line 56: | ||
@font-face | @font-face | ||
{ | { | ||
− | font-family:_Algerian; | + | font-family:_Algerian; |
src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf'); | src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf'); | ||
} | } | ||
@font-face | @font-face | ||
{ | { | ||
− | font-family:_ZELDA; | + | font-family:_ZELDA;/*for team name*/ |
− | src: url('https://static.igem.org/mediawiki/2018/d/df/T--Fudan-CHINA--ZELDA.ttf'); | + | src: url('https://static.igem.org/mediawiki/2018/d/df/T--Fudan-CHINA--ZELDA.ttf'), |
+ | url('https://static.igem.org/mediawiki/2018/6/63/T--Fudan-CHINA--ZELDA.eot'); | ||
} | } | ||
@font-face | @font-face | ||
{ | { | ||
font-family:_Butler; | font-family:_Butler; | ||
− | src: url('https://static.igem.org/mediawiki/2018/e/e1/T--Fudan-CHINA--Butler.ttf'); | + | src: url('https://static.igem.org/mediawiki/2018/e/e1/T--Fudan-CHINA--Butler.ttf'), |
+ | url('https://static.igem.org/mediawiki/2018/c/c9/T--Fudan-CHINA--Butler.eot');/*IE 9+*/ | ||
} | } | ||
Line 307: | Line 308: | ||
<ul id="navUl" style="z-index: 999;"> | <ul id="navUl" style="z-index: 999;"> | ||
− | <li class="navLi navImg" style="display: inline-block;float: left;width: | + | <li class="navLi navImg" style="display: inline-block;float: left;width: 3%;" href="#8"></li> |
− | <li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA" | + | <li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA teamImg" 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 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" style="display: inline-block;width: 3%;" href="#8"></li> | ||
<li class="navLi"><a class="navA" href="#7">Team</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="#6">Parts</a></li> | ||
Line 316: | Line 318: | ||
<li class="navLi"><a class="navA" href="#3">Modeling</a></li> | <li class="navLi"><a class="navA" href="#3">Modeling</a></li> | ||
<li class="navLi"><a class="navA" href="#2">Project</a></li> | <li class="navLi"><a class="navA" href="#2">Project</a></li> | ||
+ | |||
</ul> | </ul> | ||
<style> | <style> | ||
Line 324: | Line 327: | ||
overflow: hidden; | overflow: hidden; | ||
position:fixed; | position:fixed; | ||
− | width: | + | width: 100%; |
− | + | ||
} | } | ||
.navLi:not(.navImg){ | .navLi:not(.navImg){ | ||
Line 332: | Line 334: | ||
.navA{ | .navA{ | ||
display: block; | display: block; | ||
− | |||
− | |||
− | |||
font-family:Butler,_Butler; | font-family:Butler,_Butler; | ||
font-weight: 400; | font-weight: 400; | ||
− | |||
text-align: center; | text-align: center; | ||
− | + | ||
+ | } | ||
+ | .navA:not(.teamName){ | ||
+ | color:white; | ||
} | } | ||
.teamName{ | .teamName{ | ||
font-family:Zelda,_Zelda; | font-family:Zelda,_Zelda; | ||
font-weight: 400; | font-weight: 400; | ||
− | |||
} | } | ||
.navA:link{ | .navA:link{ | ||
Line 358: | Line 358: | ||
} | } | ||
.jqhover { | .jqhover { | ||
− | color: | + | color:rgba(0,201,161,1) !important; |
} | } | ||
.navA:hover{ | .navA:hover{ | ||
Line 376: | Line 376: | ||
var navWidth=$('#navUl').width(); | var navWidth=$('#navUl').width(); | ||
var winHeight=$(window).height(); | var winHeight=$(window).height(); | ||
− | |||
$("#navUl").css("top",0.1*winHeight); | $("#navUl").css("top",0.1*winHeight); | ||
+ | if (winWidth/winHeight>2){ | ||
+ | $("#navUl").css("height","8vh"); | ||
+ | $(".navA").css("height","8vh"); | ||
+ | $(".navA").css("line-height","8vh"); | ||
+ | $(".navA").css("font-size","3vh"); | ||
+ | $(".navA:not(img)").css("padding","0 3vh"); | ||
+ | $(".teamImg").css("width","5vh"); | ||
+ | $(".teamImg").css("height","5vh"); | ||
+ | $(".teamImg").css("padding","1.5vh 0"); | ||
+ | |||
+ | } | ||
+ | else{ | ||
+ | $("#navUl").css("height","4vw"); | ||
+ | $(".navA").css("height","4vw"); | ||
+ | $(".navA").css("line-height","4vw"); | ||
+ | $(".navA").css("font-size","1.5vw"); | ||
+ | $(".navA:not(img)").css("padding","0 1.5vw"); | ||
+ | $(".teamImg").css("width","2.5vw"); | ||
+ | $(".teamImg").css("height","2.5vw"); | ||
+ | $(".teamImg").css("padding","0.75vw 0"); | ||
+ | |||
+ | } | ||
+ | |||
}; | }; | ||
navFun(); | navFun(); | ||
Line 388: | Line 410: | ||
var winHeight=$(window).height(); | var winHeight=$(window).height(); | ||
var topDis = $(window).scrollTop(); | var topDis = $(window).scrollTop(); | ||
− | if(topDis > | + | var barHeight=$("#top_menu_14").height(); |
− | $("#navUl").stop().animate({top: | + | if(topDis >0.2*winHeight){ |
+ | $("#navUl").stop().animate({top:barHeight,backgroundColor:"rgba(25,25,25,1.00)",boxShadow:"0px 0px 5px"},"fast"); | ||
$(".navA:not(.activeA)").hover(function () { | $(".navA:not(.activeA)").hover(function () { | ||
$(this).addClass("jqhover"); | $(this).addClass("jqhover"); | ||
Line 401: | Line 424: | ||
$(this).removeClass("jqhover"); | $(this).removeClass("jqhover"); | ||
}); | }); | ||
+ | |||
}; | }; | ||
}); | }); |
Revision as of 13:45, 24 September 2018