Редакция:	08.02.2024
Теги:	HTML + CSS + JQuery

Меню «Гамбургер» с эффектом

Demo

Если кликнуть по кнопке — эффект будет сохраняться до повторного клика.

НЕ используется CSS псевдокласс :hover т.к. на мобильных устройствах он отрабатывает при клике и элемент переходит в состояние :hover, а выходит из него только после потери фокуса, т.е. клике по другому элементу.

HTML

</button>

</div>

...

</div>

CSS

@media (max-width: 1023px) {

.head_panel {

position: absolute;

top: 60px;

right: -100vw;

width: 80vw;

transition: all 300ms linear;

opacity: 0;

}

.head_panel.shown {

right: 0;

opacity: 1;

}

.burger_button {

position: relative;

display: block;

width: 28px;

height: 28px;

padding: 0;

overflow: hidden;

font-size: 0;

text-indent: -9999px;

border: none;

background: none;

}

.burger_lines,

.burger_lines::before,

.burger_lines::after {

position: absolute;

left: 0;

right: 0;

width: 100%;

height: 2px;

background: #141414;

transition: all 300ms linear;

}

.burger_lines {

left: 0;

top: 13px;

}

.burger_lines::before,

.burger_lines::after {

content: '';

display: block;

}

.burger_lines::before {

top: -8px;

}

.burger_lines::after {

bottom: -8px;

}

.burger_lines.active {

background: none;

}

.burger_lines.active::before {

top: 0;

transform: rotate(45deg);

}

.burger_lines.active::after {

bottom: 0;

transform: rotate(-45deg);

}

JQuery

jQuery(document).ready(function($) {

$B = $('body');

// Бургер

(function(){

let $trigs = $B.find('.burger_button');

if (!$trigs.length) return;

$trigs.each(function (i, e) {

let $trig = $(e),

$targ = $B.find($trig.data('target'));

if (!$targ.length) return false;

$trig.on('click', function() {

$trig.find('.burger_lines').toggleClass('active');

$targ.toggleClass('shown');

});

})();

});