Хелп плиз

0x11 · 5 янв 2024

Нужно развертывание меню пример как тут

Вот набросок кода который есть у меня, но он только отвечает за 3 полоски
<header>
<div class="header">
<div class="menu">
<button type="button" class="t-menuburger t-menuburger_first " aria-label="Навигационное меню" aria-expanded="false">
<span style="background-color: rgb(238, 235, 235);"></span>
<span style="background-color:rgb(238, 235, 235);"></span>
<span style="background-color:rgb(238, 235, 235);"></span>
<span style="background-color:rgb(238, 235, 235);"></span>
</button>
</div>
<div class="logo">
<img src="/images/MONOCHROMIST.png" alt="">
</div>
<div class="login">
<a href="">Login</a>
</div>
</div>
</header>

HTML
<header>

    <div class="header">

        <div class="menu">

            <button type="button" class="t-menuburger t-menuburger_first " aria-label="Навигационное меню" aria-expanded="false">

                <span style="background-color: rgb(238, 235, 235);"></span>

                <span style="background-color:rgb(238, 235, 235);"></span>

                <span style="background-color:rgb(238, 235, 235);"></span>

                <span style="background-color:rgb(238, 235, 235);"></span>

            </button>

        </div>

        <div class="logo">

            <img src="/images/MONOCHROMIST.png" alt="">

        </div>

        <div class="login">

            <a href="">Login</a>

        </div>

    </div>

    </header>
* {
margin: 0;
padding: 0;
}

@font-face {
font-family: sans;
src: url(/fonts/JuliusSansOne-Regular.ttf);
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #070606ef;
box-shadow:
inset 0 -3em 3em rgba(182, 179, 179, 0.1),
0.3em 0.3em 1em rgba(173, 171, 171, 0.3);

}

.menu, .login {
margin: 35px;
}

.login a{
font-family: sans;
font-size: 16pt;
text-decoration: none;
color: white;
}

.main_body {
background: rgb(20, 19, 19);
padding: 25pt;
display: flex;
position: fixed;
width: 100%;
height: 100%;
}

.t-menuburger {
position: relative;
flex-shrink: 0;
width: 28px;
height: 20px;
padding: 0;
border: none;
background-color: transparent;
outline: none;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform .5s ease-in-out;
cursor: pointer;
z-index: 999;
}

/*---menu burger lines---*/
.t-menuburger span {
display: block;
position: absolute;
width: 100%;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: .25s ease-in-out;
height: 3px;
background-color: #000;
}
.t-menuburger span:nth-child(1) {
top: 0px;
}
.t-menuburger span:nth-child(2),
.t-menuburger span:nth-child(3) {
top: 8px;
}
.t-menuburger span:nth-child(4) {
top: 16px;
}

/*menu burger big*/
.t-menuburger__big {
width: 42px;
height: 32px;
}
.t-menuburger__big span {
height: 5px;
}
.t-menuburger__big span:nth-child(2),
.t-menuburger__big span:nth-child(3) {
top: 13px;
}
.t-menuburger__big span:nth-child(4) {
top: 26px;
}

/*menu burger small*/
.t-menuburger__small {
width: 22px;
height: 14px;
}
.t-menuburger__small span {
height: 2px;
}
.t-menuburger__small span:nth-child(2),
.t-menuburger__small span:nth-child(3) {
top: 6px;
}
.t-menuburger__small span:nth-child(4) {
top: 12px;
}

/*menu burger opened*/
.t-menuburger-opened span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
.t-menuburger-opened span:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.t-menuburger-opened span:nth-child(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.t-menuburger-opened span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
.t-menuburger-opened.t-menuburger__big span:nth-child(1) {
top: 6px;
}
.t-menuburger-opened.t-menuburger__big span:nth-child(4) {
top: 18px;
}
.t-menuburger-opened.t-menuburger__small span:nth-child(1),
.t-menuburger-opened.t-menuburger__small span:nth-child(4) {
top: 6px;
}

/*---menu burger first style---*/
@media (hover), (min-width:0\0) {
.t-menuburger_first:hover span:nth-child(1) {
transform: translateY(1px);
}
.t-menuburger_first:hover span:nth-child(4) {
transform: translateY(-1px);
}
.t-menuburger_first.t-menuburger__big:hover span:nth-child(1) {
transform: translateY(3px);
}
.t-menuburger_first.t-menuburger__big:hover span:nth-child(4) {
transform: translateY(-3px);
}
}

/*---menu burger second style---*/
.t-menuburger_second span:nth-child(2),
.t-menuburger_second span:nth-child(3) {
width: 80%;
left: 20%;
right: 0;
}
@media (hover), (min-width:0\0) {
.t-menuburger_second.t-menuburger-hovered span:nth-child(2),
.t-menuburger_second.t-menuburger-hovered span:nth-child(3) {
animation: t-menuburger-anim 0.3s ease-out normal forwards;
}
.t-menuburger_second.t-menuburger-unhovered span:nth-child(2),
.t-menuburger_second.t-menuburger-unhovered span:nth-child(3) {
animation: t-menuburger-anim2 0.3s ease-out normal forwards;
}
}

.t-menuburger_second.t-menuburger-opened span:nth-child(2),
.t-menuburger_second.t-menuburger-opened span:nth-child(3){
left: 0;
right: 0;
width: 100%!important;
}

/*---menu burger third style---*/
.t-menuburger_third span:nth-child(4) {
width: 70%;
left: unset;
right: 0;
}
@media (hover), (min-width:0\0) {
.t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4) {
width: 100%;
}
}
.t-menuburger_third.t-menuburger-opened span:nth-child(4) {
width: 0!important;
right: 50%;
}

/*---menu burger fourth style---*/
.t-menuburger_fourth {
height: 12px;
}
.t-menuburger_fourth.t-menuburger__small {
height: 8px;
}
.t-menuburger_fourth.t-menuburger__big {
height: 18px;
}
.t-menuburger_fourth span:nth-child(2),
.t-menuburger_fourth span:nth-child(3) {
top: 4px;
opacity: 0;
}
.t-menuburger_fourth span:nth-child(4) {
top: 8px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(2),
.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {
top: 3px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {
top: 6px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(2),
.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {
top: 3px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {
top: 6px;
}
.t-menuburger_fourth.t-menuburger__big span:nth-child(2),
.t-menuburger_fourth.t-menuburger__big span:nth-child(3) {
top: 6px;
}
.t-menuburger_fourth.t-menuburger__big span:nth-child(4) {
top: 12px;
}
@media (hover), (min-width:0\0) {
.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1) {
transform: translateY(1px);
}
.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4) {
transform: translateY(-1px);
}
.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1) {
transform: translateY(3px);
}
.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4) {
transform: translateY(-3px);
}
}
.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),
.t-menuburger_fourth.t-menuburger-opened span:nth-child(4) {
top: 4px;
}
.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),
.t-menuburger_fourth.t-menuburger-opened span:nth-child(3) {
opacity: 1;
}

/*---menu burger animations---*/
@keyframes t-menuburger-anim {
0% {
width: 80%;
left: 20%;
right: 0;
}

50% {
width: 100%;
left: 0;
right: 0;
}

100% {
width: 80%;
left: 0;
right: 20%;

}
}
@keyframes t-menuburger-anim2 {
0% {
width: 80%;
left: 0;
}

50% {
width: 100%;
right: 0;
left: 0;
}

100% {
width: 80%;
left: 20%;
right: 0;
}
}

CSS
* {

    margin: 0;

    padding: 0;

}



@font-face {

    font-family: sans;

    src: url(/fonts/JuliusSansOne-Regular.ttf);

}



.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #070606ef;

    box-shadow:

    inset 0 -3em 3em rgba(182, 179, 179, 0.1),

    0.3em 0.3em 1em rgba(173, 171, 171, 0.3);

    

}



.menu, .login {

    margin: 35px;

}



.login a{

    font-family: sans;

    font-size: 16pt;

    text-decoration: none;

    color:  white;

}



.main_body {

    background: rgb(20, 19, 19);

    padding: 25pt;

    display: flex;

    position: fixed;

    width: 100%;

    height: 100%;

}





.t-menuburger {

    position: relative;

    flex-shrink: 0;

    width: 28px;

    height: 20px;

    padding: 0;

    border: none;

    background-color: transparent;

    outline: none;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    transition: transform .5s ease-in-out;

    cursor: pointer;

    z-index: 999;

}



/*---menu burger lines---*/

.t-menuburger span {

    display: block;

    position: absolute;

    width: 100%;

    opacity: 1;

    left: 0;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    transition: .25s ease-in-out;

    height: 3px;

    background-color: #000;

}

.t-menuburger span:nth-child(1) {

    top: 0px;

}

.t-menuburger span:nth-child(2),

.t-menuburger span:nth-child(3) {

    top: 8px;

}

.t-menuburger span:nth-child(4) {

    top: 16px;

}



/*menu burger big*/

.t-menuburger__big {

    width: 42px;

    height: 32px;

}

.t-menuburger__big span {

    height: 5px;

}

.t-menuburger__big span:nth-child(2),

.t-menuburger__big span:nth-child(3) {

    top: 13px;

}

.t-menuburger__big span:nth-child(4) {

    top: 26px;

}



/*menu burger small*/

.t-menuburger__small {

    width: 22px;

    height: 14px;

}

.t-menuburger__small span {

    height: 2px;

}

.t-menuburger__small span:nth-child(2),

.t-menuburger__small span:nth-child(3) {

    top: 6px;

}

.t-menuburger__small span:nth-child(4) {

    top: 12px;

}



/*menu burger opened*/

.t-menuburger-opened span:nth-child(1) {

    top: 8px;

    width: 0%;

    left: 50%;

}

.t-menuburger-opened span:nth-child(2) {

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}

.t-menuburger-opened span:nth-child(3) {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

.t-menuburger-opened span:nth-child(4) {

    top: 8px;

    width: 0%;

    left: 50%;

}

.t-menuburger-opened.t-menuburger__big span:nth-child(1) {

    top: 6px;

}

.t-menuburger-opened.t-menuburger__big span:nth-child(4) {

    top: 18px;

}

.t-menuburger-opened.t-menuburger__small span:nth-child(1),

.t-menuburger-opened.t-menuburger__small span:nth-child(4) {

    top: 6px;

}



/*---menu burger first style---*/

@media (hover), (min-width:0\0) {

    .t-menuburger_first:hover span:nth-child(1) {

        transform: translateY(1px);

    }

    .t-menuburger_first:hover span:nth-child(4) {

        transform: translateY(-1px);

    }

    .t-menuburger_first.t-menuburger__big:hover span:nth-child(1) {

        transform: translateY(3px);

    }

    .t-menuburger_first.t-menuburger__big:hover span:nth-child(4) {

        transform: translateY(-3px);

    }

}



/*---menu burger second style---*/

.t-menuburger_second span:nth-child(2),

.t-menuburger_second span:nth-child(3) {

    width: 80%;

    left: 20%;

    right: 0;

}

@media (hover), (min-width:0\0) {

    .t-menuburger_second.t-menuburger-hovered span:nth-child(2),

    .t-menuburger_second.t-menuburger-hovered span:nth-child(3) {

        animation: t-menuburger-anim 0.3s ease-out normal forwards;

    }

    .t-menuburger_second.t-menuburger-unhovered span:nth-child(2),

    .t-menuburger_second.t-menuburger-unhovered span:nth-child(3) {

        animation: t-menuburger-anim2 0.3s ease-out normal forwards;

    }

}



.t-menuburger_second.t-menuburger-opened span:nth-child(2),

.t-menuburger_second.t-menuburger-opened span:nth-child(3){

    left: 0;

    right: 0;

    width: 100%!important;

}



/*---menu burger third style---*/

.t-menuburger_third span:nth-child(4) {

    width: 70%;

    left: unset;

    right: 0;

}

@media (hover), (min-width:0\0) {

    .t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4) {

        width: 100%;

    }

}

.t-menuburger_third.t-menuburger-opened span:nth-child(4) {

    width: 0!important;

    right: 50%;

}



/*---menu burger fourth style---*/

.t-menuburger_fourth {

    height: 12px;

}

.t-menuburger_fourth.t-menuburger__small {

    height: 8px;

}

.t-menuburger_fourth.t-menuburger__big {

    height: 18px;

}

.t-menuburger_fourth span:nth-child(2),

.t-menuburger_fourth span:nth-child(3) {

    top: 4px;

    opacity: 0;

}

.t-menuburger_fourth span:nth-child(4) {

    top: 8px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(2),

.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {

    top: 3px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {

    top: 6px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(2),

.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {

    top: 3px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {

    top: 6px;

}

.t-menuburger_fourth.t-menuburger__big span:nth-child(2),

.t-menuburger_fourth.t-menuburger__big span:nth-child(3) {

    top: 6px;

}

.t-menuburger_fourth.t-menuburger__big span:nth-child(4) {

    top: 12px;

}

@media (hover), (min-width:0\0) {

    .t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1) {

        transform: translateY(1px);

    }

    .t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4) {

        transform: translateY(-1px);

    }

    .t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1) {

        transform: translateY(3px);

    }

    .t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4) {

        transform: translateY(-3px);

    }

}

.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),

.t-menuburger_fourth.t-menuburger-opened span:nth-child(4) {

    top: 4px;

}

.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),

.t-menuburger_fourth.t-menuburger-opened span:nth-child(3) {

    opacity: 1;

}



/*---menu burger animations---*/

@keyframes t-menuburger-anim {

    0% {

        width: 80%;

        left: 20%;

        right: 0;

    }



    50% {

        width: 100%;

        left: 0;

        right: 0;

    }



    100% {

        width: 80%;

        left: 0;

        right: 20%;



    }

}

@keyframes t-menuburger-anim2 {

    0% {

        width: 80%;

        left: 0;

    }



    50% {

        width: 100%;

        right: 0;

        left: 0;

    }



    100% {

        width: 80%;

        left: 20%;

        right: 0;

    }

}
Стилизацию спиздил, поэтому если что то можно убрать, то только буду рад совету

Falcon_Extra · 6 янв 2024

здесь уже на js писать, надо добавить div всунуть туда все что там в чернем и в css дать position absolute, left -100%, и в js после исполнение событий кнопки должно быть left +100%, можно поставить transition 1s

--- Сообщение объединено с предыдущим 6 янв 2024
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<div class="header">
<div class="menu">
<button type="button" class="t-menuburger t-menuburger_first " aria-label="Навигационное меню"
aria-expanded="false">
<span style="background-color: rgb(238, 235, 235);"></span>
<span style="background-color:rgb(238, 235, 235);"></span>
<span style="background-color:rgb(238, 235, 235);"></span>
<span style="background-color:rgb(238, 235, 235);"></span>
</button>
</div>
<div class="logo">
<img src="/images/MONOCHROMIST.png" alt="">
</div>
<div class="login">
<a href="">Login</a>
</div>
</div>
</header>
<div class="list">
<h1>Автор Falcon_Extra</h1>
</div>
<script src="script.js"></script>
</body>

</html>

HTML
<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>



<body>

    <header>

        <div class="header">

            <div class="menu">

                <button type="button" class="t-menuburger t-menuburger_first " aria-label="Навигационное меню"

                    aria-expanded="false">

                    <span style="background-color: rgb(238, 235, 235);"></span>

                    <span style="background-color:rgb(238, 235, 235);"></span>

                    <span style="background-color:rgb(238, 235, 235);"></span>

                    <span style="background-color:rgb(238, 235, 235);"></span>

                </button>

            </div>

            <div class="logo">

                <img src="/images/MONOCHROMIST.png" alt="">

            </div>

            <div class="login">

                <a href="">Login</a>

            </div>

        </div>

    </header>

    <div class="list">

        <h1>Автор Falcon_Extra</h1>

    </div>

    <script src="script.js"></script>

</body>



</html>
--- Сообщение объединено с предыдущим 6 янв 2024
let button = document.querySelector("button")
let list = document.querySelector(".list")
button.addEventListener('click', () => {
EventList()
})
function EventList() {
list.style.left = '0px'
let btn = button.classList.add('pupsik')
button.addEventListener('click', () => {
list.style.left = '-250px'
})
}

JS
let button = document.querySelector("button")

let list = document.querySelector(".list")

button.addEventListener('click', () => {

    EventList()

})

function EventList() {

    list.style.left = '0px'

    let btn = button.classList.add('pupsik')

    button.addEventListener('click', () => {

        list.style.left = '-250px'

    })

}
--- Сообщение объединено с предыдущим 6 янв 2024
* {
margin: 0;
padding: 0;
}

@font-face {
font-family: sans;
src: url(/fonts/JuliusSansOne-Regular.ttf);
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #070606ef;
box-shadow:
inset 0 -3em 3em rgba(182, 179, 179, 0.1),
0.3em 0.3em 1em rgba(173, 171, 171, 0.3);

}

.menu, .login {
margin: 35px;
}

.login a{
font-family: sans;
font-size: 16pt;
text-decoration: none;
color: white;
}

.main_body {
background: rgb(20, 19, 19);
padding: 25pt;
display: flex;
position: fixed;
width: 100%;
height: 100%;
}

.t-menuburger {
position: relative;
flex-shrink: 0;
width: 28px;
height: 20px;
padding: 0;
border: none;
background-color: transparent;
outline: none;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: transform .5s ease-in-out;
cursor: pointer;
z-index: 999;
}

/*---menu burger lines---*/
.t-menuburger span {
display: block;
position: absolute;
width: 100%;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: .25s ease-in-out;
height: 3px;
background-color: #000;
}
.t-menuburger span:nth-child(1) {
top: 0px;
}
.t-menuburger span:nth-child(2),
.t-menuburger span:nth-child(3) {
top: 8px;
}
.t-menuburger span:nth-child(4) {
top: 16px;
}

/*menu burger big*/
.t-menuburger__big {
width: 42px;
height: 32px;
}
.t-menuburger__big span {
height: 5px;
}
.t-menuburger__big span:nth-child(2),
.t-menuburger__big span:nth-child(3) {
top: 13px;
}
.t-menuburger__big span:nth-child(4) {
top: 26px;
}

/*menu burger small*/
.t-menuburger__small {
width: 22px;
height: 14px;
}
.t-menuburger__small span {
height: 2px;
}
.t-menuburger__small span:nth-child(2),
.t-menuburger__small span:nth-child(3) {
top: 6px;
}
.t-menuburger__small span:nth-child(4) {
top: 12px;
}

/*menu burger opened*/
.t-menuburger-opened span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
.t-menuburger-opened span:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.t-menuburger-opened span:nth-child(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.t-menuburger-opened span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
.t-menuburger-opened.t-menuburger__big span:nth-child(1) {
top: 6px;
}
.t-menuburger-opened.t-menuburger__big span:nth-child(4) {
top: 18px;
}
.t-menuburger-opened.t-menuburger__small span:nth-child(1),
.t-menuburger-opened.t-menuburger__small span:nth-child(4) {
top: 6px;
}

/*---menu burger first style---*/
@media (hover), (min-width:0\0) {
.t-menuburger_first:hover span:nth-child(1) {
transform: translateY(1px);
}
.t-menuburger_first:hover span:nth-child(4) {
transform: translateY(-1px);
}
.t-menuburger_first.t-menuburger__big:hover span:nth-child(1) {
transform: translateY(3px);
}
.t-menuburger_first.t-menuburger__big:hover span:nth-child(4) {
transform: translateY(-3px);
}
}

/*---menu burger second style---*/
.t-menuburger_second span:nth-child(2),
.t-menuburger_second span:nth-child(3) {
width: 80%;
left: 20%;
right: 0;
}
@media (hover), (min-width:0\0) {
.t-menuburger_second.t-menuburger-hovered span:nth-child(2),
.t-menuburger_second.t-menuburger-hovered span:nth-child(3) {
animation: t-menuburger-anim 0.3s ease-out normal forwards;
}
.t-menuburger_second.t-menuburger-unhovered span:nth-child(2),
.t-menuburger_second.t-menuburger-unhovered span:nth-child(3) {
animation: t-menuburger-anim2 0.3s ease-out normal forwards;
}
}

.t-menuburger_second.t-menuburger-opened span:nth-child(2),
.t-menuburger_second.t-menuburger-opened span:nth-child(3){
left: 0;
right: 0;
width: 100%!important;
}

/*---menu burger third style---*/
.t-menuburger_third span:nth-child(4) {
width: 70%;
left: unset;
right: 0;
}
@media (hover), (min-width:0\0) {
.t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4) {
width: 100%;
}
}
.t-menuburger_third.t-menuburger-opened span:nth-child(4) {
width: 0!important;
right: 50%;
}

/*---menu burger fourth style---*/
.t-menuburger_fourth {
height: 12px;
}
.t-menuburger_fourth.t-menuburger__small {
height: 8px;
}
.t-menuburger_fourth.t-menuburger__big {
height: 18px;
}
.t-menuburger_fourth span:nth-child(2),
.t-menuburger_fourth span:nth-child(3) {
top: 4px;
opacity: 0;
}
.t-menuburger_fourth span:nth-child(4) {
top: 8px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(2),
.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {
top: 3px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {
top: 6px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(2),
.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {
top: 3px;
}
.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {
top: 6px;
}
.t-menuburger_fourth.t-menuburger__big span:nth-child(2),
.t-menuburger_fourth.t-menuburger__big span:nth-child(3) {
top: 6px;
}
.t-menuburger_fourth.t-menuburger__big span:nth-child(4) {
top: 12px;
}
@media (hover), (min-width:0\0) {
.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1) {
transform: translateY(1px);
}
.t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4) {
transform: translateY(-1px);
}
.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1) {
transform: translateY(3px);
}
.t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4) {
transform: translateY(-3px);
}
}
.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),
.t-menuburger_fourth.t-menuburger-opened span:nth-child(4) {
top: 4px;
}
.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),
.t-menuburger_fourth.t-menuburger-opened span:nth-child(3) {
opacity: 1;
}

/*---menu burger animations---*/
@keyframes t-menuburger-anim {
0% {
width: 80%;
left: 20%;
right: 0;
}

50% {
width: 100%;
left: 0;
right: 0;
}

100% {
width: 80%;
left: 0;
right: 20%;

}
}
@keyframes t-menuburger-anim2 {
0% {
width: 80%;
left: 0;
}

50% {
width: 100%;
right: 0;
left: 0;
}

100% {
width: 80%;
left: 20%;
right: 0;
}
}
.list{
position: absolute;
left: -250px;
background: black;
height: 430px;
width: 250px;
transition: 1s;
}
.list h1{
color: white;
}

CSS
* {

    margin: 0;

    padding: 0;

}



@font-face {

    font-family: sans;

    src: url(/fonts/JuliusSansOne-Regular.ttf);

}



.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #070606ef;

    box-shadow:

    inset 0 -3em 3em rgba(182, 179, 179, 0.1),

    0.3em 0.3em 1em rgba(173, 171, 171, 0.3);

    

}



.menu, .login {

    margin: 35px;

}



.login a{

    font-family: sans;

    font-size: 16pt;

    text-decoration: none;

    color:  white;

}



.main_body {

    background: rgb(20, 19, 19);

    padding: 25pt;

    display: flex;

    position: fixed;

    width: 100%;

    height: 100%;

}





.t-menuburger {

    position: relative;

    flex-shrink: 0;

    width: 28px;

    height: 20px;

    padding: 0;

    border: none;

    background-color: transparent;

    outline: none;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    transition: transform .5s ease-in-out;

    cursor: pointer;

    z-index: 999;

}



/*---menu burger lines---*/

.t-menuburger span {

    display: block;

    position: absolute;

    width: 100%;

    opacity: 1;

    left: 0;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    transition: .25s ease-in-out;

    height: 3px;

    background-color: #000;

}

.t-menuburger span:nth-child(1) {

    top: 0px;

}

.t-menuburger span:nth-child(2),

.t-menuburger span:nth-child(3) {

    top: 8px;

}

.t-menuburger span:nth-child(4) {

    top: 16px;

}



/*menu burger big*/

.t-menuburger__big {

    width: 42px;

    height: 32px;

}

.t-menuburger__big span {

    height: 5px;

}

.t-menuburger__big span:nth-child(2),

.t-menuburger__big span:nth-child(3) {

    top: 13px;

}

.t-menuburger__big span:nth-child(4) {

    top: 26px;

}



/*menu burger small*/

.t-menuburger__small {

    width: 22px;

    height: 14px;

}

.t-menuburger__small span {

    height: 2px;

}

.t-menuburger__small span:nth-child(2),

.t-menuburger__small span:nth-child(3) {

    top: 6px;

}

.t-menuburger__small span:nth-child(4) {

    top: 12px;

}



/*menu burger opened*/

.t-menuburger-opened span:nth-child(1) {

    top: 8px;

    width: 0%;

    left: 50%;

}

.t-menuburger-opened span:nth-child(2) {

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}

.t-menuburger-opened span:nth-child(3) {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

.t-menuburger-opened span:nth-child(4) {

    top: 8px;

    width: 0%;

    left: 50%;

}

.t-menuburger-opened.t-menuburger__big span:nth-child(1) {

    top: 6px;

}

.t-menuburger-opened.t-menuburger__big span:nth-child(4) {

    top: 18px;

}

.t-menuburger-opened.t-menuburger__small span:nth-child(1),

.t-menuburger-opened.t-menuburger__small span:nth-child(4) {

    top: 6px;

}



/*---menu burger first style---*/

@media (hover), (min-width:0\0) {

    .t-menuburger_first:hover span:nth-child(1) {

        transform: translateY(1px);

    }

    .t-menuburger_first:hover span:nth-child(4) {

        transform: translateY(-1px);

    }

    .t-menuburger_first.t-menuburger__big:hover span:nth-child(1) {

        transform: translateY(3px);

    }

    .t-menuburger_first.t-menuburger__big:hover span:nth-child(4) {

        transform: translateY(-3px);

    }

}



/*---menu burger second style---*/

.t-menuburger_second span:nth-child(2),

.t-menuburger_second span:nth-child(3) {

    width: 80%;

    left: 20%;

    right: 0;

}

@media (hover), (min-width:0\0) {

    .t-menuburger_second.t-menuburger-hovered span:nth-child(2),

    .t-menuburger_second.t-menuburger-hovered span:nth-child(3) {

        animation: t-menuburger-anim 0.3s ease-out normal forwards;

    }

    .t-menuburger_second.t-menuburger-unhovered span:nth-child(2),

    .t-menuburger_second.t-menuburger-unhovered span:nth-child(3) {

        animation: t-menuburger-anim2 0.3s ease-out normal forwards;

    }

}



.t-menuburger_second.t-menuburger-opened span:nth-child(2),

.t-menuburger_second.t-menuburger-opened span:nth-child(3){

    left: 0;

    right: 0;

    width: 100%!important;

}



/*---menu burger third style---*/

.t-menuburger_third span:nth-child(4) {

    width: 70%;

    left: unset;

    right: 0;

}

@media (hover), (min-width:0\0) {

    .t-menuburger_third:not(.t-menuburger-opened):hover span:nth-child(4) {

        width: 100%;

    }

}

.t-menuburger_third.t-menuburger-opened span:nth-child(4) {

    width: 0!important;

    right: 50%;

}



/*---menu burger fourth style---*/

.t-menuburger_fourth {

    height: 12px;

}

.t-menuburger_fourth.t-menuburger__small {

    height: 8px;

}

.t-menuburger_fourth.t-menuburger__big {

    height: 18px;

}

.t-menuburger_fourth span:nth-child(2),

.t-menuburger_fourth span:nth-child(3) {

    top: 4px;

    opacity: 0;

}

.t-menuburger_fourth span:nth-child(4) {

    top: 8px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(2),

.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {

    top: 3px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {

    top: 6px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(2),

.t-menuburger_fourth.t-menuburger__small span:nth-child(3) {

    top: 3px;

}

.t-menuburger_fourth.t-menuburger__small span:nth-child(4) {

    top: 6px;

}

.t-menuburger_fourth.t-menuburger__big span:nth-child(2),

.t-menuburger_fourth.t-menuburger__big span:nth-child(3) {

    top: 6px;

}

.t-menuburger_fourth.t-menuburger__big span:nth-child(4) {

    top: 12px;

}

@media (hover), (min-width:0\0) {

    .t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(1) {

        transform: translateY(1px);

    }

    .t-menuburger_fourth:not(.t-menuburger-opened):hover span:nth-child(4) {

        transform: translateY(-1px);

    }

    .t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(1) {

        transform: translateY(3px);

    }

    .t-menuburger_fourth.t-menuburger__big:not(.t-menuburger-opened):hover span:nth-child(4) {

        transform: translateY(-3px);

    }

}

.t-menuburger_fourth.t-menuburger-opened span:nth-child(1),

.t-menuburger_fourth.t-menuburger-opened span:nth-child(4) {

    top: 4px;

}

.t-menuburger_fourth.t-menuburger-opened span:nth-child(2),

.t-menuburger_fourth.t-menuburger-opened span:nth-child(3) {

    opacity: 1;

}



/*---menu burger animations---*/

@keyframes t-menuburger-anim {

    0% {

        width: 80%;

        left: 20%;

        right: 0;

    }



    50% {

        width: 100%;

        left: 0;

        right: 0;

    }



    100% {

        width: 80%;

        left: 0;

        right: 20%;



    }

}

@keyframes t-menuburger-anim2 {

    0% {

        width: 80%;

        left: 0;

    }



    50% {

        width: 100%;

        right: 0;

        left: 0;

    }



    100% {

        width: 80%;

        left: 20%;

        right: 0;

    }

}

.list{

  position: absolute;

  left: -250px;

  background: black;

  height: 430px;

  width: 250px;

  transition: 1s;

}

.list h1{

  color: white;

}

Как вставить фото <img> в Telegram Web App с телефона?

Сделаю сайт бесплатно за отзыв

[FREE LAND 0/3] САЙТЫ|ВЕРСТКА|БЭКЕНД и многое другое

Оцените Telegram Mini App

Bio сайт

Проблема с клавиатурой IOS в telegram web app.

Персональная карточка Terminal

404 Okak

Фронтенд-разработка сайтов: HTML, CSS и JavaScript

Personal Card

Бесплатный ленд за отзыв

БЕСПЛАТНО создам ЛИЧНО ВАМ сайт за отзыв в тгк

Быстрые и современные веб-сервисы

Кряк DevExpress

Как удалить водяной знак lovable с сгенерированного сайта?

Выживание - Telegram Mini app

БЕСПЛАТНО сверстаю сайт, лендинг, страницу, визитку, под ****** и т.д.

Как прописать анимацию кнопок в QT DESIGNER? CSS

Анонимный чат Telegram Mini-app

Куда в фигме пропал css export?

Что не так в данном SVG файле? почему форум не принимает его?

{FREE} BackEnd/FrontEnd регчек/парс/запросы это я могу

Всем привет оцените первый сайт

Кто поможет сделать такой же блок html, css, js

Курс верстки|БЕСПЛАТНО|+в коммы

Typerscript Discord Plugin AutoMute [Vencord]

Как пользоватся VS CODE для написания кода?

FLS GULP 3.0 Документация

Разработка приложения для отслеживания финансовой статистики

Нужно воспроизвести код java

Хелп плиз