CSS Vertical JQuery Menu
Question
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>
<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>
1 answers
solution1
2 ACCPTED 2011-07-23 11:12:40
WORKING DEMO
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.