Difference between revisions of "Team:NAU-CHINA"

Line 1: Line 1:
−
<!Doctype html>
 
 
<html>
 
<html>
  
 
<head>
 
<head>
 
<style type="text/css">
 
<style type="text/css">
−
#sideMenu, #top_title，#bars_item {display:none;}
+
<!--
 +
  #sideMenu, #top_title，#bars_item {display:none;}
 
          
 
          
 
         #content{
 
         #content{
Line 15: Line 15:
 
display: none;
 
display: none;
 
}
 
}
−
.menu ,.menu ul  
+
−
{
+
/*-- Remove borders, float content left and remove padding/margin */
−
    list-style: none;  
+
#globalWrapper, #content{
 +
background-color: transparent;
 +
border: 0px;
 +
float: left;
 +
margin:0px;
 +
padding: 0px;
 +
}
 +
 
 +
/*left align Black Menu Bar */
 +
#top_menu_inside {
 +
margin-left: 20px;
 +
}
 +
/*sideMenu*/
 +
#sideMenu{
 +
display:none;
 +
}
 +
/*HQ_PAGE_LOGO*/
 +
.logo_2016{
 +
display:none;
 +
}
 +
/*start*/
 +
.menu, .menu ul {
 +
    list-style: none;
 +
width:100%;
 +
    margin:0 auto;
 +
    text-shadow:2px 3px 2px #000;
 
}
 
}
−
+
.menu {
−
.menu li
+
    height: 58px;
−
{
+
−
    min-width:13%;  
+
 
}
 
}
−
       
+
.menu li {
−
.menu > li  
+
    background: -moz-linear-gradient(transparent);
−
{
+
    background: -ms-linear-gradient(transparent);
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #27394b), color-stop(100%, #252525));
 +
    background: -webkit-linear-gradient(transparent);
 +
    background: -o-linear-gradient(transparent);
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#27394b', endColorstr='#252525');
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#27394b', endColorstr='#252525')";
 +
    background: linear-gradient(transparent);
 +
    border-bottom: 2px solid #000000;
 +
    border-top: 2px solid #000000;
 +
    min-width:100px;
 +
   
 +
}
 +
 
 +
.menu li img{
 +
display:block;
 +
width:50px;
 +
height:54px;
 +
margin:auto;
 +
}
 +
.menu > li {
 
    display: block;
 
    display: block;
 
    float: left;
 
    float: left;
 
    position: relative;
 
    position: relative;
 
}
 
}
−
+
.menu a {
−
.menu a  
+
    border-left: 3px solid rgba(0, 0, 0, 0);
−
{
+
 
    color: #FFF;
 
    color: #FFF;
 
    display: block;
 
    display: block;
Line 44: Line 85:
 
}
 
}
  
−
.submenu
+
/* onhover styles */
−
{
+
.menu li:hover {
 +
    background-color: #4d6173;
 +
    background: -moz-linear-gradient(#4d6173, #384a5c);
 +
    background: -ms-linear-gradient(#4d6173, #384a5c);
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d6173), color-stop(100%, #384a5c));
 +
    background: -webkit-linear-gradient(#4d6173, #384a5c);
 +
    background: -o-linear-gradient(#4d6173, #384a5c);
 +
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d6173', endColorstr='#384a5c');
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d6173', endColorstr='#384a5c')";
 +
    background: linear-gradient(#4d6173, #384a5c);
 +
    border-bottom: 2px solid #ffffff;
 +
    border-top: 2px solid #ffffff;
 +
}
 +
.menu li:hover > a {
 +
    border-radius: 5px 0 0 0;
 +
    border-left: 3px solid #369;
 +
    color:#369;
 +
}
 +
 
 +
/* submenu styles */
 +
.submenu {
 
    left: 0;
 
    left: 0;
 
    max-height: 0;
 
    max-height: 0;
Line 51: Line 112:
 
    top: 100%;
 
    top: 100%;
 
    z-index: 2;
 
    z-index: 2;
−
min-width:220px;
+
min-width:220px;
 +
    -webkit-perspective: 400px;
 +
    -moz-perspective: 400px;
 +
    -ms-perspective: 400px;
 +
    -o-perspective: 400px;
 +
    perspective: 400px;
 +
 
}
 
}
−
 
 
.submenu li {
 
.submenu li {
−
    opacity: 0;  
+
    opacity: 0;
−
}
+
    -webkit-transform: rotateY(90deg);
 +
    -moz-transform: rotateY(90deg);
 +
    -ms-transform: rotateY(90deg);
 +
    -o-transform: rotateY(90deg);
 +
    transform: rotateY(90deg);
  
 +
    -webkit-transition: opacity .4s, -webkit-transform .5s;
 +
    -moz-transition: opacity .4s, -moz-transform .5s;
 +
    -ms-transition: opacity .4s, -ms-transform .5s;
 +
    -o-transition: opacity .4s, -o-transform .5s;
 +
    transition: opacity .4s, transform .5s;
 +
}
 
.menu .submenu li:hover a {
 
.menu .submenu li:hover a {
 
    border-left: 3px solid #000000;
 
    border-left: 3px solid #000000;
 +
    border-radius: 0;
 
    color: #69F;
 
    color: #69F;
 
}
 
}
−
.menu > li:hover .submenu li
+
.menu > li:hover .submenu, .menu > li:focus .submenu {
−
{
+
    max-height: 2000px;
 +
    z-index: 10;
 +
}
 +
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
 
    opacity: 1;
 
    opacity: 1;
 +
    -webkit-transform: none;
 +
    -moz-transform: none;
 +
    -ms-transform: none;
 +
    -o-transform: none;
 +
    transform: none;
 
}
 
}
 +
 +
/* CSS3 delays for transition effects */
 +
.menu li:hover .submenu li:nth-child(1) {
 +
    -webkit-transition-delay: 0s;
 +
    -moz-transition-delay: 0s;
 +
    -ms-transition-delay: 0s;
 +
    -o-transition-delay: 0s;
 +
    transition-delay: 0s;
 +
}
 +
.menu li:hover .submenu li:nth-child(2) {
 +
    -webkit-transition-delay: 50ms;
 +
    -moz-transition-delay: 50ms;
 +
    -ms-transition-delay: 50ms;
 +
    -o-transition-delay: 50ms;
 +
    transition-delay: 50ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(3) {
 +
    -webkit-transition-delay: 100ms;
 +
    -moz-transition-delay: 100ms;
 +
    -ms-transition-delay: 100ms;
 +
    -o-transition-delay: 100ms;
 +
    transition-delay: 100ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(4) {
 +
    -webkit-transition-delay: 150ms;
 +
    -moz-transition-delay: 150ms;
 +
    -ms-transition-delay: 150ms;
 +
    -o-transition-delay: 150ms;
 +
    transition-delay: 150ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(5) {
 +
    -webkit-transition-delay: 200ms;
 +
    -moz-transition-delay: 200ms;
 +
    -ms-transition-delay: 200ms;
 +
    -o-transition-delay: 200ms;
 +
    transition-delay: 200ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(6) {
 +
    -webkit-transition-delay: 250ms;
 +
    -moz-transition-delay: 250ms;
 +
    -ms-transition-delay: 250ms;
 +
    -o-transition-delay: 250ms;
 +
    transition-delay: 250ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(7) {
 +
    -webkit-transition-delay: 300ms;
 +
    -moz-transition-delay: 300ms;
 +
    -ms-transition-delay: 300ms;
 +
    -o-transition-delay: 300ms;
 +
    transition-delay: 300ms;
 +
}
 +
.menu li:hover .submenu li:nth-child(8) {
 +
    -webkit-transition-delay: 350ms;
 +
    -moz-transition-delay: 350ms;
 +
    -ms-transition-delay: 350ms;
 +
    -o-transition-delay: 350ms;
 +
    transition-delay: 350ms;
 +
}
 +
 +
.submenu li:nth-child(1) {
 +
    -webkit-transition-delay: 350ms;
 +
    -moz-transition-delay: 350ms;
 +
    -ms-transition-delay: 350ms;
 +
    -o-transition-delay: 350ms;
 +
    transition-delay: 350ms;
 +
}
 +
.submenu li:nth-child(2) {
 +
    -webkit-transition-delay: 300ms;
 +
    -moz-transition-delay: 300ms;
 +
    -ms-transition-delay: 300ms;
 +
    -o-transition-delay: 300ms;
 +
    transition-delay: 300ms;
 +
}
 +
.submenu li:nth-child(3) {
 +
    -webkit-transition-delay: 250ms;
 +
    -moz-transition-delay: 250ms;
 +
    -ms-transition-delay: 250ms;
 +
    -o-transition-delay: 250ms;
 +
    transition-delay: 250ms;
 +
}
 +
.submenu li:nth-child(4) {
 +
    -webkit-transition-delay: 200ms;
 +
    -moz-transition-delay: 200ms;
 +
    -ms-transition-delay: 200ms;
 +
    -o-transition-delay: 200ms;
 +
    transition-delay: 200ms;
 +
}
 +
.submenu li:nth-child(5) {
 +
    -webkit-transition-delay: 150ms;
 +
    -moz-transition-delay: 150ms;
 +
    -ms-transition-delay: 150ms;
 +
    -o-transition-delay: 150ms;
 +
    transition-delay: 150ms;
 +
}
 +
.submenu li:nth-child(6) {
 +
    -webkit-transition-delay: 100ms;
 +
    -moz-transition-delay: 100ms;
 +
    -ms-transition-delay: 100ms;
 +
    -o-transition-delay: 100ms;
 +
    transition-delay: 100ms;
 +
}
 +
.submenu li:nth-child(7) {
 +
    -webkit-transition-delay: 50ms;
 +
    -moz-transition-delay: 50ms;
 +
    -ms-transition-delay: 50ms;
 +
    -o-transition-delay: 50ms;
 +
    transition-delay: 50ms;
 +
}
 +
.submenu li:nth-child(8) {
 +
    -webkit-transition-delay: 0s;
 +
    -moz-transition-delay: 0s;
 +
    -ms-transition-delay: 0s;
 +
    -o-transition-delay: 0s;
 +
    transition-delay: 0s;
 +
}
 +
 +
 +
 +
 +
 +
 +
-->
  
 
</style>
 
</style>
 +
 +
 +
<script type="text/javascript">
 +
function ImgOver()
 +
{
 +
document.form1.team_logo.src="https://static.igem.org/mediawiki/2016/2/28/NAU_CHINA_TEAM_LOGO_SHADOW.gif"
 +
}
 +
function ImgOut()
 +
{
 +
document.form1.team_logo.src="https://static.igem.org/mediawiki/2016/e/ec/NAU_CHINA_TEAM_LOGO.gif"
 +
}
 +
function ChangeImg(ThisPic)
 +
{
 +
var size=document.body.clientWidth;
 +
var TrueWidth=ThisPic.width;
 +
var TrueHeight=ThisPic.height;
 +
var Multiple=TrueWidth/size;
 +
 +
ThisPic.width=size;
 +
ThisPic.height=TrueHeight/Multiple;
 +
}
 +
</script>
 +
  
 
</head>
 
</head>
−
  <div>
+
 
 +
<body >
 +
<div id="maintop"></div>
 +
  <div class="nav" id="main" role="main">
 
<ul class="menu">
 
<ul class="menu">
 +
<li id="img1"><img src="https://static.igem.org/mediawiki/2016/e/ec/NAU_CHINA_TEAM_LOGO.gif"/></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA">HOME</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA">HOME</a></li>
 
<li><a>TEAM</a>
 
<li><a>TEAM</a>
Line 88: Line 322:
 
</ul>
 
</ul>
 
</li>
 
</li>
 +
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Application">APPLICATION</a></li>
 
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Application">APPLICATION</a></li>
Line 99: Line 334:
 
</ul>
 
</ul>
 
</div>
 
</div>
−
<img src="https://static.igem.org/mediawiki/2016/a/ac/NAU_CHINA_2016WIKI_TEST1.jpeg"   onload="ChangeImg(this,6)"style="z-index:-1;position:absolute;left:0;top:0;width:100%">
+
<img src="https://static.igem.org/mediawiki/2016/a/ac/NAU_CHINA_2016WIKI_TEST1.jpeg" onload="ChangeImg(this)" style="z-index:-100;position:absolute;left:0;top:0px"><!--background-->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 +
 
</body>
 
</body>
 +
 +
 +
 +
 
</html>
 
</html>

Revision as of 08:56, 25 August 2016