Анимация открытия меню css

10 Dropdown Menu Animations with CSS Transforms

Dropdown menus allow the user to see more information about a particular topic without overwhelming the page with too much information. Most dropdown menu animations follow one of two patterns, animating the whole menu as a group or animating each item within the menu individually. CSS transforms allow us to animate either pattern with great performance because CSS transforms affect the Composite step in your browser’s Critical Rendering Path rather than the Paint, Layout, or Styles step. Below are five animations using CSS transforms for both the whole menu and each item individually. The CSS syntax is Stylus, which is a similar to SASS.

While animations can add some fun visual flair, keep in mind these examples are slightly exaggerated to make the mechanics of the animation more obvious.

Animating the Whole Dropdown Menu

The structure is the same for all menus: dropdown is the container for the menu title and the hidden menu. dropdown_menu is the actual menu itself, which is by default hidden.

1 . li class="dropdown dropdown-6"> 
2 . Scale Down
3 . ul class="dropdown_menu dropdown_menu--animated dropdown_menu-6"> 
4 . li class="dropdown_item-1">Item 1li> 
5 . li class="dropdown_item-2">Item 2li> 
6 . li class="dropdown_item-3">Item 3li> 
7 . li class="dropdown_item-4">Item 4li> 
8 . li class="dropdown_item-5">Item 5li> 
9 . ul> 
10 . li>

The dropdown_menu is displayed only when the whole dropdown (the title and button) is hovered. This will display the dropdown menu on hover without any animations.

1 . .dropdown_menu
2 . position: absolute
3 . top: 100% 
4 . left: 0 
5 . width: 100% 
6 . perspective: 1000px 
7 . display: none
8 . .dropdown:hover .dropdown_menu--animated
9 . display: block

To animate the menu we need to add the animation property to the dropdown_menu . The animation-name property should be set the name we give to the @keyframes rule, in this case, growDown . The animation-fill-mode property defines what styles should be applied at the end of the animation. In our case, we are animating the menu from the closed state to the open state. This means we want the dropdown menu to preserve the styles of the final animation state, the value forwards allows us to do that.

1 . .dropdown_menu-6 
2 . animation: growDown 300ms ease-in-out forwards

The last property we need to consider is transform-origin, which defines where the animation is applied. For our animations, this property defines where the menu originates from physically. The default setting of transform-origin will scale the menu from the «center of the menu» not from the button. For example, animating the roateX transform property will look like this with the default transform-origin value.

Changing transform-origin to top center will make the animation rotate from the button.

1 . .dropdown_menu-6 
2 . animation: growDown 300ms ease-in-out forwards 
3 . transform-origin: top center

We can choose from any of the 21 transform functions to animate our menu using a @keyframes rule. The only rule we need to follow is that the final state of the animation, the 100% property, must be the normal state for the menu being open. For example, if we animate the scaleY of the menu, we need to make sure that scaleY is set to 1 so the menu looks normal when the animation is finished.

You’ll notice that each animation «goes past» the intended end state around 80% or 70% then returns to the end state at 100% . This is a common technique in animation to create the illusion of momentum or «bounce» to give it more of a natural feel. Two examples are shown below, but check the Codepen above for more examples.

1 . @keyframes growDown 
2 . 0%  
3 . transform: scaleY(0) 
4 . > 
5 . 80%  
6 . transform: scaleY(1.1) 
7 . > 
8 . 100%  
9 . transform: scaleY(1) 
10 . > 
11 . >

1 . @keyframes rotateMenu 
2 . 0%  
3 . transform: rotateX(-90deg) 
4 . > 
5 . 70%  
6 . transform: rotateX(20deg) 
7 . > 
8 . 100%  
9 . transform: rotateX(0deg) 
10 . > 
11 . >

Animating Each Menu Item

The HTML structure is identical to animating the whole menu. Each menu item, however, needs to set opacity to 0 in addition to setting display: none . We do this is because we don’t want all menu items to be visible immediately, like we did when animating the whole menu. Instead, we will animate each into view individually by animating opacity with a transform.

1 . .dropdown_menu li 
2 . display: none 
3 . color: white 
4 . background-color: #34495e 
5 . padding: 10px 20px 
6 . font-size: 16px 
7 . opacity: 0 
8 . &:hover 
9 . background-color: #2980b9 
10 . 
11 . .dropdown:hover .dropdown_menu li 
12 . display: block

Animating the whole menu meant we only needed to add an animation for each menu, but animating each menu item individually means we need to add a separate animation property for each menu item. Fortunately, all menu items will share the same @keyframe rule, same duration, same timing function, same animation-fill-mode , and same transform-origin property. The only property that needs to be different is the animation-delay to stagger each item’s animation.

We could manually write a CSS selector for each dropdown menu item with a different animation-delay or we can take advantage of Stylus’s for loop to iterate over each and generate those selectors automatically. The end result will be the same so let’s use a for loop to make our lives easier.

There are five menu items for each dropdown, to iterate five times we can use the following syntax: for num in (1..5) . Each dropdown_item has a class with a sequential number: dropdown_item-1 , dropdown_item-2 , etc. Therefore, we can select each by using the num variable and selector interpolation: .dropdown_item- . Finally, we can use the num variable to delay each item by an even amount. If the animation duration is 300ms and there are 5 items overall, then we can delay each item by 60ms increments: (num * 60ms) . Putting this all together produces the following:

1 . .dropdown_menu-2 
2 . for num in (1..5) 
3 . .dropdown_item-
 
4 . animation: rotateX 300ms (num * 60ms) ease-in-out forwards 
5 . transform-origin: top center

The @keyframe rules are almost the exact same as the whole menu animations, with the exception of also animating opacity from 0 to 1 .

1 . @keyframes rotateX 
2 . 0%  
3 . opacity: 0; 
4 . transform: rotateX(-90deg); 
5 . > 
6 . 50%  
7 . transform: rotateX(-20deg); 
8 . > 
9 . 100%  
10 . opacity: 1; 
11 . transform: rotateX(0deg); 
12 . > 
13 . >

Источник

Примеры 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.

Источник