Lavalamp меню на CSS3
УСТАНОВКА: ШАГ 1. Установка HTML кода. Вставляем в то место, где хотим видеть наше меню. Для всех меню HTML код один, различия присутствую только в CSS классах. Для первого меню - ph-line-nav(которое стоит в коде ниже), для второго - ph-dot-nav, для третьего - ph-heart-nav. Установим CSS стили. Идём в ПУ => Управление дизайном => Таблица стилей CSS. CSS код который ниже характерен для всех трёх вариантов меню. Код
<div class="nav ph-line-nav">
<a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div>
Код
.nav {
overflow: hidden; position: relative; width: 480px; } .nav a { display: block; position: relative; float: left; padding: 1em 0 2em; width: 25%; text-decoration: none; color: #393939; transition: .7s; } .nav a:hover { color: #c6342e; }
| |
Всего комментариев: 0 | |