CSS вертикальное меню JQuery - PullRequest
Новая
       21

CSS вертикальное меню JQuery

0 голосов
/ 23 июля 2011

Где я сейчас нахожусь - http://officialspeed.tk/projects/

хорошо, чтобы лучше понять, что я пытаюсь узнать, вы можете сюда посмотреть, где я нахожусь.

Я хочу навести курсор на списки и сделать так, чтобы фон переместился с прозрачного на текущий цвет фона слева направо.

Любая помощь будет принята с благодарностью.

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;}

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 Ответ

2 голосов
/ 23 июля 2011

WORKING DEMO

play

Только что добавил фантомный DIV, обратите внимание в CSS, теперь #nav ul имеет более высокийz-index, чем наш фантомный div, который будет действовать как фон.

Он захватывает высоту и ширину вашего элемента 'li', так что вы можете в любое время изменить свой CSS, и наш фантомный фон BG настроится сам!

...