|
|
| 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> |
