Menü ein-, ausblenden

[LK]

Hallo zusammen,

die HTML und CSS Nutzung ist für mich noch neu. Ich bin gerade dabei eine Webseite mit einem Menü zu erstellen. Ich habe bereits die Webseite mit einer Reihe vertikal angeordneter Buttons erstellt, die zwischen verschiedenen Links der Webseite umschalten. dies funktioniert wie gewünscht. Nun würde ich gerne das Menü ein- und ausblenden können. Ein beispiel ist hier zu sehen: http://www.web-toolbox.net/webtoolbox/index.html#home Leider fehlt mir der Ansatz und den Quellcode zum Menü auf der verlinkten Seite hilft mir auch nicht wirklich weiter...

<nav class="menu" id="theMenu">

                <div class="menu-wrap">
                        <h1 class="logo"><a href="index.html#home">Clickstart</a></h1>
                        <i class="icon-remove menu-close"></i>
                        <a href="#home" class="smoothScroll">Home</a>
                        <a href="#about" class="smoothScroll">About</a>
                        <a href="#projekte" class="smoothScroll">Portfolio</a>
                        <a href="#contact" class="smoothScroll">Impressum</a>

                </div>

                <!-- Menu button -->
                <div id="menuToggle"><i class="icon-reorder"></i></div>
        </nav>

Ich würde mich freuen, wenn Ihr einen Ansatz anhand dieses Beispiels für mich hättet oder eine Tutorial oder ähnliches zur Umsetzung eines solchen Menüs.

vielen Dank!

[Gunnar Bittersmann]

@@LK

Nun würde ich gerne das Menü ein- und ausblenden können. Ein beispiel ist hier zu sehen: http://www.web-toolbox.net/webtoolbox/index.html#home

Daran sollte man sich kein Beispiel nehemn. Und wenn, dann ein schlechtes: So nicht machen!

Zunächst einmal: Bei breiten Viewports (Desktop, Laptop, Tablet) ist genügend Platz vorhanden. Warum sollte das Menü dann überhaupt ausgeblendet werden?

Das Hamburger-Icon mag einigen verständlich sein, anderen aber nicht. Es sollte zusätzlich mit „Menü“ beschriftet sein.

Die Seite ist mit der Tastatur nicht bedienbar. Zum einen wegen a:hover, a:focus { outline: 0 }. Man erkennt beim Durchschalten mit der Tab-Taste überhaupt nicht, wo man sich gerade befindet.

Merke: Niemals outline für :focus entfernen, wenn man nicht stattdessen eine andere Kennzeichnung vorsieht.

Zum anderen wegen <i class="icon-reorder"></i>. Dass das i-Element eine bestimmte Bedeutung hat (die nicht „Icon“ ist), es hier also missbräuchlich verwendet wird, ist da noch eine Lappalie.

Schwerwiegender ist, dass es keinen Inhalt hat. Da sollte „Menü“ drinstehen. Was man visuell verstecken könnte. Aber – wie gesagt – hier nicht sollte.

Und ganz schwer wiegt, dass i kein interaktives Element ist (und es unsinnig wäre, es zu einem zu machen). Es ist bei Tastaturbedienung mit der Tab-Taste nicht erreichbar; man kann das Menü nicht aufklappen.

Merke: Niemals nicht-interaktive Elemente als Target für click-Events vorsehen. Für sowas sind buttons zu verwenden.

Vor einiger Zeit hatte ich mal solch ein Menü erklärt und es gerade eben in diesem Thread verbessert. Das vorläufige Ergebnis sieht so aus.

Hier geht das Menü von oben auf, nicht von der Seite. Aber das ließe sich mit einigen Änderungen im CSS auch hinbekommen.

LLAP 🖖