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

Как сделать бургер html 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: 6b8429e68fea2d7f • Your IP : 89.162.247.52 • Performance & security by Cloudflare

Адаптивная навигация гамбургер на CSS3

Адаптивная навигация гамбургер на CSS3

Также это адаптивные меню, которая по своему функционалу сворачивающиеся в гамбургер, это когда открываете сайт с мобильного устройства, что сейчас можно видеть практически на любом сайте. Но здесь есть одна фишка, которая заключается в кнопки hamburger, где при открытии меняется и преображается в другую форму. Вам нужно самому написать название сайта, что расположено с левой стороны, но все запросы останутся по правую сторону, где все выполнено с помощью HTML и CSS.

По умолчанию с широкого монитора:

Адаптивное меню на CSS для сайта

Это видим с любого гаджет, где при нажатие откроются категории:

Горизонтальное меню для сайта в адаптивном стиле

Здесь автоматически переходит вертикальное положение на мобильном аппарате:

Мобильный стиль навигации на CSS

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

.menyu-navigatsig <
background-color: #f7f7f7;
box-shadow: 1px 1px 4px 0 rgba(35, 35, 35, 0.26&#41;;
position: fixed;
width: 100%;
z-index: 3;
border-bottom: 2px solid;
border-color: #ababab;
margin: 0px 0px 0px 0px;
>

.menyu-navigatsig ul <
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
>

.menyu-navigatsig li a <
display: block;
padding: 18px 18px;
border-right: 1px solid #f3f3f3;
text-decoration: none;
>

.menyu-navigatsig li a:hover, .menyu-navigatsig .navigation-btn:hover <
background-color: #636060;
color: #fdf7f7;
>

.menyu-navigatsig .logo <
display: block;
float: left;
font-size: 24px;
padding: 15px 12px;
text-decoration: none;
>

.menyu-navigatsig .navigation <
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
>

.menyu-navigatsig .navigation-icon <
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
>

.menyu-navigatsig .navigation-icon .categorua <
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
>

.menyu-navigatsig .navigation-icon .categorua:before,
.menyu-navigatsig .navigation-icon .categorua:after <
background: #333;
content: »;
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
>

.menyu-navigatsig .navigation-icon .categorua:before <
top: 5px;
>

.menyu-navigatsig .navigation-icon .categorua:after <
top: -5px;
>

.menyu-navigatsig .navigation-btn <
display: none;
>

.navigation <
max-height: 240px;
>

.navigation-icon .categorua <
background: transparent;
>

.navigation-icon .categorua:before <
transform: rotate(-45deg&#41;;
>

.navigation-icon .categorua:after <
transform: rotate(45deg&#41;;
>

.navigation-icon:not(.steps&#41; .categorua:before,
.menyu-navigatsig .navigation-btn:checked

.navigation-icon:not(.steps&#41; .categorua:after <
top: 0;
>

@media (min-width: 48em&#41; <
.menyu-navigatsig li <
float: left;
>
.menyu-navigatsig li a <
padding: 20px 30px;
>
.menyu-navigatsig .navigation <
clear: none;
float: right;
max-height: none;
>
.menyu-navigatsig .navigation-icon <
display: none;
>
>

PS — здесь нужно добавить, так как при проверки на работоспособность, то решил немного стиль изменить, если на demo странице идет по умолчанию. А вот здесь представлен материал как на закрепленном изображение, где нижнее полоса выставлена, что идет на 2 пикселя, где можно тень убрать или добавить, и также при наведении кардинально цветовая схема изменена.

Быстрое создание &#171;гамбургер&#187; меню на jQuery

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

Подробное видео на эту тему.

Создание HTML макета

Добавление основных CSS стилей

Добавление JS

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

Давайте подробнее рассмотрим что тут написна. В начале мы вешаем собитые .on по клику на самоу кнопку &#171;Меню&#187;. В нутри этого события мы добовляем на $(&#171;.menu&#187;) выподающее меню функцию slideToggle() которая будет производить плавное открытие и закрытие выподающего меню.

Есть небольшая проблема которая у нас возникнет при переходе версий сайта и нажитие на кнопку &#171;Меню&#187;, а именно будет скрываться блок с самими пунктами меню т.к. по умолчанию функция slideToggle() при закрытие добавляет атребут &#171;display: none&#187;. Что бы исправить этот баг нужно вызвать колбэк(функция которая будет вызыватся после отработки основной функции) для функции slideToggle() . В нутри колбека мы пишем условие. Если у нас атрибу в блоке меню равен &#171;display: none&#187; тогда мы удаляем этрибут &#171;style&#187;.

Заключение

Вот так отчень просто и быстро мы создали адаптивно меню &#171;гамбургер&#187; которое вы можете лекго использовать в смоих проектах. Тут вы можете скачать исходники. С вами был Corvax. Да новых встреч!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.

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

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