Difference between revisions of "Team:NAU-CHINA"

Line 31: Line 31:
 
}
 
}
 
/*start*/
 
/*start*/
−
                #menudiv{
+
.menu, .menu ul {
−
                        text-align:center;
+
    list-style: none;
−
}
+
width:100%;
−
#menu{
+
    margin:0 auto;
−
color: #ffffff;
+
    text-shadow:2px 3px 2px #000;
−
font-weight: bold;
+
−
                       
+
 
}
 
}
−
#menu_team{
+
.menu {
−
position: absolute;
+
    height: 58px;
−
margin:25px 310px;
+
 
}
 
}
−
#menu_project{
+
.menu li {
−
position: absolute;
+
    background: -moz-linear-gradient(transparent);
−
margin: 25px 400px;
+
    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_results{
+
 
−
position: absolute;
+
.menu li img{
−
margin:25px 500px;
+
display:block;
 +
width:50px;
 +
height:54px;
 +
margin:auto;
 
}
 
}
−
#menu_main{
+
.menu > li {
−
position: absolute;
+
    display: block;
−
margin:40px 620px;
+
    float: left;
−
font-size: 190%;
+
    position: relative;
 
}
 
}
−
#menu_notebook{
+
.menu a {
−
position: absolute;
+
    border-left: 3px solid rgba(0, 0, 0, 0);
−
margin: 25px 750px;
+
    color: #FFF;
 +
    display: block;
 +
    font-family:Arial, Helvetica, sans-serif;
 +
    font-size: 15px;
 +
font-weight:bold;
 +
    line-height: 54px;
 +
    padding: 0 30px;
 +
    text-decoration: none;
 
}
 
}
−
#menu_application{
+
 
−
position: absolute;
+
/* onhover styles */
−
margin: 25px 850px;
+
.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_hp{
+
.menu li:hover > a {
−
position: absolute;
+
    border-radius: 5px 0 0 0;
−
margin: 25px 965px;
+
    border-left: 3px solid #369;
−
white-space: nowrap;
+
    color:#369;
 
}
 
}
 +
 +
/* submenu styles */
 +
.submenu {
 +
    left: 0;
 +
    max-height: 0;
 +
    position: absolute;
 +
    top: 100%;
 +
    z-index: 0;
 +
min-width:220px;
 +
    -webkit-perspective: 400px;
 +
    -moz-perspective: 400px;
 +
    -ms-perspective: 400px;
 +
    -o-perspective: 400px;
 +
    perspective: 400px;
 +
 +
}
 +
.submenu li {
 +
    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 {
 +
    border-left: 3px solid #000000;
 +
    border-radius: 0;
 +
    color: #69F;
 +
}
 +
.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;
 +
    -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;
 +
}
 +
 +
 +
  
  
Line 102: Line 295:
  
 
<body >
 
<body >
−
                <div id="menudiv">
+
<div id="maintop"></div>
−
<ul id="menu">
+
  <div class="nav" id="main" role="main">
−
<ul id="menu_team"><b>TEAM</b></ul>
+
<ul class="menu">
−
<ul id="menu_project"><b>PROJECT</b>
+
<li id="img1"><img src="https://static.igem.org/mediawiki/2016/e/ec/NAU_CHINA_TEAM_LOGO.gif"/></li>
−
<li>DESCRIPTION</li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA">HOME</a></li>
−
</ul>
+
<li><a>TEAM</a>
−
<ul id="menu_results"><b>RESULTS</b>
+
<ul class="submenu">
−
<li>MODELLING</li>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Team">Team</a></li>
−
</ul>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Member">Member</a></li>
−
<ul id="menu_main"><b>MAIN</b></ul>
+
</ul>
−
<ul id="menu_notebook"><b>NOTEBOOK</b></ul>
+
</li>
−
<ul id="menu_application"><b>APPLICATION</b></ul>
+
<li><a>PROJECT</a>
−
<ul id="menu_hp"><b>HUMAN PRACTICE</b></ul>
+
<ul class="submenu">
−
</ul>
+
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Description">Description</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NAU-CHINA/Design">Design</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Modeling">Modeling</a></li>
 +
                                <li><a href="https://2016.igem.org/Team:NAU-CHINA/Experiments">Experiments</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Parts">Team Parts</a></li>
 +
</ul>
 +
</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 class="active"><a>HUMAN PRACTICES</a>
 +
<ul class="submenu">
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Practices">Human Practices</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2016.igem.org/Team:NAU-CHINA/Safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 
</div>
 
</div>
 
<img src="https://static.igem.org/mediawiki/2016/1/1e/NAU_CHINA_2016WIKI_TEST.jpeg"  onload="ChangeImg(this)" style="z-index:-100;position:absolute;left:0;top:0px"><!--background-->
 
<img src="https://static.igem.org/mediawiki/2016/1/1e/NAU_CHINA_2016WIKI_TEST.jpeg"  onload="ChangeImg(this)" style="z-index:-100;position:absolute;left:0;top:0px"><!--background-->
Line 122: Line 332:
  
  
−
<form name="form1" style="position:absolute;left:620px;top:500px">
 
−
<a href="" onMouseOver="ImgOver()" onMouseOut="ImgOut()">
 
−
<img name="team_logo" src="https://static.igem.org/mediawiki/2016/e/ec/NAU_CHINA_TEAM_LOGO.gif" >
 
−
</a>
 
−
</form>
 
  
 
 

Revision as of 14:33, 24 August 2016