Header
From 2013.igem.org
(Difference between revisions)
Line 6: | Line 6: | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
+ | font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; | ||
} | } | ||
.example { | .example { | ||
- | background:#fff url(../images/ | + | position:relative; |
- | width: | + | background:#fff url(../images/background.jpg); |
- | height: | + | width:520px; |
+ | height:382px; | ||
border:1px #000 solid; | border:1px #000 solid; | ||
margin:20px auto; | margin:20px auto; | ||
Line 18: | Line 20: | ||
-webkit-border-radius:3px; | -webkit-border-radius:3px; | ||
} | } | ||
- | |||
/* main menu styles */ | /* main menu styles */ | ||
- | + | ||
- | + | .nav,.nav ul { | |
- | + | list-style:none; | |
- | margin: | + | margin:0; |
padding:0; | padding:0; | ||
- | + | } | |
- | + | .nav { | |
- | + | position:relative; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | .nav ul { | |
+ | height:0; | ||
+ | left:0; | ||
+ | overflow:hidden; | ||
+ | position:absolute; | ||
+ | top:46px; | ||
+ | } | ||
+ | |||
+ | .nav li { | ||
float:left; | float:left; | ||
position:relative; | position:relative; | ||
- | |||
} | } | ||
- | + | ||
- | + | .nav li a { | |
- | color:# | + | -moz-transition:0.5s; |
+ | -o-transition:0.5s; | ||
+ | -webkit-transition:0.5s; | ||
+ | background-color:#7770B4; | ||
+ | border:1px solid #6E67A6; | ||
+ | color:#FFF; | ||
+ | display:block; | ||
+ | font-size:16px; | ||
+ | line-height:35px; | ||
+ | padding:5px 20px; | ||
text-decoration:none; | text-decoration:none; | ||
- | + | transition:0.5s; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .nav li:hover > a { | |
- | + | background:#8CCA33; | |
- | background:# | + | border-color:#6E67A6; |
- | color:# | + | color:#fff; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .nav li:hover ul.subs { | |
- | + | height:auto; | |
- | + | width:180px; | |
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | .nav ul li { | |
- | - | + | -moz-transition:0.5s; |
- | -webkit- | + | -o-transition:0.5s; |
- | + | -webkit-transition:0.5s; | |
+ | opacity:0; | ||
+ | transition:0.5s; | ||
+ | width:100%; | ||
} | } | ||
- | + | .nav li ul li { | |
- | + | -moz-transition-delay:0s; | |
- | + | -o-transition-delay:0s; | |
- | + | -webkit-transition-delay:0s; | |
- | + | transition-delay:0s; | |
- | + | ||
- | + | ||
- | -moz- | + | |
- | - | + | |
- | -webkit- | + | |
- | - | + | |
} | } | ||
- | + | .nav li:hover ul li { | |
- | + | ||
opacity:1; | opacity:1; | ||
- | + | -moz-transition-delay:0.5s; | |
+ | -o-transition-delay:0.5s; | ||
+ | -webkit-transition-delay:0.5s; | ||
+ | transition-delay:0.5s; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .nav ul li a { | |
- | + | background:#7770B4; | |
- | + | border-color:#6E67A6; | |
- | + | color:#fff; | |
- | -moz- | + | line-height:1px; |
- | -webkit- | + | -moz-transition:1.5s; |
+ | -o-transition:1.5s; | ||
+ | -webkit-transition:1.5s; | ||
+ | transition:1.5s; | ||
+ | } | ||
- | + | .nav li:hover ul li a { | |
- | + | line-height:35px; | |
- | - | + | |
- | + | ||
} | } | ||
- | + | ||
- | + | .nav ul li a:hover { | |
- | + | background:#8CCA33; | |
- | + | background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); | |
- | + | background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); | |
- | + | background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0)); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
</style> | </style> | ||
<body> | <body> | ||
- | |||
<div class="example"> | <div class="example"> | ||
- | <ul | + | <ul class="nav"> |
- | <li | + | <li><a href="http://www.script-tutorials.com/">Home</a></li> |
<li><a href="http://www.script-tutorials.com/">Tutorials</a> | <li><a href="http://www.script-tutorials.com/">Tutorials</a> | ||
- | <ul> | + | <ul class="subs"> |
<li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> | <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> | ||
- | <li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a> | + | <li><a href="http://www.script-tutorials.com/category/jquery/">JS / jQuery</a></li> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li> | <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li> | ||
<li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li> | <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li> | ||
<li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li> | <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li> | ||
<li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li> | <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li> | ||
+ | <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href="http://www.script-tutorials.com/category/resources/">Resources</a> | <li><a href="http://www.script-tutorials.com/category/resources/">Resources</a> | ||
- | <ul | + | <ul class="subs"> |
- | + | <li><a href="http://www.script-tutorials.com/category/php/">PHP</a></li> | |
- | + | <li><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></li> | |
- | + | <li><a href="http://www.script-tutorials.com/category/xslt/">XSLT</a></li> | |
- | + | <li><a href="http://www.script-tutorials.com/category/ajax/">Ajax</a></li> | |
- | + | <li><a href="http://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li> | |
- | + | ||
- | + | ||
- | + | ||
- | <li><a href="http://www.script-tutorials.com/category/ | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li><a href="http://www.script-tutorials.com/about/">About</a></li> | <li><a href="http://www.script-tutorials.com/about/">About</a></li> | ||
- | <li><a href="http://www.script-tutorials.com/creating-css3-dropdown-menu/"> | + | <li><a href="http://www.script-tutorials.com/creating-css3-dropdown-menu-4/">Back</a></li> |
</ul> | </ul> | ||
+ | <div style="clear:both"></div> | ||
</div> | </div> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 16:29, 17 April 2013