Изображение
Меню с необычным скользящим эффектом, также известным как эффект Lavalamp. Только на сей раз мы создадим его на чистом CSS.

В нашем меню мы использовали нестандартные шрифты из Google Web Fonts, поэтому первым делом нам нужно добавить необходимый код в заголовок html страницы, перед закрывающим тегом </head> ставим:

Код: Выделить всё

<link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" />
Либо добавляем в тему стиля:

Код: Выделить всё

@import url(http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic);
В нашем примере три меню, у всех одинаковая html структура, разница заключается лишь во втором классе элемента <div>.
Html структура из первого примера:

Код: Выделить всё

<div class="ph-line-nav nav">
	<a href="http://cabinetadmina.ru#">Главная</a>
	<a href="http://cabinetadmina.ru#">О нас</a>
	<a href="http://cabinetadmina.ru#">Галерея</a>
	<a href="http://cabinetadmina.ru#">Контакты</a>
	<div class="effect"></div>
</div>
В каждом следующим примере мы заменяем класс: ph-line-nav, на ph-dot-nav и ph-heart-nav.

CSS. Стили которые используются во всех примерах:

Код: Выделить всё

html, body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html {
	line-height: 1;
}

.nav {
	text-align: center;
	overflow: hidden;
	margin: 2em auto;
	width: 480px;
	position: relative;
	font-family: 'Kelly Slab', cursive;
	font-size: 1.5em;
	text-shadow: 0 1px 0 white;
}
.nav a {
	display: block;
	position: relative;
	float: left;
	padding: 1em 0 2em;
	width: 25%;
	text-decoration: none;
	color: #393939;
    
	-webkit-transition: .7s;
	-moz-transition: .7s;
	-o-transition: .7s;
	-ms-transition: .7s;
	transition: .7s;
}
.nav a:hover {
	color: #c6342e; 
}
Основная магия, если это можно так назвать, начинается здесь:

Код: Выделить всё

.effect {
	position: absolute;
	left: -12.5%;

	-webkit-transition: 0.7s ease-in-out;
	-moz-transition: 0.7s ease-in-out;
	-o-transition: 0.7s ease-in-out;
	-ms-transition: 0.7s ease-in-out;
	transition: 0.7s ease-in-out; 
}

.nav a:nth-child(1):hover ~ .effect {
	left: 12.5%;
}
.nav a:nth-child(2):hover ~ .effect {
	left: 37.5%;
}
.nav a:nth-child(3):hover ~ .effect {
	left: 62.5%;
}
.nav a:nth-child(4):hover ~ .effect {
	left: 87.5%;
}
При наведении мыши на один из элементов <a>, мы плавно перемещаем div.effect к его середине.

Теперь остальной CSS для каждого из примеров.
Пример 1.

Код: Выделить всё

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

Код: Выделить всё

.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%; 
}
Пример 3.

Код: Выделить всё

.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 {
	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 {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 1;
	background-position: -73px 0;
	height: 20px;
	width: 11px;
}
В последнем примере мы используем небольшое изображение в виде сердца со стрелой: Изображение. Сердце состоит из двух псевдо-элементов :before (левая половина сердца) и :after (правая половина). Для :after установлен z-index: 1; так, чтобы при наведении мыши он находился перед стрелкой.

Комментарии: 2

Uzanka 03 авг 2013, 15:07 Сообщение

Уважаемые, форумчане. Подскажите, пожалуйста. Я бы хотела установить себе такое меню под шапкой форума. Попробовала внести изменения, НО весь стиль форума перекосился. Я так понимаю, что из первой группы кодов (в стиле) вот этой "CSS. Стили которые используются во всех примерах:" мне нужно не всё тупо копировать. Видимо, там уже определены .nav и т.п. для МОЕГО форума, а я сейчас их переписываю (стиль). Подскажите, пожалуйста, что делать? КАк внести такое меню, не портя свой основной стиль форума? К сожалению, я в CSS не очень разбираюсь.

наш форум здесь http://www.scienceclub.listbb.ru/index.php
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 03 авг 2013, 15:59 Сообщение

Тут получается что для каждого варианта коды css не полностью разные.
Ставите сначала первую часть кода:

Код: Выделить всё

.nav {
	text-align: center;
	overflow: hidden;
	margin: 2em auto;
	width: 480px;
	position: relative;
	font-family: 'Kelly Slab', cursive;
	font-size: 1.5em;
	text-shadow: 0 1px 0 white;
}
.nav a {
	display: block;
	position: relative;
	float: left;
	padding: 1em 0 2em;
	width: 25%;
	text-decoration: none;
	color: #393939;
    
	-webkit-transition: .7s;
	-moz-transition: .7s;
	-o-transition: .7s;
	-ms-transition: .7s;
	transition: .7s;
}
.nav a:hover {
	color: #c6342e; 
}
.effect {
	position: absolute;
	left: -12.5%;

	-webkit-transition: 0.7s ease-in-out;
	-moz-transition: 0.7s ease-in-out;
	-o-transition: 0.7s ease-in-out;
	-ms-transition: 0.7s ease-in-out;
	transition: 0.7s ease-in-out; 
}

.nav a:nth-child(1):hover ~ .effect {
	left: 12.5%;
}
.nav a:nth-child(2):hover ~ .effect {
	left: 37.5%;
}
.nav a:nth-child(3):hover ~ .effect {
	left: 62.5%;
}
.nav a:nth-child(4):hover ~ .effect {
	left: 87.5%;
}
Затем один из трёх примеров.

Небольшие настройки.
Чтобы уменьшить вертикальные отступы, найдите в:

Код: Выделить всё

.nav {
	text-align: center;
	overflow: hidden;
	margin: 2em auto;
	width: 480px;
	position: relative;
	font-family: 'Kelly Slab', cursive;
	font-size: 1.5em;
	text-shadow: 0 1px 0 white;
}
margin: 2em auto; - 2em меняете на 0.
Также есть отступы у самого текста:

Код: Выделить всё

.nav a {
	display: block;
	position: relative;
	float: left;
	padding: 1em 0 2em;
	width: 25%;
	text-decoration: none;
	color: #393939;
    
	-webkit-transition: .7s;
	-moz-transition: .7s;
	-o-transition: .7s;
	-ms-transition: .7s;
	transition: .7s;
}
padding: 1em 0 2em; - 1em - отступ от верхнего края, 2em - отступ от нижнего края. Меняя их нужно будет немного поправлять отступы в коде одного из выбранных примеров.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы