Горизонтальное выпадающее меню с эффектом прокрутки на CSS
Изображение
Использование прокрутки осуществляется с помощью псевдо-элемента :after. Эффект плавного открытия и закрытия выпадающего меню с помощью transition. Это означает, что эффект будет работать только в современных браузерах.

Простая HTML разметка нашей навигации:

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

<nav class="ph-lift">
	<ul>
		<li class="active"><a href="http://cabinetadmina.ru/" data-title="Главная">Главная</a></li>
		<li><a href="#" data-title="Мои работы">Мои работы</a></li>
		<li><a href="#" data-title="О нас">О нас</a></li>
		<li><a href="#" data-title="Контакты">Контакты</a></li>
		<ul></ul>
	</ul>
</nav>
Обратите внимание, на атрибуты data-title содержащие имя для каждого из пунктов меню. Идея состоит в том, чтобы добавить элемент li с overflow:hidden. При наведении курсора на пункт меню, изменится цвет его фона и добавится внутренняя тень с плавным переходом.

CSS для навигации без выпадающего меню:

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

nav.ph-lift {
	text-align: center; 
}
nav.ph-lift > ul {
	display: inline-block;
	position: relative; 
}  
nav.ph-lift > ul:after {
	box-shadow: 0 0 10px rgba(0, 128, 128, 0.5); 
}
nav.ph-lift ul li {
	float: left;
	height: 90px;
	line-height: 90px;
	background: white;
	overflow: hidden;
	-webkit-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-o-transition: all.6s ease;
	-ms-transition: all.6s ease;
	transition: all.6s ease; 
}
nav.ph-lift ul li:hover {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
	background: teal; 
}
nav.ph-lift ul li a {
	display: block;
	text-decoration: none;
	color: #007e7e;
	padding: 0 45px;
	margin-top: 0;
	-webkit-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-o-transition: all.6s ease;
	-ms-transition: all.6s ease;
	transition: all.6s ease; 
}
nav.ph-lift ul li:hover a {
	margin-top: -90px;
	color: white;
	text-shadow: 0 1px 2px  black; 
}
nav.ph-lift ul li a:after {
	content: attr(data-title);
	display: block; 
}
При помощи псевдо-элемента :after, создаётся "копия" ссылки на элемент, который расположен ниже. Для его содержания используется атрибут "data-title".

Мы получили навигацию без выпадающего меню.
Для навигации с выпадающим меню, чтобы использовать смену цвета и добавления внутренней тени с плавным переходом мы не можем использовать элемент li {overflow:hidden}. Для этого придется изменить HTML разметку.

CSS для навигации с выпадающим меню:

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

nav.ph-lift {
	text-align: center; 
}
nav.ph-lift ul {
	display: inline-block; 
}
nav.ph-lift ul:after {
	box-shadow: 0 0 10px rgba(85, 107, 47, 0.5); 
}
nav.ph-lift > ul > li {
	float: left; 
}
nav.ph-lift ul li {
	height: 80px;
	line-height: 80px;
	background: white;
	-webkit-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-o-transition: all.6s ease;
	-ms-transition: all.6s ease;
	transition: all.6s ease; 
}
nav.ph-lift ul li ul {
	max-height: 0;
	-webkit-transition: all.6s ease;
	-moz-transition: all.6s ease;
	overflow: hidden;
	display: block; 
}
nav.ph-lift ul li:hover {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
	background: darkolivegreen; 
}
nav.ph-lift ul li:hover ul {
	max-height: 300px; 
}
nav.ph-lift ul li a {
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: #546a2f;
	height: 80px; 
}
nav.ph-lift ul li ul li a {
	color: #7e7e00; 
}
nav.ph-lift ul li ul li:hover {
	background: olive; 
}
nav.ph-lift ul li a span {
	-webkit-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-o-transition: all.6s ease;
	-ms-transition: all.6s ease;
	transition: all.6s ease;
	display: block;
	padding: 0 40px;
}
nav.ph-lift ul li:hover > a span {
	margin-top: -80px;
	color: white;
	text-shadow: 0 1px 2px  black;
}
nav.ph-lift ul li a span:after {
	content: attr(data-title);
	display: block;
}
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы