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">
−
<!--
+
.menu ,.menu ul  
−
  #sideMenu, #top_title，#bars_item {display:none;}
+
{
−
       
+
    list-style: none;  
−
        #content{
+
−
        width: 100%;
+
−
        margin: 0px;
+
−
        padding: 0;
+
−
        background: #052d5d;}
+
−
/* Hide first heading */
+
−
.firstHeading {
+
−
display: none;
+
−
}
+
−
+
−
/*-- Remove borders, float content left and remove padding/margin */
+
−
#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 {
+
−
    height: 58px;
+
.menu li
 +
{
 +
    min-width:13%;  
 
}
 
}
−
.menu li {
+
       
−
    background: -moz-linear-gradient(transparent);
+
.menu > li  
−
    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 {
+
−
    border-left: 3px solid rgba(0, 0, 0, 0);
+
.menu a  
 +
{
 
    color: #FFF;
 
    color: #FFF;
 
    display: block;
 
    display: block;
Line 85: Line 33:
 
}
 
}
  
−
/* onhover styles */
+
.submenu
−
.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 112: Line 40:
 
    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, .menu > li:focus .submenu {
+
.menu > li:hover .submenu li
−
    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 322: Line 77:
 
</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 334: Line 88:
 
</ul>
 
</ul>
 
</div>
 
</div>
−
<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-->
+
<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%">
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
+
−
+
 
</body>
 
</body>
−
 
−
 
−
 
−
 
 
</html>
 
</html>

Revision as of 08:54, 25 August 2016

<!Doctype html>