Generator für responsives Menü

Generator für responsives Menü: wofür es gut ist

Jede Website braucht ein Menü, das am Computer und am Handy funktioniert. Dieser Generator baut das Navigationsmenü mit deinen Links: nebeneinander auf großen Bildschirmen und mit Hamburger-Button unterhalb des Umbruchpunkts, den du wählst.

Der Code folgt den Best Practices der Barrierefreiheit: nav-Element mit Beschriftung, Button mit aria-expanded und aria-controls, Schließen mit der Esc-Taste und beim Antippen eines Links und Animation des Icons, die die Einstellung für weniger Bewegung respektiert. Die Vorschau zeigt das Ergebnis in Computer- und Handygröße gleichzeitig.

So geht’s

1. Schreibe den Namen der Website und die Links.
2. Wähle Farben, Umbruchpunkt und ob der letzte Link zum Button wird.
3. Kopiere HTML, CSS und JavaScript oder lade die Beispielseite herunter.

Wann nutzen

• Handgemachte Unternehmenswebsite.
• Landingpage ohne Framework.
• Ein altes Menü ersetzen, das am Handy nicht funktioniert.

Häufige Fragen

Ist das Menü barrierefrei?

Ja. Der Button ist ein button-Element mit aria-expanded und aria-controls, das Menü schließt mit der Esc-Taste und beim Klick auf einen Link, und die Navigation steckt in einem nav-Element mit aria-label. Es funktioniert mit Tastatur und Screenreader.

Funktioniert es ohne JavaScript?

Am Computer ja: Die Links erscheinen immer. Am Handy braucht der Button JavaScript zum Öffnen; deshalb versteckt der Code die Links nur, wenn das Skript lädt (Klasse js im html), und ohne Skript erscheinen sie gestapelt.

Welchen Umbruchpunkt nutze ich?

Bis zu etwa fünf kurzen Links funktionieren 768 px gut. Bei mehr Links oder langen Namen erhöhe auf 960 oder 1024 px, damit die Einträge nicht gequetscht werden, bevor es zum Hamburger wird.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools