<!-- Бургер меню начало кода -->
<div>
<nav class="мобильное меню">
<input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
<label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
<div class="mobile-menu__container">
<ul class="mobile-menu__list">
<li class="mobile-menu__item">
<a href="https://" class="mobile-menu__link">ГЛАВНАЯ</a></li>
<li class="mobile-menu__item">
<a href="https://" class="mobile-menu__link">ДИЗАЙН </a></li>
<li class="mobile-menu__item">
<a href="https://" class="mobile-menu__link">ЗАКАЗАТЬ</a></li>
<li class="mobile-menu__item">
<a href="https://" class="mobile-menu__link">КОНТАКТЫ</a></li>
<li class="mobile-menu__item">
<a href="https://" class="mobile-menu__link">ОПЛАТА</a></li>
<a href="instagram://" class="amob"><i class="fa f-max fab fa-fa fa-ig"></i></a>
<a href="https://www.instagram.com " class="ades"><i class="fa f-max fab fa-fa fa-ig"></i></a>
</ul>
</div>
</nav>
<style type="text/css">
.mobile-menu {
position: fixed;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 16px;
background-color: rgba(42, 42, 42, 0.9);
border-radius: 50%;
border-style: solid;
border-width: 2px;
border-color: rgba(189, 255, 0, 0.9);
width: 50px;
top: 30px;
left: 0;
right: 0;
margin-left: auto;
margin-right: 10px;
height: 50px;
z-index: 9999999;
}
.mobile-menu__container {
position: fixed;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
top: 0px;
left: 0;
right: 0;
z-index: 9999;
height: 0;
opacity: 1;
transition: .5s;
overflow: hidden;
background-color: rgba(42, 42, 42, 0.9);
}
.mobile-menu__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 35px; height: 30px; cursor: pointer; z-index: 9999999; transition: .4s;}.mobile-menu__icon { display: block; position: relative; background: #fff; width: 90%; height: 2px; transition: .4s;}.mobile-menu__icon::after, .mobile-menu__icon::before { content: ""; display: block; position: absolute; background: #fff; width: 100%; height: 2px; transition: .4s;}.mobile-menu__icon::after { top: 8px;}.mobile-menu__icon::before { top: -8px;}.mobile-menu__list { transition: .5s; list-style: none; padding-left: 0; margin-top: -50px;}.mobile-menu__item { font-size: 22px; padding-bottom: 15px;}.mobile-menu__link { text-decoration: none; color: #fff !important;}.mobile-menu__checkbox { display: none;}.mobile-menu__checkbox:checked ~ .mobile-menu__nav { opacity: 1;}.mobile-menu__checkbox:checked ~ .mobile-menu__container { height: 100%;}.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon { background: transparent;}.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after { top: 0;}.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before { transform: rotate(45deg); -webkit-transform: rotate(45deg);} </style>
</div>
<!-- Бургер меню конец кода -->
