—»     —»   Анимированное выпадающее меню на CSS3
  Раздел: Меню и Навигация, CSS/Style Sheets   Нет комментариев  

Анимированное выпадающее меню на CSS3



Ни для кого не секрет, что с помощью таких свойств CSS3 как переходы, анимация или трансформация, можно сильно повысить привлекательность любой веб-страницы. Сегодня мы хотим рассказать вам о разработке впечатляющего выпадающего меню на CSS3, используя эти возможности.

Анимированное выпадающее меню на CSS3

Давайте быстренько ознакомимся с тем, над чем мы с вами сегодня будем работать:

Анимированное выпадающее меню на CSS3

В общем, это руководство, возможно, следовало бы озаглавить иначе, так как сегодняшнее меню мы будем разрабатывать на основе того, которое создавали ранее, в прошлом примере.

HTML

HTML-структура в целом не изменилась, она проста и минимальна. За одним лишь исключением:

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS-код

Мы изменили стили для того, чтобы наше сегодняшнее меню на CSS3 получилось уникальным и анимированным. Итак, ниже вы можете видеть прокомментированные отрывки стилизации:

Мини-сброс

Сбрасываем исходные ul-стили.

#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}

Основной уровень

#menu в целом представляет собой основной ul для нашего сегодняшнего меню. CSS3-свойства вроде градаций, теней и закругленных углов помогают нам сделать то, что вы можете наблюдать ниже:

Анимированное выпадающее меню на CSS3

#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}

Сбрасываем плавающие элементы

Здесь мы воспользуемся методом сброса от Николаса Гэллахера, которым пользовались и раньше:

#menu:before,
#menu:after {
content: "";
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}

Элементы списка

Анимированное выпадающее меню на CSS3

Пожалуйста, обратите внимание на селектор #menu li:hover > a. Это, вероятно, самый важный CSS-трюк для нашего выпадающего меню на CSS3.

Итак, давайте посмотрим, как это все работает: выбираем элемент «a», который является дочерним элементом «li». Элемент «li» должен быть потомственным элементом «#menu». Подробнее вы можете прочесть здесь.

#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}

#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}

Подменю

Посредством CSS3-переходов мы можем анимировать изменения в таких параметрах CSS как поле (margin) и уровень плотности отображения (opacity). Это очень прикольно, и мы использовали эту возможность для анимация подменю CSS3. Результат получился отличный!

Анимированное выпадающее меню на CSS3

#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}

#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
box-shadow: none;
}

#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}

Стилизация первого и последнего элемента списка

Анимированное выпадающее меню на CSS3

#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}

jQuery

Вероятно, вам уже известно, что IE6 здесь требует отдельного внимания:

$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
});

Так как псевдо-класс :hover не работает с другими элементами кроме анкорной ссылки, нам просто нужно добавить маленький сниппет jQuery, который исправит эту ситуацию. Здесь всё само собой разумеется.

* Посмотреть демо

Поддержка мобильной навигации

Анимированное выпадающее меню на CSS3

Это нечто, что нам очень хотелось реализовать, и мы это сделали. Мы просто добавили поддержку мобильных устройств и исправили навигацию для iPad.

Вам наверное уже известно мы сильно любим решения, полностью основанные на CSS, но теперь пришло время использовать немного jQuery для расширения возможностей нашего меню. Для того чтобы увидеть результат, вы можете просто изменить окно вашего браузера в размере или открыть страницу через смартфон.

Мета-тэг окна просмотра

Для того чтобы все было нужного размера, первым делом нам нужно добавить мета-тэг окна просмотра viewport:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Небольшое обновление кода HTML

Нам нужно обернуть вышеприведенную HTML-структуру при помощи элемента вроде: «nav id="menu-wrap"». Это будет наш элемент, обозначенный относительным значением, необходимый для мобильной навигации.

Дополнение jQuery

После того как страница загружена, нам нужно добавить элемент #menu-trigger, который выполняет именно то, что вы и подумали: запускает мобильное меню, когда по нему производится клик. Далее, в коде CSS, вы увидите, что этот элемент отображается при помощи CSS3 media queries.

Здесь также следует отметить наличие функции определения iPad. Как видно ниже, мы исключаем занятный эффект перехода и переходим к методу переключения display: none/block. Таким образом, функционал будет поддерживаться и на iPad.

/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
$("#menu-trigger").on("click", function(){
$("#menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#menu ul').addClass('no-transition');

CSS для мобильной версии

Здесь весь трюк лежит на плечах CSS3 media queries. Мы добавляем CSS-правила, которые переписывают исходные стили:

#menu-trigger { /* Hide it initially */
display: none;
}

@media screen and (max-width: 600px) {

#menu-wrap {
position: relative;
}

#menu-wrap * {
box-sizing: border-box;
}

#menu-trigger {
display: block; /* Show it now */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
font-weight: bold;
background-color: #111;
/* Multiple backgrounds here, the first is base64 encoded */
background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
display: none;
box-shadow: none;
}

#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}

#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}

#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
box-shadow: none;
}

#menu ul li{
margin-left: 20px;
box-shadow: none;
}

#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}

#menu a:hover{
color: #fafafa;
}

#menu ul a{
padding: 0;
width: auto;
}

#menu ul a:hover{
background: none;
}

#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}

}

@media screen and (min-width: 600px) {
#menu {
display: block !important;
}
}

/* iPad */
.no-transition {
transition: none;
opacity: 1;
visibility: visible;
display: none;
}

#menu li:hover > .no-transition {
display: block;
}

Ваш ход

Надеемся, что вам понравилось наше сегодняшнее руководство, и вы сможете применять данный метод в своих последующих проектах!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 9556   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31