Как сделать меню гамбургер

Как сделать меню гамбургер

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 571b2e0d89cb7257 • Your IP : 5.45.65.94 • Performance & security by Cloudflare

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

Начальные стили SCSS

Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.

Работа переключателя

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

Читайте также:  История mx записей домена

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

Создание закрытого состояния

Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:

И вот код, который это реализует.

Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github.

Создание открытого меню

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

Магия в мелочах

Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:

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

Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay , немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть финальную демонстрацию здесь.

Читайте также:  Как на клавиатуре поставить знак евро

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

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!

При верстке верхнего меню top-line, всегда требуется для маленьких экранов col-xs-12 делать значок открытия и закрытия меню в виде гамбургера.

Рассмотрим четыре симпатичных примера hamburger menu.

1). Гамбургер меню с плавным изменением полосок.

Добавим див с классом class=toggle, внутри будет тег span.

Ссылка на основную публикацию
Как сделать ксерокопию на принтере epson
Вы можете использовать сканер с принтером, подсоединенные к компьютеру, в качестве копировальной машины. Вы можете увеличивать или уменьшать изображение, восстанавливать...
Как самостоятельно оцифровать видеокассету
На сегодняшний день эра видеокассет безоговорочно подошла к концу, а на ее место пришли цифровые носители. Что делать в том...
Как сбросить биос джампером
Настройки базового оборудования и времени вашего компьютера хранятся в БИОС и, если по какой-то причине у вас возникли проблемы после...
Как сделать левый ноль в частном доме
Популярные материалы Today's: Как сделать левое электричество в частном доме. Подключение левой розетки внутри дома Здесь применяется тот же самый...
Adblock detector