Меню является не неотъемлемой часть сайта. В данной статье для вас подготовил отличное бургер-меню для конструктора таплинк.
<div>
<nav class="mobile-menu">
<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); /* фон круга меню, можно удалить или заменить на transparent чтобы скрыть */
border-radius: 50%; /*радиус скругления */
border-style: solid; /*стиль обводки меню, можно удалить при необходимости или поменять значение на transparent */
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>