Cеро-голубое меню в стиле web 2.0. Вертикальное. С использованием html и css
Изображение
HTML Код:

Код: Выделить всё

<div id="menu3">
<ul>
 <li><a href="#"><span>Главная</span></a></li>
 <li><a href="#"><span>Поиск</span></a></li>
 <li><a href="#"><span>Регистрация</span></a></li>
 <li><a href="#"><span>Карта сайта</span></a></li>
 <li><a href="#"><span>О сайте</span></a></li>
</ul>
</div>
CSS Код:

Код: Выделить всё

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

#menu3 {
        width: 200px;
        border: 1px solid #ccc;
        margin: 10px;
        }

#menu3 li a {
          height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#menu3 li a:link, #menu3 li a:visited {
        color: #888;
        display: block;
        background: url(/images/menu3.gif);
        padding: 8px 0 0 30px;
        }

#menu3 li a:hover, #menu3 li #current, #menu3 li a:active {
        color: #283A50;
        background: url(/images/menu3.gif) 0 -32px;
        padding: 8px 0 0 30px;
        }
Так же Вам понадобится закачать на сайт две картинки.
Изображение
Изображение
Ссылки с картинок устанавливаем вместо:

Код: Выделить всё

url(/images/menu3.gif)
в

Код: Выделить всё

#menu3 li a:link, #menu3 li a:visited
Серая картинка.
И-

Код: Выделить всё

(/images/menu3.gif)
в

Код: Выделить всё

#menu3 li a:hover, #menu3 li #current, #menu3 li a:active
Голубая картинка.В принципе можно поставить любую картинку. :privet:
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы