Как сделать burger css

Как сделать — Адаптивное меню навигации

Узнайте, как создать Адаптивное меню навигации с помощью CSS и JavaScript.

Адаптивная навигационная панель

Измените размер окна обозревателя, чтобы увидеть, как работает Адаптивное меню навигации:

Создание адаптивного topnav

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

Пример

<!— Load an icon library to show a hamburger menu (bars) on small screens —>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Ссылка с классом = "Icon" используется для открытия и закрытия topnav на маленьких экранах.

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

Пример

/* Add a black background color to the top navigation */
.topnav <
background-color: #333;
overflow: hidden;
>

/* Style the links inside the navigation bar */
.topnav a <
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Change the color of links on hover */
.topnav a:hover <
background-color: #ddd;
color: black;
>

/* Add an active class to highlight the current page */
.active <
background-color: #4CAF50;
color: white;
>

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon <
display: none;
>

Добавить мультимедийные запросы:

Пример

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) <
.topnav a:not(:first-child)
.topnav a.icon <
float: right;
display: block;
>
>

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) <
.topnav.responsive
.topnav.responsive a.icon <
position: absolute;
right: 0;
top: 0;
>
.topnav.responsive a <
float: none;
display: block;
text-align: left;
>
>

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

Пример

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

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

Узнайте, как сделать меню-иконку (меню-бургер для мобильных устройств), используя 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". Полоса посередине исчезает и становится невидимой.

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

Доброго времени суток! Пытаюсь научиться делать гамбургер-меню, да не получается.

Помогите советом как сделать эту конструкцию рабочей на мобильных устройствах? Чтобы при @media 600px меню и ссылки на сети скрывались под кнопкой и становились рядом с логотипом. Заранее спасибо!

1) Добавить после menu__logo

2) Подключить jquery

3) В CSS добавить:

4) Добавить короткий JS код:

Что до самой иконки "гамбургера", то в сети полно готовых решений. Все остальное — это дело css

И лучше вынести .menu__logo за пределы .menu (поставить перед)

Так проще элементы стилизовать будет.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css responsive или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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