Готовое бургер меню на джейэсе

🤩Написанные на яваскрипте элементы легче всего добавляются в любую страницу. И готовое решение для копирования на свой лендинг, можно взять прямо отсюда. Это легкое гамбургер меню. И для облегчения вставке в качестве значка бургер менюшки используются эмодзи увеличенное с помощью font-size:50px; В таком случае эмодзи становится картинкой. Хотя на самом деле это просто очень увеличенный шрифт. И благодаря таким мелочам страница входит в грин зону на гугл пейдж спид.

И насколько важно иметь легкий и скоростной сайт? Сколько бы не было обсуждений: и “за”, и “против”. Самое главное что делает сайт удобным и сео оптимизированным: это удобство для пользователя. Cайт делается для того чтобы удовлетворить любопытного персонажа. Вступившего в тяжелый квест по розыску всего необходимого, как Шерлок Хомс распутывал загадочные происшествия. И самым прямым образом открыл для созерцательного мероприятия, вожделенный контент!

Стайл для менюшки

<style>

margin:0;

}

#menu{

display:flex;

justify-content: center;

align-items: center;

position:fixed;

top:20px;

right: 10px;

background-color: rgba(82, 158, 163, 0.26);

width: 70px;

height:70px;

margin:3%;

border-radius: 50%;

border: 2px solid rgba(70, 23, 82, 0.226);

}

#menu:hover{

background-color: rgba(195, 243, 149,0.5);

border: 2px solid rgb(59, 26, 7);

}

.burg{

font-size: 50px;

opacity:0.5;

}

.burg:hover{

opacity:1;

}

</style>

Скрипт менюшки

Обратите внимание на иконку для меню. Самый настоящий бургер из эмозди. Увеличеный до размера кнопки с помощью font-size:50px;

//-----------------------------------------------------------------------

//----------Тут вставляются теги менюшки(якорные ссылки и все такое)-----

//-----------------------------------------------------------------------

let menuShka = '<a href="/">записаны разные ссылки!</a><a href="#glav">Скрипт менюшки на голом джейэсе!</a>';

//----------------------------------------------------------------------

let PressButton=+1;

document.querySelector('#menu').addEventListener("click", ()=>{

PressButton+=1;

function PressButtonToggle(){

let PressButtonValue=(PressButton>=2)?'open':'close'; // один клик дает open PressButton==1

console.log(PressButton+"button.nazhata");

if(PressButtonValue=='open'){

document.getElementsByTagName("body")[0].style.cssText=`

overflow:hidden;

let divMenu = document.createElement('div');

divMenu.className='menu';

divMenu.innerHTML='menu!'+`${menuShka}`;

document.body.append(divMenu);

document.querySelector('.menu').style.cssText=`

display:flex;

position:fixed;

top:0;

flex-direction:column;

background-color: rgba(195, 243, 149,0.5);

width:100%;

height:100%;

max-height:100%;

max-width:100%;

justify-content:center;

align-items:center;

overflow:hidden;

PressButton=0; // сброс кликов до нуля 'close' когда PressButton==2

}else if(PressButtonValue=='close'){

document.querySelector('.menu').remove(); //эта ремув удаляет все с надписями

// document.querySelector('.menu').removeAttribute('style');

document.getElementsByTagName('body')[0].style.cssText=`

overflow:scroll;

}

else{

console.log('nu-neznay');

}

document.querySelector('.menu').addEventListener('click', ()=>{

document.querySelector('.menu').remove();

console.log('but');

PressButton=1;

document.getElementsByTagName('body')[0].style.cssText=`

overflow:scroll;

});

}

PressButtonToggle();

});

</script>