Бургер меню на HTML, CSS, JS

В этом видео я расскажу Вам как создать бургер меню для вашего сайта на HTML, CSS и JS.

#codeburger

[alenalel]

Так круто, все по делу, с объяснениями, спасибо большое :3

[eyeqchj]

Верстка лаконичная, понравилась. Лайк, однозначно. Единственный косячок: для класса .burger-menu__nav автор забыл для position: fixed прописать параметр top:0; Для всех страдающих привожу код на чистом JS. Если вы не меняли названия классов в видео на другие, то будет работать, как часы. Даже если у вас подключена для каких-то других нужд библиотека jquery. Код смотрите и забирайте ниже:
function burgerMenu(selector) {
let menu =
let body =
let button =
let links = //выбираем все пункты меню
let overlay =

button.addEventListener('click', e => { //клик по кнопке
e.preventDefault();
toggleMenu();
});

links.forEach(link => link.addEventListener('click', () => toggleMenu())); // клик по любому пункту меню
overlay.addEventListener('click', () => toggleMenu()); // клик по оверлею

function toggleMenu(){
if {

body.style.overflow = 'visible';
} else {

body.style.overflow = 'hidden';
}
}
}
burgerMenu('.burger-menu');

Пользуйтесь на здоровье.

[fegustinplaz]

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

[collibri]

Ловите исходник:


/*JS:*/


function burgerMenu(selector) {
let menu = $(selector);
let button =
let links =
let overlay =

button.on('click', (e) => {
e.preventDefault();
toggleMenu();
});

links.on('click', () => toggleMenu());
overlay.on('click', () => toggleMenu());


function toggleMenu(){


if {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'visible');
}
}
}


burgerMenu ('.burger-menu');




/*HEAD*/
<div class="burger-menu">
<a href="#" class="burger-menu__button">
<span
</a>
<nav class="burger-menu__nav">
<a href="#" 1</a>
<a href="#" 2</a>
<a href="#" 3</a>
<a href="#" 4</a>
<a href="#" 5</a>
</nav>
<div
<script
</div>


/*STYLE*/


* {
margin: 0;
padding: 0;
}


.section {
display:flex;
align-items: center;
justify-content: center;
height: 100vh;
}




.burger-menu__button {
position: fixed;
top: 10px;
left: 10px;
z-index: 30;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #2a2a2a;
}


.burger-menu__button:hover .burger-menu__lines {
filter: brightness(0.7);
}


.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before {
position: absolute;
width: 40px;
height: 6px;
background-color: #fff;
}


.burger-menu__lines {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


.burger-menu__lines::before {
content: '';
top: -12px;
}


.burger-menu__lines::after {
content: '';
top: 12px;
}


.burger-menu_active .burger-menu__lines {
background-color: transparent;
}


.burger-menu_active .burger-menu__lines::before {
top: 0;
transform: rotate(45deg);
}


.burger-menu_active .burger-menu__lines::after {
top: 0;
transform: rotate(-45deg);
}


.burger-menu__nav {
padding-top: 80px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}


.burger-menu_active .burger-menu__nav{
left: 0;
}


.burger-menu__link {
padding: 30px;
font-family: sans-serif;
font-size: 32px;
text-decoration: none;
color: #fff;
}


.burger-menu__link:hover {
filter: brightness:(0.7);
}


.burger-menu__overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
}


.burger-menu_active .burger-menu__overlay {
display: block;
background-color: rgba(0, 0, 0, 0.5);
}

[jak]

наконец то адекватный ... давай дружище продолжай! подписка лайк !

[SergeyMargelov]

14 минут ждал, чтобы написать код на чистом JS, потому что в названии именно так и написано, но автор решил что jQuery это и есть JS. Жаль. В остальном — хороший мануал

[Unknown-rxbr]

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

[melissasofie]

Спасибо большое, ты молодец.
Давай ещё что-нибудь придумай.

[rzmbttu]

благодарю, все получилось с бургером)

[Mykhailo_Vdovychenko]

Отличный урок! Все круто, спасибо!
Кому надо, вот JS:


function burgerMenu(selector) {
let menu = $(selector);
let button =
let links =
let overlay =

button.on('click', (e) => {
e.preventDefault();
toggleMenu();
});

links.on('click', () => toggleMenu());
overlay.on('click', () => toggleMenu());

function toggleMenu() {

if {
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'visible');
}
}
}

burgerMenu ('.burger-menu');

[frednoby]

По нормальному бургер меню должно быть на весь экран, блоки burger-menu__link должны быть элементами списка ul, а эффект изменения яркости блоков при наведении можно было сделать проще при помощи opacity, к тому же для burger-menu__nav нужно было задать ширину, а для текста элементов списка бургера задать ограничение по длине (на случай "большого" текста). Ну, это как минимум. Хотя для самых начинающих верстальщиков достаточно и того, что Вы сделали.

[nojga]

спасибо, всё чётко. Единственное жаль, что не на чистом js последнгяя часть видео - ничего не понял, к сожалению, а ограничение скролла вещь полезная

[ccdjnhn]

Брат что за музло на фоне) Прокачало) Посмотрел бургер ушел на движ)

[raula.]

Спасибо за видео, можно вопрос, почему использовали "a", вместо "button"?

[dmitriyparhomenko]

Хорошие видео, только фоновую музыку нужно убрать или сделать тише

[yodspie]

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

[vladimirpotapov]

Большое спасибо за урок!
Еще возникает один кейс, который не знаю как решить.
У тебя в браузере не стоит скролл по умолчанию, у меня он стоит всегда, если контент по высоте больше окна браузера. Когда я открываю бургер меню скролл пропадает и получается, что контент под меню скачет из-за окна браузера по ширине из-за скролла. Как можно решить данную проблему не через стили css, а через js, запретив скролл контента под меню?

[maxgold]

а в остальном всё просто 7:15, только мне нужно было сделать справа, но это уже сам переделаю.

[nemok]

Не работают скирты, ошибок нету. Работаю на VS Code

[d.s.korochkin]

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