Меню с методом перевод (x) + переход ⇐ CSS

[Anonymous]

Мне нужна помощь с моим главным меню Flyout /Slider < /p>
Я извлек ее здесь, на этом веб -сайте, что я хочу < /p>
Извлеченный черновой страницу, чтобы описать мою проблему < /p>
с этим, я признаю, устаревший метод работает в некотором смысле, да.

Код: Выделить всё

[list]
[*][url=#]Aktuelles[/url]
[*][url=#]Arbeiten[/url]
[*][url=#]CV[/url]
[*][url=#]Ausstellungen[/url]
[*][url=#]Texte[/url]
[*]
👤
[*][url=#]Max Mustermann[/url]
[*][url=/logout.php?csrf_token=c1f0d62e91ef9653d66f2fde34163834]abmelden[/url]
[/list]





#wrap {
max-width: 70rem;
height: 100%;
min-height: 100vh;
margin: 0 auto;
display: flex;
justify-content: flex-end;
background: rgb(205,192,176,0.4);
}

[aria-expanded] {
width:45px;
height: 45px;
background: transparent;
color: transparent;
border: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1,2 h7 M1,5 h7 M1,8 h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
[aria-expanded="true"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M2,2 l6,6 M8,2 l-6,6' fill='none' stroke='%23c82f04' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

#navi-span {
width: 25rem;
display: flex;
justify-content: flex-end;
height: fit-content;
overflow: hidden;
}
#main-nav {
display: flex;
justify-content: flex-end;
flex-basis: auto;
height: auto;
}
#main-nav > * {
font-size: 1.55rem;
font-style: bold;
}

button {
border: none;
margin: 0.7rem;
}
#toggle {
}

.site-navigation > ul {
margin-top: 1em;
margin-left: 1em;
padding: 0.4em 0.9em;
border: dashed 5px red;
}
#main-nav [aria-expanded]~ul {
display: block !important;
margin-right: -12em;
transition: margin-right 0.85s;
width: 12em;
background: rgb(190,190,190,0.2);
}
#main-nav [aria-expanded="true"]~ul {
margin-right: 0;
background: orange;
}

Но я хочу решить свою проблему с новым методом translate (x) + переход , и я понятия не имею, как продолжить. Если бы кто -то мог показать мне, как это сделать в ручке, это было бы большой помощью. Может ли кто -нибудь взглянуть?

Подробнее здесь: https://stackoverflow.com/questions/796 ... transition