Вы здесь: Главная » CSS » Примеры CSS меню c анимацией с ресурса Codepen

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

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

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

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

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

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.18892

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

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

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

See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.18892

Цветное навигационное меню на основе 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.

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

See the Pen Menu with scroll & hover effects by Ivan Bogachev (@sfi0zy) on CodePen.18892

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

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

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

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

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

See the Pen Frosted Glass Menu | [best in chrome] by Dev Loop (@dev_loop) on CodePen.18892

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

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

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

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

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

See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.18892

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

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

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

See the Pen Fancy tab bar active animation by Aymen Mohammed (@aymen-mohammed) 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-трансформациями.

See the Pen 3D Rotating Navigation by Elen (@ambassador) on CodePen.18892

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

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

See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.0

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

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

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

See the Pen Menu Or Nav Hover Styles by Dev Loop (@dev_loop) on CodePen.18892

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

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

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

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

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.18892

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

See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.18892

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

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

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

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

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

See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.0

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

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

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

See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.18892

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

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

See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.18892

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

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.18892

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

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

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

See the Pen CSS Swinging Panel Menu by Seth Abbott (@sethabbott) on CodePen.18892

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

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.18892

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

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

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

See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.dark

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

Только CSS, без JS-кода

See the Pen CSS Drop-Down Menu Transitions by Shaw (@shshaw) on CodePen.18892

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

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

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

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

See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.18892

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

See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.18892

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

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

See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.18892

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

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

See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.18892

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

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

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

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.18892

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

See the Pen CSS Menu Icon Animation: Know Your Menu by Olivia Ng (@oliviale) on CodePen.18892

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

 

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *