При создании бургер меню главная задача, как открыть и закрыть менюшку. И вот, есть самые простые способы, которые будут работать даже в апокалипсис.
Для картинки бургер меню, разумно взять бургер из svg и сделать его кнопкой.
<button class=»burg»>
</button>
<style>
.burg{
right: 5%;
background-image: url(«bur.svg»);
width: 70px;
height: 70px;
display: block;
position: fixed;
top: 4%;
opacity: 0.8;
z-index: 1;
}
button{
background: none;
border: none;
}
</style>
Далее простейшая логика, открытия и как вы догадались само собой разумеется, закрытия всей этой изощренной конструкции. Будет на javascript главным образом только потому что придумать что-либо проще и постапокалиптичнее просто невозможно.
<script>
let count = +0;
document.querySelector(‘.burg’).onclick=function(){
count +=1;
if(count<=1){
document.querySelector(«#offmenu»).classList.add(«openmenu»);
}else{
document.querySelector(«#offmenu»).classList.remove(‘openmenu’);
count =0;
}
}
</script>
Все вроде просто, но в js если купить два самоучителя для чайников за 9, то получится 99. Потому что символ плюса это еще и знак конкатенации. В остальном при нажатии на кнопку переменной приплюсовывается значение, второе нажатие плюсует еще значение которое обнуляет счетчик.
Проблема возникла с css классом самого меню #offmenu, для того чтобы скрыть его полностью из видимости, было придумано прятать шрифт под самый нижний слой с помощью z-index: Только шрифт, потому что если айди задать скрытый параметр, то изменить его с помощью класса будет невозможно. Как оказалось потом у этого способа есть свои подводные камни. В длинных стилях по каким то причинам, спрятать шриф за верхним слоем не так и просто. А в остальном все работатет.
Менюшку можно увидеть в действии, на сайте nasobe.ru если нажать сочетание клавиш ctrl+U или с помощью F12 можно посмотреть весь код бургер меню в действии
И для тех кто говорит что в аду есть особый котел для тех кто фотографирует монитор. Получите.
Полный скрипт бургер меню
<!— Начало меню! —>
<button class=»burg»>
</button>
<ul id=»offmenu»>
<a href=»https://nasobe.ru»><li class=»font»>Главная</li></a>
</ul>
<style>
.burg{
right: 5%;
background-image: url(«bur.svg»);
width: 70px;
height: 70px;
display: block;
position: fixed;
top: 4%;
opacity: 0.8;
z-index: 1;
}
button{
background: none;
border: none;
}
.openmenu{
top: 7%;
max-height: 90%;
max-width: 80%;
width: 600px;
opacity: 0.9;
background-color:rgb(37, 173, 24);
border: 1px solid red;
font-size: 24px;
}
#offmenu{
position: fixed;
overflow: auto;
}
.font{
z-index:2;
display: flex;
flex: 0 100%;
justify-content: center;
align-items: center;
margin: 2%;
background-color:rgb(32, 151, 32);
opacity: 1;
min-height: 50px;
}
.font:hover{
background-color:rgba(0, 255, 0, 0.3);
color: white;
border: 1px solid red;
}
</style>
<script>
let count = +0;
document.querySelector(‘.burg’).onclick=function(){
count +=1;
if(count<=1){
document.querySelector(«#offmenu»).classList.add(«openmenu»);
}else{
document.querySelector(«#offmenu»).classList.remove(‘openmenu’);
count =0;
}
}
</script>