Вертикальная вращающаяся навигация на 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>
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.