Как сделать бургер css

Как сделать бургер css

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: 6b84299a3bce77b0 • Your IP : 89.162.247.52 • Performance & security by Cloudflare

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

Узнайте, как сделать меню-иконку (меню-бургер для мобильных устройств), используя CSS.

Как сделать меню иконку

Если вы не используете библиотеку иконок, вы можете создать иконку основного меню с помощью CSS:

Меню иконка (бургер):

Анимированная иконка (кликните на ней):

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

Объяснение примера

Свойства width и height определяют ширину и высоту каждой полосы.

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

Анимированная иконка

Используйте CSS и JavaScript, чтобы изменить иконку меню на иконку "отменить / удалить" при нажатии на неё:

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.container <
display: inline-block;
cursor: pointer;
>

.bar1, .bar2, .bar3 <
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
>

/* Поворот первой полосы */
.change .bar1 <
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
>

/* Исчезание второй полосы */
.change .bar2 <
opacity: 0;
>

/* Поворот последней полосы */
.change .bar3 <
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
>

Шаг 3) Добавить JavaScript:

Пример

Объяснение примера

HTML & CSS: Мы используем те же стили, что и раньше, только на этот раз мы оборачиваем элемент контейнера вокруг каждого элемента <div> и мы указываем имя класса для каждого из них.

Элемент контейнера используется для отображения символа указателя, когда пользователь наводит указатель мыши на блоки div (полосы). Когда на нем кликают, он выполняет функцию JavaScript, которая добавляет к нему новое имя класса, что изменяет стили каждой горизонтальной полосы: первая и последняя полоса трансформируются и поворачиваются, преобразуясь в букву "x". Полоса посередине исчезает и становится невидимой.

Готовим бургер меню на CSS, HTML и JQuery

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

Предлагаю закодить этот фокус в своем текстовом редакторе! И первым шагом на пути к бургеру будет техническое задание:

Техническое задание:

У нас имеются готовые html и css файлы со стандартным горизонтальным меню в шапке сайта и отличным юзабилити для просмотра страницы на широком экране. В настоящий момент меню выглядит следующим образом:

Текущий HTML-файл:

Текущий CSS-файл:

Шапочка выглядит пустовато: я не стала размещать логотип и другие элементы, чтобы не отвлекаться от работы с меню. Несмотря на это, при сужении экрана пункты меню наползают друг на друга и шапка превращается в хаос. Поэтому нужно для экранов мобильных устройств, то есть для таких гаджетов, у которых ширина менее 768px:

1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении ниже:

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

3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.

4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.

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

Инструменты: HTML, CSS, JQuery

1. Рисуем бургер меню в левом верхнем углу шапки

В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом &#171;menu-burger__header&#187;:

Над этим блоком мы и поколдуем!

Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)

Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:

В нашем бургере будет 3 слоя. Средний слой практически готов: его образует пара тегов <span></span>, размещенных в блоке <div Осталось лишь определить размеры слоя и окрасить его, дабы он стал видимым для пользователей. Верхний и нижний слои мы создадим посредством псевдоэлементов :before и :after. В моем бургере все 3 слоя будут одинаковы на вид, отличать их будет лишь занимаемая позиция. Поэтому я задам общие для этих слоев стили для прорисовки слоев, а ниже добавлю позиционирующие стили для каждого слоя отдельно:

После этого можно сохранить стили и обновить страницу — бургер создан!

Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:

В результате меню приобрело следующий вид:

Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:

Теперь я довольна результатом и предлагаю двигаться дальше:

2. Пишем скрипт анимации бургера при клике мыши.

Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом </body> в html-файле я добавила строку:

А ниже подключим файл script.js, который расположим в папке «js»:

Библиотека подключена, js-файл создан, пришло время покодить в файле &#171;menu.js&#187;! Первым делом посредством метода click() привяжем обработчик событий click к нажатию на иконку бургера. Если нажатие произошло, то добавим к блоку с меню дополнительный класс &#8216;open-menu&#8217;:

Осталось лишь прописать изменения в стилях. Я предлагаю наколдовать плавное исчезновение среднего слоя бургера и одновременные повороты верхнего и нижнего слоев до образования крестика:

Анимация бургера удалась на славу! А это значит, что мы переходим к следующему пункту ТЗ:

3. Создаем CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.

В конце 1 пункта статьи мы приняли временную меру &#8212; скрыли горизонтальное меню свойством display: none

Давайте вернем горизонтальное меню в область видимости, заменив значение «none» на «block»:

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

Зададим свойства селекторам «.header__menu» и «.header__menu li» для узких экранов:

Посмотрим, что получилось:

Вертикальное меню готово! Осталось сделать анимацию так, чтобы меню выдвигалось слева при нажатии на иконку бургера!

4. Создаем анимацию плавного выдвижения вертикального меню из левого края страницы.

Анимацию будем создавать посредством свойства transition, примененного к селектору .header__nav. Сначала мы зададим блоку с классом «header__nav» смещение влево на 100% и пропишем свойство transition со значением «all 0.4s ease» для того, чтобы изменение свойств блока с меню происходило в течение 0.4s:

Само изменение свойств блока будет происходить при наступлении события — клика по левой кнопки мыши. В CSS это событие будет проявляться добавлением класса «open-menu» в блок с меню рядом с классом «header__nav». Сразу запишем для селектора .header__nav.open-menu меняющееся свойство:

Осталось привязать добавление класса «open-menu» к щелчку по левой кнопки мыши. Для этого вернемся в созданный ранее js файл и добавим строку &#171;$(&#8216;.header__nav&#8217;).toggleClass(&#8216;open-menu&#8217;):&#187;

Меню готово и работает так, как и планировалось:

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

Зачистим шероховатости: добавим прокрутку в меню и уберем скроллинг основного текста на странице.

Для того, чтобы меню прокручивалось в случае, если оно не вмещается на экран мобильного устройства, добавим в селектор «.header__menu» свойство «overflow: auto»:

Теперь меню в случае расширения будет легко скроллиться на кротких экранах. Однако, вместе с меню будет прокручиваться и основной текст страницы, расположенный под меню. Это может привести к неожиданным эффектам. Чтобы такой ситуации не произошло, заблокируем тело страницы на весь период, пока будет открыто меню. Для этого добавим телу страницы body класс при открытом меню: $(&#8216;body&#8217;).toggleClass(&#8216;fixed-page&#8217;);

А в CSS-свойствах добавим блокировку страницы для блока с классом «fixed-page»:

Ура! Все отлично работает и радует глаз верстальщика. А если и остались какие-то шероховатости, то всегда можно взять в эти руки напильник и допилить основу до нужного состояния! Всем удачи, и вкусных вам бургеров!

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

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