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>

Please provide some code, markup or images describing your problem/question instead of giving external links. Those links could be broken some day. — Yiğit Yener, Jul 23 '11 at 10:19
If I understand well, you want that initially ther's no `li` background, but to slide it once the `li` is hovered , right? — Roko C. Buljan, Jul 23 '11 at 10:21
Yeah roXon exactly. I added the code, with the background color I want when hovered. — Michael Schwartz, Jul 23 '11 at 10:30
Have you tried something already with jQuery? may I see the code? — Roko C. Buljan, Jul 23 '11 at 11:06

Roko C. Buljan · Accepted Answer · 2011-07-23T11:20:11.297

2

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!

edited Jul 23 '11 at 11:20

answered Jul 23 '11 at 11:12

Roko C. Buljan

196,159
39
305
313

Such a simple effect yet I feel so dumb. Thanks – Michael Schwartz Jul 23 '11 at 18:19

CSS Vertical JQuery Menu

1 Answers1

WORKING DEMO