Решил сделать простое адаптивное гамбургер меню для сайта , необходимо чтобы при нажати появлялся данный класс с подклассами вот так
но вместо этого при нажатии выходит вот так
Добавлял класс через Jquery
$(function(){
$('.hamicon').click(function(){
$('.infobox1').toggleClass('showmenu')
})
});
HTML код
<div class="hammenu"><img src="img/Hamburger_icon.png" class="hamicon" width="200px" height="25px" ></div>
<div class="infobox1" >
<a href="#"><div class="news">Новости</div></a>
<a href="#" > <div class="message" >Сообщения</div></a>
<a href="#" > <div class="recurting" >Наёмники</div></a>
<a href="#" > <div class="online_shop" >Онлайн магазин </div></a>
<a href="#" > <div class="libary" >Информация</div></a>
<a href="#" > <div class="account" > Мой Аккаунт</div> </a>
</div>
CSS код который должен стилизоваться при нажатии
.infobox1 {color: white;
display: flex;
flex-direction: column;
width: auto;
height: 320px;
background: linear-gradient(180deg, #455345, #445f48 );
border-style: solid;
border-width: 2px;
border-color: #d3caba52;
}
.infobox1 a {
color:white;
text-decoration: none;
}
.infobox1 a:hover {
color:white;
text-decoration: none;
text-shadow: 5px 5px 5px rgba(41, 143, 41, 0.616);
}
.infobox1 div {
width: 90wv;
height: 50px;
background: #3f3f3e;
text-align: center;
border-style:groove;
border-width: 2px;
border-color: #000;
box-shadow: 3px 3px 3px black;
font-family: monospace;
font-size: 1.5em;
}
