Меню с эффектом лава-лампа на CSS

В данном уроке мы создадим эффект для меню, известный как "лава-лампа", с использованием только CSS.

Шаг 1. Подготовка

Мы будем использовать в нашей демонстрации шрифт Kelly Slab. А нужные изображения разместим в спрайте:

 

Шаг 2. HTML

Каждый из наших трех примеров используется одинаковую структуру меню. Изменяется только класс ph-line-nav, на ph-dot-nav и ph-heart-nav.

	<div class="ph-line-nav nav">
		<a href="#">Главная</a>
		<a href="#">О нас</a>
		<a href="#">Галерея</a>
		<a href="#">Контакт</a>
		<div class="effect"></div>
	</div>

Обобщенный селектор родственников использует символ тильда (E ~ F) и соответствует элементам, которые родственны заданному. Элементы не должны располагаться рядом, первый элемент (E) должен появляться до второго (F). Также они должны иметь общего родителя. Так связываются элементы <a> и div.effect внутри элемента div.nav.

 

Шаг 3. CSS - общие правила

Начнем со стилей, которые являются общими для всех трех примеров. Родительский элемент div.nav позиционируется относительно. Элемент <a> является плавающим. (Примечание: все префиксы браузеров опущены для наглядности).

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; }

Критичная для нашего эффекта часть появляется здесь:

.effect {
  position: absolute;
  left: -12.5%;
  transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
  left: 12.5%; /* середина первого <a> */}
.nav a:nth-child(2):hover ~ .effect {
  left: 37.5%;  /* середина второго <a> */ }
.nav a:nth-child(3):hover ~ .effect {
  left: 62.5%; /* середина третьего <a> */}
.nav a:nth-child(4):hover ~ .effect {
  left: 87.5%; /* середина четвертого <a> */}

Когда курсор мыши оказывается над элементом < a >, элемент div.effect плавно перемещается к середине ссылки. Можно провести ряд экспериментов со временем и функцией перехода. В примере мы используем функцию “ease-in-out”, поэтому переход начинается и заканчивается плавно.

 

Шаг 4. Детали (пример 1)

Начнем с самого простого примера - выскальзывающая линия.  Вам нужно только определить размеры и цвета линии и положение по вертикали.

.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white; 
  margin-left:-45px;
}

Каждый раз мы устанавливаем левое поле равным половине длины элемента, таким образом, эффект всегда  центрируется по ссылке с курсором мыши:

 

Шаг 5. Детали (пример 2)

Теперь рассмотрим эффект с точкой. Мы добавили горизонтальную линию высотой 1px к элементу div.nav. Для решения задачи используем псевдо-элемент :after. Также добавляем небольшую точку, позиционируемую на линию под каждым пунктом меню (снова используем :after). Элемент div.effect теперь является кругом 10px и его свойства аналогичны предыдущему примеру.

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #c6342e;
  bottom: 40px; }
.ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 38px;
  left: 50%;
  margin-left: -2px; 
  background: #c6342e;
  border-radius: 100%; }
.ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px; 
  margin-left: -5px;
  background: #c6342e;
  border-radius: 100%; }

 

Шаг 6. Детали (пример 3)

В завершение рассмотрим наш последний пример с сердцем, пронзаемым стрелкой.  Сердце состоит из двух элементов, добавляемых с помощью псевдо-элементов :before (левая часть) и :after (правая часть). Псевдо-элемент a:after имеет значение свойства z-index равным 1, поэтому он позиционируется над стрелкой.

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
  background: url('../images/heart.png') no-repeat; }

.ph-heart-nav .effect {
  position: absolute;
  bottom: 26px;
  background-position: 0 0;
  height: 8px;
  width: 62px; 
  margin-left:-31px; }

.ph-heart-nav a:before, .ph-heart-nav a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  background-position: -62px 0;
  height: 20px;
  width: 11px;
  margin-left: -11px; }

.ph-heart-nav a:after {
  z-index: 1;
  background-position: -73px 0; }

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yy3zPuK0toE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Меню с эффектом лава-лампа на CSS | | 2013-02-02 02:40:25 | | Статьи Web-мастеру | | В данном уроке мы создадим эффект для меню, известный как лава-лампа, с использованием только CSS.Шаг 1. ПодготовкаМы будем использовать в нашей демонстрации шрифт Kelly Slab. А нужные изображения | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: