CSS Vertical JQuery Menu
Where I'm at currently - http://officialspeed.tk/projects/
ok to get a better understanding of what I'm trying to learn you can head here to see where I'm at.
I wanna hover over the lists and have it so the background slides from being transparent to it's current background color from left to right.
Any help would be much appreciated.
The CSS
body {
background-color:#222;}
a {
transition:all 200ms ease-in-out;
-webkit-transition:all 200ms ease-in-out;
-moz-transition:all 200ms ease-in-out;
-o-transition:all 200ms ease-in-out;}
div#download a {
position:absolute;
bottom:0px;
right:0px;
width:auto;
height:auto;
color:#555;
text-decoration:none;
padding:0px 5px 5px 0px;}
div#download a:hover {
position:absolute;
bottom:0px;
right:0px;
width:auto;
height:auto;
color:#FFF;}
div#navigation {
position:absolute;
top:0px;
left:0px;
width:200px;
height:100%;
background-color:#333;
box-shadow:0px 0px 16px #000;}
ul#nav {
position:absolute;
bottom:50%;
width:80%;
margin:auto;
list-style:none;
margin:0px;}
ul#nav li {
color:#FFF;
background-color:#666;
border-bottom:1px solid #333;
padding:0px 0px 0px 20px;
margin:0px 0px 5px -40px;}
ul#nav li a {
color:#999;
text-decoration:none;}
ul#nav li a:hover {
color:#FFF;}
The index.html
<html>
<head>
<title>Simple Learning Project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="download">
<a href="jquery-flash-like-menu.zip">Download Source!</a>
</div>
开发者_Go百科<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</body>
</html>
WORKING DEMO
play
Just appended a phantom DIV, pay attention in the CSS , now the #nav ul has a higher z-index than our phantom div that will act like a background.
It grabs the height and width of your 'li' element so you are free to change your CSS any time, and our phantom BG will adjust itself!
加载中,请稍侯......
精彩评论