Difference between revisions of "Template:Fudan-CHINA"
| Line 1: | Line 1: | ||
| − | < | + | <!--start----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
| − | + | ||
</p> | </p> | ||
| Line 101: | Line 100: | ||
padding: 0; | padding: 0; | ||
overflow: hidden; | overflow: hidden; | ||
| − | |||
| − | |||
position:fixed; | position:fixed; | ||
| − | width: | + | width: 1500px; |
| − | + | ||
} | } | ||
.navLi:not(.navImg){ | .navLi:not(.navImg){ | ||
| Line 112: | Line 108: | ||
.navA{ | .navA{ | ||
display: block; | display: block; | ||
| − | height: | + | height: 110px; |
padding:0 20px; | padding:0 20px; | ||
| − | color: | + | color:white; |
font-family: _Quicksand; | font-family: _Quicksand; | ||
font-size: 30px; | font-size: 30px; | ||
text-align: center; | text-align: center; | ||
| − | line-height: | + | line-height: 110px; |
} | } | ||
.activeA{ | .activeA{ | ||
| Line 125: | Line 121: | ||
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; | font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; | ||
font-size: 35px; | font-size: 35px; | ||
| + | } | ||
| + | .teamName{ | ||
| + | font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; | ||
} | } | ||
.navA:link{text-decoration: none} | .navA:link{text-decoration: none} | ||
.navA:visited{ | .navA:visited{ | ||
| − | color: | + | color: white; |
} | } | ||
| Line 141: | Line 140: | ||
.navA:active{ | .navA:active{ | ||
text-decoration:none; | text-decoration:none; | ||
| − | color: | + | color: white; |
} | } | ||
| Line 150: | Line 149: | ||
<ul id="navUl" style="z-index: 99;"> | <ul id="navUl" style="z-index: 99;"> | ||
<li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li> | <li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li> | ||
| − | <li class="navLi navImg" | + | <li class="navLi navImg" style="float: left;"><img class="navA" style="width=90px;height:90px;padding:10px; " src="https://static.igem.org/mediawiki/2018/6/6b/T--Fudan-CHINA--teamBadgeWhite_noCircle.png" /></li> |
| − | <li class="navLi navImg" | + | <li class="navLi navImg" style="float: left;position: relative;left:-30px;"><a class="navA activeA teamName" href="#11">Fudan-CHINA</a></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 174: | Line 173: | ||
$(".bgPic").css("width",winWidth); | $(".bgPic").css("width",winWidth); | ||
}); | }); | ||
| − | + | ||
| − | $(window).scroll(function(){ | + | |
| + | $(window).scroll(function(navYpos){ | ||
| + | var winHeight=$(window).height(); | ||
var topDis = $(window).scrollTop(); | var topDis = $(window).scrollTop(); | ||
| − | if(topDis | + | var navYoff = $('#navUl').offset().top; |
| − | {$("#navUl").stop().animate({top: | + | var navYpos = $('#navUl').position().top; |
| + | if(topDis > 300) | ||
| + | { | ||
| + | $("#navUl").stop().animate({top:'0px',backgroundColor:"white",boxShadow:"0px 0px 5px"},"fast"); | ||
| + | $(".navA").stop().animate({color:"rgba(108,119,132,1)"},"fast"); | ||
| + | |||
| + | } | ||
else | else | ||
| − | {$("#navUl").stop().animate({top: | + | { |
| + | $("#navUl").stop().animate({top:0.13*winHeight,backgroundColor:"transparent"},"fast"); | ||
| + | $(".navA").stop().animate({color:"white"},"fast"); | ||
| + | } | ||
}); | }); | ||
</script> | </script> | ||
| − | + | ||
</html> | </html> | ||
Revision as of 13:03, 20 September 2018
</p>
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&action=raw&ctype=text/javascript">
//jQuery
</script>
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/SuperSlide&action=raw&ctype=text/javascript"> //jQuery_SuperSlide </script>
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&action=raw&ctype=text/javascript"> //jQuery_AnimateColors </script>
<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>
- home_logo, #sideMenu,#top { display:none; }
- sideMenu, #top_title, .patrollink {display:none;}
- content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
body {background-color:white; }
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
- top_menu_under{display: none;}
- 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>
<style>
@font-face
{
font-family:_Quicksand;/*for navigation bar*/
src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf');
} @font-face {
font-family:_wonderwall;
src: url('https://static.igem.org/mediawiki/2018/4/43/T--Fudan-CHINA--wonderwall.ttf');
} </style>
<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: _Quicksand;
font-size: 30px;
text-align: center; line-height: 110px; } .activeA{ font-weight: 900; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; font-size: 35px; } .teamName{ font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; } .navA:link{text-decoration: none}
.navA:visited{ color: white; }
.navA:hover:not(.activeA){ color: rgba(0,189,234,1); } .navA:hover{ text-decoration:none; }
.navA:active{
text-decoration:none; color: white; }
</style>
- <img class="navA" style="width=90px;height:90px;padding:10px; " src="
" />
<script> var winWidth=$(window).width(); var navWidth=$('#navUl').width(); var winHeight=$(window).height(); $("#navUl").css("left",0.5*(winWidth-navWidth)); $("#navUl").css("top",0.13*winHeight);
$(window).resize(function(){ var winWidth=$(window).width(); var navWidth=$('#navUl').width(); $("#navUl").css("left",0.5*(winWidth-navWidth)); $("#navUl").css("top",0.13*winHeight); $(".bgPic").css("width",winWidth); });
$(window).scroll(function(navYpos){
var winHeight=$(window).height();
var topDis = $(window).scrollTop();
var navYoff = $('#navUl').offset().top; var navYpos = $('#navUl').position().top;
if(topDis > 300)
{ $("#navUl").stop().animate({top:'0px',backgroundColor:"white",boxShadow:"0px 0px 5px"},"fast"); $(".navA").stop().animate({color:"rgba(108,119,132,1)"},"fast");
}
else
{ $("#navUl").stop().animate({top:0.13*winHeight,backgroundColor:"transparent"},"fast"); $(".navA").stop().animate({color:"white"},"fast"); }
});
</script>
</html>