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

🤩Написанные на яваскрипте элементы легче всего добавляются в любую страницу. И готовое решение для копирования на свой лендинг, можно взять прямо отсюда. Это легкое гамбургер меню. И для облегчения вставке в качестве значка бургер менюшки используются эмодзи увеличенное с помощью 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;

<div id='menu'><p class="burg">🍔</p></div>
<script>
//-----------------------------------------------------------------------
//----------Тут вставляются теги менюшки(якорные ссылки и все такое)-----
//-----------------------------------------------------------------------
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>
Система комментирования SigComments