—»     —»   Выпадающее анимированное меню навигации на CSS3
  Раздел: Меню и Навигация   Нет комментариев  

Выпадающее анимированное меню навигации на CSS3



В данном руководстве речь пойдет о разработке привлекательного выпадающего меню при помощи кода CSS3 и иконического шрифта Font Awesome. Иконический шрифт – это, как уже понятно из термина, шрифт, в котором иконки выступают в роли символов. Это означает, что у вас есть возможность получить векторные иконки во всех браузерах, которые поддерживают пользовательские шрифты HTML5 (а значит, практически все браузеры). Для того чтобы добавить иконки к элементам, вам нужно лишь приписать классовое имя и иконку, которая будет добавлена, посредством элемента :before.

Выпадающее анимированное меню навигации на CSS3

HTML-код

Вот разметка, с которой мы будем рабтоать:

Index.html

<nav id="colorNav">
<ul>
<li class="green">
<a href="#" class="icon-home"></a>
<ul>
<li><a href="#">Dropdown item 1</a></li>
<li><a href="#">Dropdown item 2</a></li>
<!-- More dropdown options -->
</ul>
</li>

<!-- More menu items -->

</ul>
</nav>

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

Выпадающее анимированное меню навигации на CSS3

CSS-код

Как видно во HTML-фрагменте выше, у нас есть неупорядоченные списки, вложенные в основной ul, поэтому нам нужно писать наш CSS-код с особым вниманием. Нам не нужно, чтобы стилизация верхнего UL пересекалась с последующими элементами. К счастью, именно для этого есть специально предназначенный селектор в css «>»:

assets/css/styles.css

#colorNav > ul{
width: 450px;
margin:0 auto;
}

Это создает ограничение объявления ширины и полей только для первого неупорядоченного списка, который является прямым последователем нашего пункта #colorNav. Учитывая это, давайте посмотрим, как будут выглядеть сами пункты нашего меню:

#colorNav > ul > li{ /* will style only the top level li */
list-style: none;
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
}

Мы выставляем значение отображения inline-block для того, чтобы пункты списка отображались одной линией, а затем приписываем относительное позиционирование, чтобы у нас была возможность корректно сместить выпадающие списки. Анкорные элементы содержат иконки, указанные при помощи Font Awesome.

#colorNav > ul > li > a{
color:inherit;
text-decoration:none !important;
font-size:24px;
padding: 25px;
}

Теперь мы можем продолжить с нашими выпадающими списками. Здесь мы будем определять CSS3-анимацию transition. Мы выставим maximum-height на 0 пикселей, что скроет выпадающий список. При наведении мы анимируем параметр max-height, выставив большее значение, которое приведет к тому, что список постепенно покажется:

#colorNav li ul{
position:absolute;
list-style:none;
text-align:center;
width:180px;
left:50%;
margin-left:-90px;
top:70px;
font:bold 12px 'Open Sans Condensed', sans-serif;

/* This is important for the show/hide CSS animation */
max-height:0px;
overflow:hidden;

-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}

Это и будет триггер анимации:

#colorNav li:hover ul{
max-height:200px;
}

Значение 200px здесь произвольно, поэтому вам придется увеличить его, если ваш выпадающий список содержит множество значений, которые не совпадают. К несчастью, здесь нет способа, который позволил бы нам использовать только css-код.

Следующий этап заключается в стилизации самих пунктов выпадающего списка:

#colorNav li ul li{
background-color:#313131;
}

#colorNav li ul li a{
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
background-color:#363636;
}

#colorNav li ul li:hover{
background-color:#444;
}

#colorNav li ul li:first-child{
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}

#colorNav li ul li:last-child{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}

И, конечно же, нам никуда не деться от пестрых цветов. Предлагаем вам 5 версий:

#colorNav li.green{
/* This is the color of the menu item */
background-color:#00c08b;

/* This is the color of the icon */
color:#127a5d;
}

#colorNav li.red{ background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{ background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{ background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{ background-color:#df6dc2;color:#9f3c85;}

Стоит отметить, что при использовании иконических шрифтов для того, чтобы изменить цвет иконки, нам нужно лишь выставить параметр color. Это означает, что всё оформление, которое вы хотите выставить, можно реализовать посредством чистого кода CSS.

Готово!

Иконические шрифты – это отличное дополнение к набору инструментов любого веб-разработчика. Так как это, в принципе, простые шрифты, вы можете использовать параметры font-size, color и text-shadow. В этом примере мы не используем изображения и JS, поэтому у вас вряд ли возникнут проблемы с интеграцией примера в ваш существующий дизайн.

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

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

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930