Анимация выпадающего меню css

Полноцветное анимированное навигационное меню на CSS3

В этой короткой статье мы создадим полноцветное выпадающее меню, используя только CSS3 -эффекты и шрифтовые иконки Font Awesome . Шрифтовые иконки – это набор изображений, которые отображаются на символах вместо изображений соответствующих букв.

Поэтому такие иконки работают в любом достаточно современном браузере, который поддерживает HTML5 -шрифты. Чтобы добавить иконку к элементу, нужно только включить этот элемент в соответствующий класс, а всю остальную работу сделает файл стиля awesome при помощи элемента :before .

Демонстрация

Загрузить файлы

HTML

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

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

CSS

наследовали всё оформление от выше лежащих. К счастью, именно для таких случаев в CSS существует селектор “>”:

assets/css/styles.css #colorNav > ul

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

Чтобы отображать пункты меню в одной строке, мы задаём свойству display значение inline-block . Чтобы выпадающие меню отображались там, где нужно, свойство position должно иметь значение relative . Определим Awesome -иконки как часть стиля ссылок:

Теперь перейдём к выпадающим спискам. Самое интересное здесь – CSS3 -анимация. Скроем списки, присвоив их свойству maximum-height значение 0 . При наведении мы будем анимировать maximum-height до большего значения, что заставит наш список постепенно открываться:

А вот – событие, запускающее анимацию:

Значение в 200 пикселей здесь взято произвольно. Вы можете увеличить его, если какие-то из ваших меню получились длиннее. К сожалению, не существует способа определить высоту блока средствами 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

Разумеется, наше меню потеряет смысл, если нельзя будет играть с цветами элементов так, как мы захотим! Вот 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

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

Готово!

Шрифтовые иконки – отличное дополнение к набору повседневных инструментов любого веб-разработчика. Иконки являются символами, следовательно, мы можем применять к ним font-size , color , text-shadow и другие текстовые атрибуты.

А поскольку благодаря шрифтовым иконкам наш пример обошёлся без использования файлов изображений или скриптов, вы с лёгкостью сможете адаптировать его к дизайну любого существующего сайта.

Редакция Перевод статьи « Colorful CSS3 Animated Navigation Menu »

Источник

Примеры CSS меню c анимацией с ресурса Codepen

Возможно, вы слышали о ресурсе Codepen, на котором можно создавать файлы примеров для использования их в проектах. В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.

Простые меню вы можете разобрать с помощью статьи «Виды горизонтальных меню для сайта». Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.

Flexbox-меню с перекрытием экрана

Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана. Используются трансформации и анимация с помощью свойства transition . Также используется код на jQuery.

Меню со слайд-эффектом

При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.

В примере используются html-, css- и js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт «View compiled HTML» и т.п. при редактировании этого примера на Codepen.

Цветное навигационное меню на основе CSS и jQuery

В этом css-меню используется эффект изменения цвета активной точки при наведении на один из пунктов. Как и в предыдущих меню, без jQuery здесь не обошлось.

See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.18892

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.18892

Скошенное меню

В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew() . Очень интересный вид, полученный путем трансформации списка ссылок.

See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.18892

CSS меню с эффектами при прокручивании и наведении

В этом меню использованы эффекты при прокручивании (скроллинге), связанные с 3d-трансформациями и увеличении масштаба при наведении. Также не обошлось без JavaScript.

Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.

Меню для мобильной версии сайта или приложения

Это меню «заточено» под мобильную версию сайта или мобильное приложение. Используется не только css-форматирование, но и JavaScript-код.

See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.18892

Боковое выезжающее меню с эффектом размытости стекла

Разметка с использованием CSS и нативного JS-кода

Анимационное меню с SVG (UI Navigation Concept)

Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.

See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.18892

Желеобразное меню для мобильных устройств

Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.

Иконочное меню для мобильных

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892

Меню с иконками для мобильных

CSS меню с кнопкой по центру header

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.18892

Социальное меню с выезжающими иконками

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892

Верхнее выезжающее css-меню c иконкой-гамбургером

Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной версии. Помимо CSS, используется минимальный код на JS.

See the Pen Toggle menu by Tristan White (@triss90) on CodePen.18892

Еще один вариант с небольшими 3D-трансформациями.

Боковая панель с меню

Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.

Еще один пример для панели администратора

See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.18892

Интересное боковое меню для лэндинга или одноэкранной презентации

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.18892

Неоновая анимация при наведении на горизонтальное и вертикальное меню

Выезжающее сбоку меню

В коде используется не только css, но и JS-код

See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen.18892

Второй вариант выезжающего сбоку меню основан только на CSS:

Боковое css-меню с анимацией

Выезжающее сверху CSS меню

При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.

See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.0

Навигационное меню в стиле Material Design

Приятное меню, которое появляется со слайд-эффектом с помощью css-transition и небольшого jQuery-кода.

Еще один вариант в стиле Material Design с круглыми кнопками

See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.18892

Вторая версия меню с круглыми кнопками.

Раскрывающееся вниз (Dropdown) меню

В примере использованы CSS и JS-код.

Еще один вариант dropdown-меню

Вариант с интересной анимацией при наведении

See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.18892

Трансформация скоса в выпадающем меню при наведении курсора мыши

Выпадающее (Dropdown) меню на CSS

Выпадающее по клику меню в стиле Bootstrap

See the Pen OnClick Dropdown by Sazzad (@sazzad) on CodePen.18892

Выезжающее меню слева в стиле Bootstrap 3

Выезжающее меню с CSS-анимацией

Выезжающее сверху меню с анимацией

Есть переключатель для темной/светлой темы и анимация в виде круга, перемещающегося за курсором мыши. CSS+JS-код.

See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.18892

Отзывчивое мега-меню с использованием jQuery

CSS-меню с несколькими уровнями вложенности

Отзывчивое меню с несколькими уровнями вложенности

Использует не только CSS, но и jQuery.

CSS-меню с вкладками

Стоит, наверное, отключить видимость radio-переключателей в конечной версии меню.

Варианты анимации иконки-гамбургера

See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.18892

SVG-Анимация при наведении на иконку гамбургера в боковой панели

Еще варианты анимации иконки-гамбургера.

Различные варианты оформления меню вы можете найти также на freefrontend.com, onaircode.com и navnav.co.

Источник