Difference between revisions of "Template:Fudan-CHINA"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | |||
<!--start----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!--start----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
| Line 14: | Line 13: | ||
a, button, input, textarea { | a, button, input, textarea { | ||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | ||
| − | -moz-transition: all . | + | -moz-transition: all .5s ease; |
| − | -webkit-transition: all . | + | -webkit-transition: all .5s ease; |
| − | transition: all . | + | transition: all .5s ease; |
} | } | ||
</style> | </style> | ||
| Line 279: | Line 278: | ||
| − | <!--navigation bar--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | + | <!--navigation bar--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
| − | + | ||
<ul id="navUl" style="z-index: 888;"> | <ul id="navUl" style="z-index: 888;"> | ||
| − | <li class="navLi navImg" style="display: inline-block;float: left;width: | + | <li class="navLi navImg" style="display: inline-block;float: left;width: 5%;"></li> |
<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/1/1d/T--Fudan-CHINA--step_white.png" /></a></li> | <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/1/1d/T--Fudan-CHINA--step_white.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" style="color: white;">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" style="color: white;">Fudan-CHINA</a></li> | ||
| − | <li class="navLi"><a class="navA" href="#7">Team</a></li> | + | <li class="navLi" style="display: inline-block;width: 5%;"></li> |
| + | <li class="navLi"><a class="navA" href="#7">Team</a> | ||
| + | <ul class="ul2" style="padding: 0;margin: 0;"> | ||
| + | <li class="li2"><a class="navA2" href="#14">Team</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#15">Attributions</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
<li class="navLi"><a class="navA" href="#6">Awards</a></li> | <li class="navLi"><a class="navA" href="#6">Awards</a></li> | ||
| − | <li class="navLi"><a class="navA" href="#5">Practices</a></li> | + | <li class="navLi"><a class="navA" href="#5">Practices</a> |
| + | <ul class="ul2" style="padding: 0;margin: 0;"> | ||
| + | <li class="li2"><a class="navA2" href="#14">Overview</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#15">Silver HP</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#16">Integrated HP</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#17">Collaborations</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#18">Safety</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | |||
<li class="navLi"><a class="navA" href="#4">Modeling</a></li> | <li class="navLi"><a class="navA" href="#4">Modeling</a></li> | ||
| − | <li class="navLi"><a class="navA" href="#2">Project</a></li> | + | <li class="navLi"><a class="navA" href="#2">Project</a> |
| + | <ul class="ul2" style="padding: 0;margin: 0;"> | ||
| + | <li class="li2"><a class="navA2" href="#14">Background</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#15">Design</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#16">Result</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#17">Parts</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#18">Demonstrate</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#19">Notebook</a></li> | ||
| + | <li class="li2"><a class="navA2" href="#20">Interlab</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
</ul> | </ul> | ||
<style> | <style> | ||
| Line 297: | Line 320: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
| − | overflow: | + | overflow: visible; |
position:fixed; | position:fixed; | ||
width: 100%; | width: 100%; | ||
| + | } | ||
| + | .ul2{ | ||
| + | list-style: none; | ||
| + | text-align: center; | ||
| + | box-shadow: 0 0px 4px rgba(0,0,0,1); | ||
| + | position: absolute; | ||
| + | left:50%; | ||
| + | transform: translateX(-50%); | ||
| + | background-color:rgba(255,255,255,1); | ||
| + | display: none; | ||
| + | } | ||
| + | .li2{ | ||
| + | font-size: 0; | ||
| + | |||
} | } | ||
.navLi:not(.navImg){ | .navLi:not(.navImg){ | ||
float: right; | float: right; | ||
| + | position: relative; | ||
} | } | ||
.navA{ | .navA{ | ||
| Line 309: | Line 347: | ||
font-weight: 400; | font-weight: 400; | ||
text-align: center; | text-align: center; | ||
| − | + | } | |
| + | .navA2{ | ||
| + | display: block; | ||
| + | font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; | ||
| + | color: rgba(36,36,36,1); | ||
| + | border-bottom: 0.3px solid rgba(35,35,35,0.2); | ||
| + | border-top: 0.3px solid rgba(35,35,35,0.2); | ||
| + | overflow: visible; | ||
} | } | ||
.navA:not(.teamName){ | .navA:not(.teamName){ | ||
| Line 318: | Line 363: | ||
font-weight: 400; | font-weight: 400; | ||
} | } | ||
| − | .navA:link{ | + | .navA:link,.navA2:link{ |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| Line 324: | Line 369: | ||
.navA:visited{ | .navA:visited{ | ||
color: white; | color: white; | ||
| + | } | ||
| + | .navA2:visited,.navA2:active{ | ||
| + | text-decoration: none; | ||
| + | color: rgba(36,36,36,1); | ||
} | } | ||
.navA:hover:not(.activeA){ | .navA:hover:not(.activeA){ | ||
color: rgba(0,189,234,1); | color: rgba(0,189,234,1); | ||
| + | } | ||
| + | .navA2:hover{ | ||
| + | background-color:rgba(0,200,160,1); | ||
| + | color: white; | ||
| + | border-bottom: 0.3px solid rgba(35,35,35,0); | ||
| + | border-top: 0.3px solid rgba(35,35,35,0); | ||
} | } | ||
.jqhover { | .jqhover { | ||
| Line 352: | Line 407: | ||
$(".navA").css("line-height","9vh"); | $(".navA").css("line-height","9vh"); | ||
$(".navA").css("font-size","3.5vh"); | $(".navA").css("font-size","3.5vh"); | ||
| + | |||
| + | $(".navA2").css("padding","0 6vh"); | ||
| + | $(".navA2").css("height","6vh"); | ||
| + | $(".navA2").css("line-height","6vh"); | ||
| + | $(".navA2").css("font-size","2.6vh"); | ||
| + | |||
$(".navA:not(img)").css("padding","0 3vh"); | $(".navA:not(img)").css("padding","0 3vh"); | ||
$(".teamImg").css("width","9vh"); | $(".teamImg").css("width","9vh"); | ||
| Line 362: | Line 423: | ||
$(".navA").css("line-height","4.5vw"); | $(".navA").css("line-height","4.5vw"); | ||
$(".navA").css("font-size","1.75vw"); | $(".navA").css("font-size","1.75vw"); | ||
| + | |||
| + | $(".navA2").css("padding","0 3vw"); | ||
| + | $(".navA2").css("height","3vw"); | ||
| + | $(".navA2").css("line-height","3vw"); | ||
| + | $(".navA2").css("font-size","1.3vw"); | ||
| + | |||
$(".navA:not(img)").css("padding","0 1.5vw"); | $(".navA:not(img)").css("padding","0 1.5vw"); | ||
$(".teamImg").css("width","4.5vw"); | $(".teamImg").css("width","4.5vw"); | ||
| Line 368: | Line 435: | ||
} | } | ||
}; | }; | ||
| + | |||
navFun(); | navFun(); | ||
| Line 379: | Line 447: | ||
var barHeight=$("#top_menu_14").height(); | var barHeight=$("#top_menu_14").height(); | ||
if(topDis >0.2*winHeight){ | if(topDis >0.2*winHeight){ | ||
| − | $("#navUl").stop().animate({top:barHeight,backgroundColor:"rgba( | + | $("#navUl").stop().animate({top:barHeight,backgroundColor:"rgba(25,25,35,1)",boxShadow:"0px 0px 5px"},"fast"); |
$(".navA:not(.activeA)").hover(function () { | $(".navA:not(.activeA)").hover(function () { | ||
$(this).addClass("jqhover"); | $(this).addClass("jqhover"); | ||
| Line 394: | Line 462: | ||
}; | }; | ||
}); | }); | ||
| + | |||
| + | $(document).ready(function(){ | ||
| + | $(".navLi").mouseenter(function(){ | ||
| + | $(this).find(".ul2").stop().slideDown(300); | ||
| + | }); | ||
| + | $(".navLi").mouseleave(function(){ | ||
| + | $(this).find(".ul2").stop().slideUp(300); | ||
| + | }); | ||
| + | }); | ||
</script> | </script> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<!----------------------------------------------------------------------------------------------------------------------------------------------------> | <!----------------------------------------------------------------------------------------------------------------------------------------------------> | ||
| − | |||
Revision as of 05:54, 29 September 2018
