Горизонтальное выпадающее меню с эффектом прокрутки на CSS
Использование прокрутки осуществляется с помощью псевдо-элемента :after. Эффект плавного открытия и закрытия выпадающего меню с помощью transition. Это означает, что эффект будет работать только в современных браузерах.
Простая HTML разметка нашей навигации:
Обратите внимание, на атрибуты data-title содержащие имя для каждого из пунктов меню. Идея состоит в том, чтобы добавить элемент li с overflow:hidden. При наведении курсора на пункт меню, изменится цвет его фона и добавится внутренняя тень с плавным переходом.
CSS для навигации без выпадающего меню:
При помощи псевдо-элемента :after, создаётся "копия" ссылки на элемент, который расположен ниже. Для его содержания используется атрибут "data-title".
Мы получили навигацию без выпадающего меню.
Для навигации с выпадающим меню, чтобы использовать смену цвета и добавления внутренней тени с плавным переходом мы не можем использовать элемент li {overflow:hidden}. Для этого придется изменить HTML разметку.
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>
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;
}
Мы получили навигацию без выпадающего меню.
Для навигации с выпадающим меню, чтобы использовать смену цвета и добавления внутренней тени с плавным переходом мы не можем использовать элемент 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;
}
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...