Вертикальная вращающаяся навигация на CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект - вращение.
В тему стиля добавляем:
В то место где хотим видеть навигацию:
Код: Выделить всё
/* Навигация */
#nav {
width: 100%;
}
#nav ul {
list-style: none;
}
#nav ul li {
font-family: Georgia,serif,Times;
font-size: 18px;
}
#nav ul li a {
display: block;
width: 300px;
height: 28px;
background-color: #333;
border-left: 5px solid #222;
border-right: 5px solid #222;
padding-left: 10px;
text-decoration: none;
color: #bfe1f1;
}
#nav ul li a:hover {
-moz-transform: rotate(-5deg);
-moz-box-shadow: 10px 10px 20px #000000;
-webkit-transform: rotate(-5deg);
-webkit-box-shadow: 10px 10px 20px #000000;
transform: rotate(-5deg);
box-shadow: 10px 10px 20px #000000;
}
Код: Выделить всё
<div id="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Наши контакты</a></li>
</ul>
</div>
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.