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

[Anonymous]

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

flyoutExtension();

function flyoutExtension () {
const menu = document.querySelector('nav ul');
menu.insertAdjacentHTML('beforebegin', ` `);
menu.classList.add('menu');

const toggle = document.querySelector('#toggle');
toggle.addEventListener('click', function() {
const currentState = toggle.getAttribute('aria-expanded');
const newState = currentState === 'true' ? 'false' : 'true';
toggle.setAttribute('aria-expanded', newState);
const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
menu.style.display = isExpanded ? 'block' : 'none';
});

}
const cssRules = ` `;

const stylesheet = document.createElement('style');
stylesheet.textContent = cssRules;
document.querySelector('html > head').appendChild(stylesheet);

});
< /code>
#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;
}
< /code>

• Aktuelles
• Arbeiten
• CV
• Ausstellungen
• Texte
• 
• Max Mustermann
• abmelden

< /code>

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

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