Kann mir jemand bei der Erstellung eines ausklappbaren Seitenmenüs mit Hamburger-Button helfen?
Hoffentlich kann mir hier jemand weiterhelfen.
Ich möchte ein ausfahrbares Seitenmenü mit einem Hamburger-Button (Font Awesome) konstruieren.
Im unteren Bild sieht man meinen momentanen Stand. Ich möchte aber, das von seitlich rechts das Menü hineinschwebt.
Zur Zeit habe ich Folgendes:
<nav role="main-navigation" aria-label="site" id="main-navigate" class="main-navi">
<button aria-expanded="undefined"></button>
<ul id="navlinks">
<li class="sub-menue">
<a class="a-link" href="/test/public/Testseite2-2.html">Blog Max Mustermann</a>
<button aria-expanded="undefined"></button>
<div class="nav-group">
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-A</a>
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-B</a>
</div>
</li>
<li class="sub-menue">
<a class="a-link" href="/test/public/Testseite2-2.html">Blog Erika Mustermann</a>
<button aria-expanded="undefined"></button>
<div class="nav-group">
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-A</a>
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-B</a>
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-C</a>
</div>
</li>
<li class="sub-menue">
<a class="a-link" href="/test/public/Testseite2-2.html">Website Erika Mustermann</a>
<button aria-expanded="undefined"></button>
<div class="nav-group">
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 3-A</a>
</div>
</li>
<li class="sub-menue">
<a class="a-link" href="/test/public/Testseite2-2.html">Impressum / Datenschutz</a>
<button aria-expanded="undefined"></button>
<div class="nav-group">
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-A</a>
<a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-B</a>
</div>
</li>
</ul>
</nav>
Da mein Post zu lang wird, hier ein Downloadlink des JS, CSS und HTML: LINK wieder gelöscht!
Könnte bitte jemand mir dabei helfen, dies zu entwickeln? Ein rudimentäres CodePen-Beispiel würde mir helfen.
1 Antwort
Auf W3Schools findest du praktische Beispiele, an denen du dich orientieren kannst:
Und noch ein paar Hinweise zu deinen Buttons:
- Sie geben mit aria-expanded zwar einen Ausklappzustand an, allerdings nicht für welches Element das nun gilt. Ergänze ein aria-controls-Attribut, welches auf die ID des jeweiligen Elements verweist.
- Statt den Zustand von aria-expanded erst beim Laden zu setzen, könntest du das auch gleich im initialen Markup tun. Es bedeutet weniger Code, weniger benötigte Rechenleistung (Suchen und Ändern im DOM) und einen klaren initialen Status.
- Den Buttons fehlt eine Beschriftung. Pseudoelemente können das nicht sicher gewährleisten. Sie sollten vorzugsweise nur für dekorativen Inhalt benutzt werden.
Also mal konkreter: Wenn (der erste button)
#main-navigate button aria-expanded="true" ist
dann wandelt sich ul .navlinks von
display: none; zu ...
Also: ul .navlinks slidert von
rechts langsam hinein...
.navlinks
{
position: absolute;
margin-right: -100em;
transition: 150ms;
}
???
Zu b: In der init-Funktion läufst du über alle Buttons und aktualisierst deren aria-Attribut. Das ist aber unnötig. Schreibe den richtigen Wert doch gleich in dein HTML.
Zu c: Das aria-controls-Attribut beschriftet den Button nicht, es stellt nur eine Verbindung her, an der man ablesen kann, welches Element von dem Button kontrolliert/gesteuert wird.
Den Buttontitel kann man entweder so:
<button><span class="visually-hidden">Do something</span></button>
oder so
<button aria-label="Do something"></button>
setzen. Der Text sollte kurz und eindeutig beschreiben, was der Button tut (z.B. Öffne Sidebar, o.ä.).
Das span-Element im ersten Fall ist normalerweise natürlich optional, aber hilft dabei, den Text mit CSS zu verstecken.
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Die Beschriftung ist schließlich nur für Screenreader gedacht, aber der Button selbst soll sichtbar bleiben.
Eigentlich, wenn möglich, möchte ich eine reine CSS Lösung.
Vor mehr als zehn Jahren wäre diese Entscheidung wohl noch verständlich gewesen, heutzutage ist sie das definitiv nicht mehr. CSS-only-Lösungen bauen auf Tricksereien, die Zustände der jeweiligen Elemente (siehe z.B. aria-expanded) können nicht entsprechend aktualisiert werden.
Die W3Schools-Beispiele liefern bereits eine gute Anleitung. Nimm dir beispielsweise die Sidenav Push Content-Demo als Vorlage. Die Sidebar wird absolut positioniert, nur für deinen Fall tauschst du das left-Property mit dem right-Property aus. In den JS-Funktionen wird die Breite der Sidebar verändert (von 0 auf Xpx und zurück). Wenn die Sidebar den Hauptcontainer der Seite schieben soll, müsste noch das marginRight-Property angepasst werden (in der Demo ist es das marginLeft-Property, da die Sidebar von der anderen Seite kommt).
Außerdem sollten wie gesagt noch die aria-Attribute gesetzt und mit JS je Status aktualisiert werden, da das in den W3Schools-Demos komplett außer Acht gelassen wird.
Tut mir leid, ich verstehe nicht alles.
a) Ergänze ein aria-controls-Attribut... ...ist klar, dazu habe ich etwas gefunden...
b) Statt den Zustand von aria-expanded erst beim Laden zu setzen, könntest du das auch gleich im initialen Markup tun. <= das verstehe ich nicht
c) Den Buttons fehlt eine Beschriftung. <== wird das nicht mit dem aria-controls-Attribut gemacht oder wie muss ich zusätzlich den button beschriften?
Die Beispiele habe ich auch bereits gefunden, helfen mir aber nicht wirklich weiter da dort JS verwendet wird. Eigentlich, wenn möglich, möchte ich eine reine CSS Lösung.
Ja, mein Beispiel ist speziell, kann mir niemand eine Schritt für Schritt Anleitung geben, zumindest jeweils Hinweise dazu.