Team:SJTU-Software2/test
From 2014.igem.org
(Difference between revisions)
Line 115: | Line 115: | ||
cursor: pointer; | cursor: pointer; | ||
+ | } | ||
+ | .range | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | height: 5px; | ||
+ | margin: 22px auto 4% auto; | ||
+ | width: 957px; | ||
+ | align: center; | ||
+ | } | ||
+ | #nav,#nav ul { | ||
+ | list-style: none outside none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #nav { | ||
+ | background: url('https://static.igem.org/mediawiki/2014/1/17/Sjtu_software_menu_bg.png')no-repeat scroll 0 0 transparent ; | ||
+ | clear: both; | ||
+ | font-size: 16px; | ||
+ | height: 58px; | ||
+ | padding: 0 0 0 9px; | ||
+ | position: relative; | ||
+ | width: 957px; | ||
+ | } | ||
+ | #nav ul { | ||
+ | background-color: #222; | ||
+ | border:1px solid #222; | ||
+ | border-radius: 0 5px 5px 5px; | ||
+ | border-width: 0 1px 1px; | ||
+ | box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); | ||
+ | left: -9999px; | ||
+ | overflow: hidden; | ||
+ | position: absolute; | ||
+ | top: -9999px; | ||
+ | z-index: 2; | ||
+ | |||
+ | -moz-transform: scaleY(0); | ||
+ | -ms-transform: scaleY(0); | ||
+ | -o-transform: scaleY(0); | ||
+ | -webkit-transform: scaleY(0); | ||
+ | transform: scaleY(0); | ||
+ | |||
+ | /*-moz-transform-origin: 0 0; | ||
+ | -ms-transform-origin: 0 0; | ||
+ | -o-transform-origin: 0 0; | ||
+ | -webkit-transform-origin: 0 0; | ||
+ | transform-origin: 0 0; | ||
+ | |||
+ | -moz-transition: -moz-transform 0.1s linear; | ||
+ | -ms-transition: -ms-transform 0.1s linear; | ||
+ | -o-transition: -o-transform 0.1s linear; | ||
+ | -webkit-transition: -webkit-transform 0.1s linear; | ||
+ | transition: transform 0.1s linear;*/ | ||
+ | } | ||
+ | #nav li { | ||
+ | background: url('https://static.igem.org/mediawiki/2014/9/9d/Sjtu_software_menu_line.png') no-repeat scroll right 5px transparent; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | #nav li a { | ||
+ | color: #FFFFFF; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | font-weight: normal; | ||
+ | height: 30px; | ||
+ | padding: 18px 20px 0; | ||
+ | position: relative; | ||
+ | text-decoration: none; | ||
+ | text-shadow: 1px 1px 1px #000000; | ||
+ | } | ||
+ | #nav li:hover > a { | ||
+ | color: #00B4FF; | ||
+ | } | ||
+ | #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active { | ||
+ | background: none repeat scroll 0 0 #121212; | ||
+ | outline: 0 none; | ||
+ | } | ||
+ | #nav li:hover ul.subs { | ||
+ | left: 0; | ||
+ | top: 48px; | ||
+ | width: 180px; | ||
+ | -moz-transform: scaleY(1); | ||
+ | -ms-transform: scaleY(1); | ||
+ | -o-transform: scaleY(1); | ||
+ | -webkit-transform: scaleY(1); | ||
+ | transform: scaleY(1); | ||
+ | } | ||
+ | #nav ul li { | ||
+ | background: none; | ||
+ | width: 100%; | ||
+ | padding: 0px 100px 10px 0px; | ||
+ | |||
+ | } | ||
+ | #nav ul li a { | ||
+ | float: none; | ||
+ | height: 30px; | ||
+ | } | ||
+ | #nav ul li:hover > a { | ||
+ | background-color: #121212; | ||
+ | color: #00B4FF; | ||
+ | } | ||
+ | #lavalamp { | ||
+ | background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent; | ||
+ | height: 16px; | ||
+ | left: 111px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | width: 64px; | ||
+ | |||
+ | -moz-transition: all 300ms ease; | ||
+ | -ms-transition: all 300ms ease; | ||
+ | -o-transition: all 300ms ease; | ||
+ | -webkit-transition: all 300ms ease; | ||
+ | transition: all 300ms ease; | ||
+ | } | ||
+ | #lavalamp:hover { | ||
+ | -moz-transition-duration: 3000s; | ||
+ | -ms-transition-duration: 3000s; | ||
+ | -o-transition-duration: 3000s; | ||
+ | -webkit-transition-duration: 3000s; | ||
+ | transition-duration: 3000s; | ||
+ | } | ||
+ | |||
+ | #nav li:nth-of-type(1):hover ~ #lavalamp { | ||
+ | left: 17px; | ||
+ | } | ||
+ | #nav li:nth-of-type(2):hover ~ #lavalamp { | ||
+ | left: 111px; | ||
+ | } | ||
+ | #nav li:nth-of-type(3):hover ~ #lavalamp { | ||
+ | left: 218px; | ||
+ | } | ||
+ | #nav li:nth-of-type(4):hover ~ #lavalamp { | ||
+ | left: 335px; | ||
+ | } | ||
+ | #nav li:nth-of-type(5):hover ~ #lavalamp { | ||
+ | left: 440px; | ||
+ | } | ||
+ | #nav li:nth-of-type(6):hover ~ #lavalamp { | ||
+ | left: 467px; | ||
+ | } | ||
+ | #nav li:nth-of-type(7):hover ~ #lavalamp { | ||
+ | left: 557px; | ||
+ | } | ||
+ | #nav li:nth-of-type(8):hover ~ #lavalamp { | ||
+ | left: 647px; | ||
} | } | ||
Revision as of 07:58, 12 October 2014