Difference between revisions of "Template:Fudan-CHINA"

Line 1: Line 1:
 
<html>
 
<html>
 
 
−
+
</p>
 
 
−
+
−
<head>
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/SuperSlide&action=raw&ctype=text/javascript"></script>
+
<!--get jQuery------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&action=raw&ctype=text/javascript"></script>
+
<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>
−
//$("#top_menu_14").hide();
 
−
//$("#top_menu_under").hide();
 
 
$(document).ready(function(){
 
$(document).ready(function(){
−
  $("#navname li a").mouseover(function(){
+
  $('#sideMenu').remove();
−
    $(this).animate({backgroundColor: 'antiquewhite'},"fast");
+
  let trigger = document.createElement('div');
−
  });
+
$(trigger).attr('id','menu-trigger');
−
  $("#navname li a").mouseout(function(){
+
let menu = document.getElementById('top_menu_14');
−
    $(this).animate({backgroundColor: 'white'},"fast");
+
  $(trigger).mouseenter(function(){
−
  });
+
$(menu).css('top','0');
−
});
+
  });
−
</script>
+
  $(trigger).mouseleave(function(){
−
</head>
+
    $(menu).css('top','-20px');
 +
  });
 +
  document.body.appendChild(trigger);
 +
});
 +
</script>
 +
 
 
 
 
−
 
 
<style>
 
<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;}
  
−
/**************************************************************************************************************************************************************************************************/
+
−
/* DEFAULT WIKI SETTINGS */
+
#top_menu_14{
−
/**************************************************************************************************************************************************************************************************/
+
  top: -20px; padding-bottom: 2px; transition: top 0.3s;
−
 
+
}
−
 
+
#top_menu_14:hover {
−
#home_logo, #sideMenu { display:none; }
+
    top: 0 !important;
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
}
−
#content { margin-left:0px; margin-top:-6px; padding:0px; width:100%;}
+
#menu-trigger{
−
.mediawiki{background-color:white;}
+
  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>
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
−
<style type="text/css">
+
 +
 +
 +
<!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<style>
 
@font-face
 
@font-face
 
{
 
{
−
   font-family:_Quicksand;
+
   font-family:_Quicksand;/*for navigation bar*/
 
  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 51: Line 90:
 
  src: url('https://static.igem.org/mediawiki/2018/4/43/T--Fudan-CHINA--wonderwall.ttf');
 
  src: url('https://static.igem.org/mediawiki/2018/4/43/T--Fudan-CHINA--wonderwall.ttf');
 
}
 
}
−
+
</style>
−
div#mydiv{
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
−
background-color: white;
+
−
}
+
 
−
body#mypage{
+
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
background-color:white;
+
<style>
−
}
+
#navUl{
−
ul#navname{
+
list-style: none;
−
overflow: hidden;
+
−
list-style:none;
+
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
border: 0;
+
overflow: hidden;
−
position: absolute;
+
display:inline-block;
−
top:10px;
+
box-shadow: 0px 0px 5px;
−
box-shadow: 0px 0px 6px #A6A6A6;
+
position:fixed;
−
position: fixed;
+
width: 1200px;
−
top:13%;
+
background-color: white;
 
}
 
}
−
#navname li{
+
.navLi:not(.navImg){
−
display: inline;
+
float: right;
−
list-style:none;
+
−
padding: 0px;
+
−
margin: -2px;
+
 
}
 
}
−
#navname li a{
+
.navA{
−
width: 200px; /*每个name的宽度和高度*/
+
display: block;
−
height:75px;
+
height: 75px;
−
line-height: 75px;
+
padding:0 20px;
 +
color:rgba(108,119,132,1);
 +
font-family: _Quicksand;
 +
font-size: 30px;
 +
 
text-align: center;
 
text-align: center;
−
text-decoration: none;
+
line-height: 75px;
−
color:#505050;/*name的颜色*/
+
}
−
font-size: 25px;
+
.activeA{
−
        font-family:_Quicksand;
+
font-weight: 900;
−
padding: 24px;
+
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
−
margin: 0;
+
font-size: 35px;
−
+
 
}
 
}
 +
.navA:link{text-decoration: none}
  
−
img#logoOnNav{
+
.navA:visited{
−
background-color:rgba(24,99,162,1.00);
+
color: rgba(108,119,132,1);
−
width:70px;height:70px;
+
−
position: relative;
+
−
top:-5px;
+
 
}
 
}
−
#teamOnNav{
+
−
position: relative;
+
.navA:hover:not(.activeA){
−
left:-30px;
+
color: rgba(0,189,234,1);
 +
}
 +
.navA:hover{
 +
text-decoration:none;
 +
}
 +
 
 +
    .navA:active{
 +
text-decoration:none;
 +
color: rgba(108,119,132,1);
 
}
 
}
 
 
 
</style>
 
</style>
−
<body id="mypage">
+
−
<div id="mydiv" style="position: relative;background-color: white">
+
−
<ul id="navname">
+
−
<li><a href="#"><img id="logoOnNav" src="https://static.igem.org/mediawiki/2018/7/79/T--Fudan-CHINA--stepHollow.png"></a></li>
+
<ul id="navUl" style="z-index: 99;">
−
<li><a href="#" id="teamOnNav" style="font-family:_wonderwall;font-size: 250%;color:rgba(24,99,162,1.00)">Fudan-CHINA</a></li>
+
<li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li>
−
<li><a href="#">&ensp;&ensp;&ensp;&ensp;&ensp;</a></li>
+
<li class="navLi navImg"><a href="#10"><img style="display: inline-block;width:70px;height: 70px;float: left;background-color: rgba(70,186,226,1);" src="https://static.igem.org/mediawiki/2018/7/79/T--Fudan-CHINA--stepHollow.png" /></a></li>
−
+
<li class="navLi navImg"><a style="display: inline-block;float: left;width: 200px;font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif';color:rgba(70,186,226,1);" class="navA" href="#8">Fudan-CHINA</a></li>
−
<li><a class="liname" href="#">About</a></li>
+
  <li class="navLi"><a class="navA" href="#7">Team</a></li>
−
<li><a class="liname" href="#">Practices</a></li>
+
<li class="navLi"><a class="navA" href="#6">Parts</a></li>
−
    <li><a class="liname" href="#">Modeling</a></li>
+
<li class="navLi"><a class="navA" href="#5">Practices</a></li>
−
    <li><a class="liname" href="#">Lab</a></li>
+
<li class="navLi"><a class="navA" href="#4">Lab</a></li>
−
    <li><a class="liname" href="#">Project</a></li>
+
<li class="navLi"><a class="navA" href="#3">Modeling</a></li>
−
</ul>
+
<li class="navLi"><a class="navA" href="#2">Project</a></li>
−
</div>
+
<li class="navLi"><a class="navA activeA" href="#1">HOME</a></li>
−
+
</ul>
 +
<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(){
 +
        var topDis = $(window).scrollTop();
 +
        if(topDis < 1)
 +
{$("#navUl").stop().animate({top:0.13*winHeight});}
 +
        else
 +
{$("#navUl").stop().animate({top:'0px'});}
 +
    });
 +
</script>
 +
  
 
</html>
 
</html>

Revision as of 10:32, 20 September 2018