Cеро-голубое меню в стиле web 2.0. Вертикальное. С использованием html и css
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>
Код: Выделить всё
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
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...