Manchmal kann das Navigationsmenü einer der schwierigsten Teile des Designprozesses sein. Dieser Bereich kann die Nutzbarkeit der gesamten Website bestimmen.
Heute schauen wir uns 30 inspirierende Beispiele für gutes Menüdesign an. Obwohl viele reine CSS sind, fügen andere Bilder und / oder JavaScript hinzu, um die Ästhetik und Funktionalität zu erhöhen.
Tiefer tauchen
Es ist immer hilfreicher, ein Gefühl für den Entwicklungsprozess zu bekommen, als nur ein Bild zu sehen. In diesem Abschnitt werden wir kurz die Ästhetik der einzelnen Menüs und die Auswirkungen des Entwicklers durch den Entwickler besprechen. Auf diese Weise können Sie sich mit neuen Methoden inspirieren lassen, um eigene Menüs zu erstellen.
Seide Flut
Dies ist eines der minimalsten Menüs in der Liste. Es ist im Grunde nur reiner Text mit einem erweiterten Blue-Box-Rollover, aber es ist wirklich einfach zu implementieren und ergibt einen schönen Effekt.
Glenn Sorrentino
In diesem Beispiel werden CSS-Rahmen am oberen und unteren Rand des Menüs verwendet, deren Dicke zunimmt, wenn Sie mit der Maus darüber fahren.
Strutta
Wenn Sie einen strukturierten Hintergrund haben, sollten Sie die Transparenz in Ihrem Menü verwenden, um die Ästhetik zu erhöhen. Dies könnte leicht mit RGBa in CSS3 erfolgen.
Ellenbogen-Park
Ein weiteres Beispiel für Transparenz im Navigationsbereich. Diese Funktion hat einen ähnlichen Effekt wie das erste Beispiel, wobei das Auswahlfeld bis zum oberen Rand der Seite reicht. Dies erhöht die Sichtbarkeit und sorgt für ein nahtloseres Design.
Gedankenbot
Wenn Sie diese Schaltflächen überfahren, ändert sich der Hintergrund in ein helleres Rot. In Kombination mit dem glänzenden Look (erreicht mit einem transparenten PNG) wird die Illusion des leuchtenden Bereichs erzeugt.
Toffee-Nuss-Design
Dieses schöne Beispiel verwendet CSS-Sprites für die Navigation. Das gesamte Menü besteht aus einem PNG, in dem die Registerkarten in drei Status angezeigt werden: Aus, Ein und Ein +.
Safarista
Hier sehen wir jeden Abschnitt der Navigation als eine Mischung aus Bild und Text. Das Symbol, der Farbverlauf und der kleinere Hintergrund bestimmen das Bild jedes Abschnitts, während der größere Text als HTML mit einem unterstrichenen Hover-Effekt dargestellt wird.
David Jonsson
Ein weiterer einfacher Hover-Effekt, der nach oben blutet. Dieses hatte versteckte Symbole, die nur angezeigt werden, wenn Sie mit der Maus darüber fahren. Ein schöner Effekt!
Asvalia
Ich mag die Farben und den krummen Text in diesem Menü sehr. Die leuchtenden Überschläge sind perfekt.
Bonsai Studios
Dies ist ein extrem einfaches vertikales Menü mit Transparenz und dunklerem Schwebeflug. Es erledigt die Arbeit, sieht gut aus und kann in wenigen Minuten aufgebaut werden.
Große Erwartungen Kirche
Ein weiteres vertikales Navigationsmenü. Dieses implementiert einige grundlegende, aber attraktive Symbole und eine Hintergrund-GIF mit einem Verlauf für den Schwebeflug.
Ryan Couser
Dieser verwendet einige einfache Sprites, um den Schwebeflug auszuführen. Jedes Symbol ist ein Bild mit den Status Ein und Aus.
Kk Media
Hier sehen Sie ein vertikales Menü mit detaillierteren Symbolen. Jeder Link ist ein HTML-Listenelement mit einem einfachen Hintergrundbild, das in CSS angewendet wird.
Bite Club
Ich habe diese Navigationsleiste wirklich geliebt. Die Helligkeit fesselt Ihre Aufmerksamkeit und die Umkehrung der Farben macht einen perfekten Rollover. Dazu wird für jedes Menüelement ein Sprite mit jeweils drei Status verwendet.
Hauptstadt-Ausrüstungsfirma
Ich dachte, dass die hausförmige Navigationsauswahl in diesem Fall clever war. Der Text in jedem Link ist Teil des Bildes. Wenn Sie so etwas replizieren, wäre es einfach, statt des Live-Textes statt des Hintergrundbilds Live-Text zu verwenden.
Erdbeerfreizeit
Dieses Dropdown-Menü verwendet ein kleines, sich wiederholendes transparentes PNG, um den reduzierten Deckkrafteffekt zu nutzen. Wir können uns darauf freuen, dass dies in naher Zukunft mit RGBa viel einfacher wird, wenn mehr Browser an Bord kommen.
Künstliches Studio
Ja, du hast es erraten, mehr Image-Sprites (hier einen Trend zu spüren?). Die großen Tasten und die hervorragenden Farbverläufe sorgen für einen schönen Navigationsbereich.
Cognigen
Dies war bei weitem eines der originellsten Konzepte, auf die ich bei meiner Suche gestoßen bin. Um den einzigartigen 3D-Effekt zu erzielen, hat der Designer für jede Schaltfläche satte vier Zustände verwendet, die sich abhängig davon ändern, ob die Schaltfläche ausgewählt ist, über dem Mauszeiger bewegt wird oder eine benachbarte Auswahl hat.
Mehr CSS Menü Güte
Nun, da wir einige großartige Beispiele besprochen haben, finden Sie hier ein paar weitere Informationen. Verwenden Sie die Überprüfungsfunktion Ihres Browsers, um den Code und die Bilder dahinter zu überprüfen, die Ihnen gefallen!
Manndible Cafe
Code Greene
Oper
Mac-Kaninchen
Clark Builders
Herr B und Freunde
Unterwandern
Das Swish Life
Geheimnis Zinn
LiveResto
FeelSocial
Gowalla
NZ Festival
Laden Sie vorgefertigte Menüs herunter!
Benötigen Sie einen guten Ausgangspunkt für Ihre eigenen CSS-Menüs? Schauen Sie sich diese großartigen kostenlosen Ressourcen an.
- 13 Styles: Die Menüs basieren auf Listen, sind sehr leicht, einfach zu implementieren und Browser-kompatibel.
- CSS Menu Maker
- CSS-Spiel: Menüs
- CSS-Menüs
- Kostenlose Cross-Browser-CSS-Menüs
Zeigen Sie uns jetzt Ihre
Haben Sie ein CSS-Menü, auf das Sie besonders stolz sind? Verwenden Sie die Kommentare unten und lassen Sie einen Link, damit wir sehen können. Teilen Sie uns auch mit, welches der obigen Beispiele Ihnen am besten gefallen hat.