Difference between revisions of "Team:Fudan-CHINA"

Line 2: Line 2:
 
<html>
 
<html>
 
 
−
<!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
<img class="bgPic" src="https://static.igem.org/mediawiki/2018/8/8f/T--Fudan-CHINA--bgpicture2.jpeg" style="z-index: -1;" />
+
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
</p>
 +
 +
 +
 +
 +
<!--get jQuery------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&amp;action=raw&amp;ctype=text/javascript">
 +
//jQuery
 +
</script>
 +
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/SuperSlide&amp;action=raw&amp;ctype=text/javascript">
 +
//jQuery_SuperSlide
 +
</script>
 +
 +
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&amp;action=raw&amp;ctype=text/javascript">
 +
//jQuery_AnimateColors
 +
</script>
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 
 +
 +
 
 +
 +
<!--make the menu hidden------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<script>
 
<script>
−
var winWidth=$(window).width();
+
$(document).ready(function(){
−
$(".bgPic").css("width",winWidth);
+
  $('#sideMenu').remove();
−
$(window).resize(function(){
+
  let trigger = document.createElement('div');
−
var winWidth=$(window).width();
+
$(trigger).attr('id','menu-trigger');
−
$(".bgPic").css("width",winWidth);
+
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>
 
</script>
 +
 
 
−
+
−
<ul id="step" style="
+
<style>
−
z-index: 99;
+
#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>
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 +
 +
 +
<!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<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>
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 
 +
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<style>
 +
#navUl{
 
list-style: none;
 
list-style: none;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
overflow: hidden;
 
overflow: hidden;
−
position:absolute;
+
position:fixed;
−
top:300px;
+
width: 1500px;
−
height: auto;
+
}
−
">
+
.navLi:not(.navImg){
−
<li class="navLi navImg" style="float: left;"><img class="navA" style="width=200px;height:200px;padding:0px; " src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan-CHINA--step_white.png" /></li>
+
float: right;
−
<li class="navLi navImg" style="float: left;"><a class="navA activeA teamName" style="font-family: Algerian;font-size: 13em;font-weight: 400;height:200px;line-height: 200px;" href="#11"> S T E P</a></li>
+
}
−
+
.navA{
−
</ul>
+
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{
−
<div id="fullName">Synthetic Transducer Engineering Platform</div>
+
−
<style>
+
−
#fullName{
+
−
position: absolute;
+
−
font-family: "Bauhaus 93";
+
 
color: white;
 
color: white;
−
font-size:3.3em;
 
−
font-weight: 200;
 
 
}
 
}
−
</style>
+
 +
.navA:hover:not(.activeA){
 +
color: rgba(0,189,234,1);
 +
}
 +
.navA:hover{
 +
text-decoration:none;
 +
}
 +
 
 +
    .navA:active{
 +
text-decoration:none;
 +
color: white;
 +
}
 +
 +
</style>
 
 
 +
 
 
 +
<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="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" 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="#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>
 +
<li class="navLi"><a class="navA activeA" href="#1">HOME</a></li>
 +
</ul>
 
<script>
 
<script>
 
var winWidth=$(window).width();
 
var winWidth=$(window).width();
−
var bgPicHeight=$('.bgPic').height();
+
var navWidth=$('#navUl').width();
−
var stepWidth=$('#step').width();
+
var winHeight=$(window).height();
−
var fnWidth=$('#fullName').width();
+
$("#navUl").css("left",0.5*(winWidth-navWidth));
−
$("#step").css("left",0.5*(winWidth-stepWidth));
+
$("#navUl").css("top",0.1*winHeight);
−
$("#step").css("top",0.3*bgPicHeight);
+
−
    var stepHeight=$('#step').height();
+
−
var stepY = $('#step').offset().top;
+
−
$("#fullName").css("left",0.5*(winWidth-fnWidth));
+
−
$("#fullName").css("top",stepY+1.2*stepHeight);
+
 
 
 
$(window).resize(function(){
 
$(window).resize(function(){
−
var winWidth=$(window).width();
+
var winWidth=$(window).width();
−
var bgPicHeight=$('.bgPic').height();
+
var navWidth=$('#navUl').width();
−
var stepWidth=$('#step').width();
+
var winHeight=$(window).height();
−
var fnWidth=$('#fullName').width();
+
$("#navUl").css("left",0.5*(winWidth-navWidth));
−
$("#step").css("left",0.5*(winWidth-stepWidth));
+
$("#navUl").css("top",0.1*winHeight);
−
$("#step").css("top",0.3*bgPicHeight);
+
−
    var stepHeight=$('#step').height();
+
−
var stepY = $('#step').offset().top;
+
−
$("#fullName").css("left",0.5*(winWidth-fnWidth));
+
−
$("#fullName").css("top",stepY+1.2*stepHeight);
+
 
});
 
});
−
</script>
+
 
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
 +
 +
    $(window).scroll(function(navYpos){
 +
var winHeight=$(window).height();
 +
        var topDis = $(window).scrollTop();
 +
var navYoff = $('#navUl').offset().top;
 +
    var navYpos = $('#navUl').position().top;
 +
        if(topDis >150)
 +
{
 +
$("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(242,116,95,1)",boxShadow:"0px 0px 5px"},"fast");
 +
//$(".navA").stop().animate({color:"rgba(108,119,132,1)"},"fast");
 
 
−
+
}
−
+
        else
−
+
{
−
<p>
+
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
−
<!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
$(".navA").stop().animate({color:"white"},"fast");
 +
}
 +
    });
 +
</script>
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
</html>
 
</html>

Revision as of 14:23, 20 September 2018