Wie in meiner Überschrift schon beschrieben möchte ich ein Menü bauen, das seitlich von rechts langsam einslidert. Für das Menü möchte ich <details> /<summary> verwenden.
So soll es mal aussehen:
Meine html-Struktur von der Navigation:
<nav id='sitenav' aria-labelledby='sitenav-label'>
<h2 id='sitenav-label' class='visually-hidden'>Site-Navigation</h2>
<details>
<summary>Menü</summary>
<ul>
<li aria-current='page'>
<details>
<summary>Impressum & rechtliches</summary>
<ul>
<li aria-current='sub-page' tabindex=0>
<details>
<summary>Impressum</summary>
<ul>
<li><a href=''>Kontakt</a></li>
<li><a href=''>Fotodokumentationen</a></li>
<li><a href=''>Links</a></li>
</ul>
</details>
</li>
<li><a href=''>Nutzungsbedingungen</a></li>
<li><a href=''>Datenschutz & Urheberrecht</a></li>
</ul>
</details>
</li>
<li><a href=''>Website Erika Mustermann</a></li>
<li><a href=''>Blog Max Mustermann</a></li>
<li><a href=''>VLog Erika Mostermann</a></li>
</ul>
</details>
</nav>
Der sichtbare Hamburger Button (mit den Pseudoelementen ::after und ::before bei details / summery) ist position: sticky;
Nun könnte mir jemand bitte zeigen wie ich nun mein <ul> von rechts langsam einslidern lasse. Stoppen soll das Untermenü dann links vom Button.
Es geht mir um das Prinzip wie man es macht. Kann mir dies bitte jemand an einem einfachen Beispiel zeigen?
