Alle Webdesigner durchlaufen Phasen, die mit kreativen Ideen zu kämpfen haben. Es ist ein natürlicher Teil des Erstellungszyklus, aber es kann frustrierend werden, wenn Sie ein Website-Projekt für mehr als ein paar Tage verwenden. Es gibt keine einheitliche Lösung. Wir können uns jedoch einen Moment Zeit nehmen, um den Entwurfsprozess nach besseren Lösungen zu analysieren.
Das Hauptziel einer Website ist es, Besucher durch Ihre Seiten zu führen. Dies wird durch eine Art Navigation erreicht, meistens Links. Sie können Registerkarten, Banner, Blockelemente erstellen oder sogar ein Navigationsmenü zur Seite verschieben.
Folgen Sie uns im nachstehenden Leitfaden, während Sie die gängigsten Trends beim Design von Webnavigationsmenüs untersuchen. Sowohl Designer als auch Entwickler haben Tricks für die Beschleunigung der Erstellung von Websites gefunden. Wir hoffen, dass wir das auch tun können, indem wir einige einzigartige Tipps für die Navigation der Benutzeroberfläche anbieten.
Planen Sie eine Webseitenübersicht
Bevor der Entwurfsprozess beginnt, sollten Sie sich einen Moment Zeit nehmen, um die vielen für Sie verfügbaren dynamischen Navigationsstile zu berücksichtigen. Aus einer Navigationsleiste oder einem festen Block könnten Fly-Out- oder Dropdown-Untermenüs angezeigt werden, alternativ können Sie Unterlinks verschieben, einblenden oder möglicherweise nicht einmal eine Unternavigation benötigen. Dies sind alles wichtige Ideen, die Sie durcharbeiten müssen, bevor Sie in Photoshop eintauchen.
Bei dem obigen Beispiel verwendet Fork CMS eine einfache Navigation in der oberen Leiste, die sehr gut passt. Nichts ist verwirrend oder schwer zu finden und Sie haben Zugang zu allem wichtig Seiteninformation.
Ihre Situation kann sich aufgrund der Anzahl der wichtigen Seiten Ihrer eigenen Website stark unterscheiden. Deshalb schlage ich vor, ein Diagramm zu skizzieren, um eine fundiertere Vorstellung davon zu bekommen, wie die Navigation funktionieren soll. Dies kann die Form eines Flussdiagramms haben, in dem Sie Pfeile zeichnen, um auf die nächste Seite in einem Segment zu zeigen.
Untermenüs anhängen
Das beliebte Designmagazin Speckyboy verfügt beispielsweise über ein Dropdown-Menü in jeder Kategorie. WordPress kann dies standardmäßig einrichten, Sie müssen jedoch noch irgendeine Form von jQuery verwenden. Unterdessen verwendet die Nischen-Spieleseite Destiny Islands jQuery für ein Slide-Down-Untermenü für jedes Spiel im Sidebar-Bereich.
Möglicherweise stellen Sie auch fest, dass die Kopfzeilennavigation beim Mouseover mit Ersatzbildern gekoppelt ist. Dieser kleine Effekt ist praktisch, wenn Ihr Layout gut funktioniert und Links-Buttons mit fester Breite enthalten. jQuery ist eine Option, aber CSS3-Übergänge können sich als eine bessere Alternative anfühlen. Sowohl CSS3 als auch JavaScript bieten flockige Unterstützung für mobile Betriebssysteme. Bei älteren älteren Browsern werden Sie jedoch wahrscheinlich mehr Erfolg mit einer jQuery-basierten Methode sehen.
Und ein Untermenü muss auch nicht innerhalb der Standardformate bleiben. Ich denke, das neueste Smashing Magazine-Design sagt es am besten mit ihrer kleinen Tag-Cloud. Bewegen Sie den Mauszeiger über das Symbol neben dem Logo der Website, und ein Menü mit Blogkategorien und Tags wird angezeigt. Beachten Sie diese kleinen, aber feinen Ideen für Ihre eigenen Pop-Out-Menüs.
Ajax-Tabs
Um eine große Anzahl von Links in einem kleineren Bereich enthalten zu können, müssen einige Inhalte standardmäßig ausgeblendet werden. Ausgeblendete Dropdown-Menüs sind eine Möglichkeit, aber ein Container mit Registerkarten ist eine andere Option. Mit Ajax können Sie Daten mit unterschiedlichen Registerkarten im div asynchron aus Ihrer Datenbank oder einer anderen Webseite abrufen.
WordPress-Blogs sind für diese Art von Funktionen bekannt. Der obige Screenshot von Webdesigner Depot konzentriert sich auf ein Sidebar-Widget, um die beliebtesten und neuesten Artikel anzuzeigen. Wenn Sie der Meinung sind, dass diese Methode zu Ihrem Layout passt, ist dies eine Möglichkeit, Links in einem sehr reduzierten Bereich zu enthalten.
Wenn Sie groß werden, gehen Sie Phantasie!
Diejenigen von Ihnen, die häufig Design-Galerien besuchen, sind höchstwahrscheinlich zuvor auf Codas Seite gestoßen. Sie verwenden sowohl einen Inhaltsbereich mit Registerkarten zum Laden dynamischer Informationen als auch einen Überschriftenbereich mit drei Links: Herunterladen, Kaufen, und Hilfe.
Dies ist nur ein perfektes Beispiel, um Ihre Web-Navigation auf die nächste Ebene zu bringen. Große und mutige Schriftzüge sind oft aufmerksamkeitsstark, wenn sie entsprechend gestaltet werden. Und die über jedem Linkbereich hinzugefügten Schwebeflug-Effekte werden auf den magisch Gefühl des gesamten Layouts. Ganz zu schweigen von den köstlichen, pixelverrückten Symbolen neben jedem großen Block.
Dies ist eine sehr auffällige Darstellung von Website-Effekten und wird im Rahmen jedes Projekts nicht immer realistisch sein. Aber für Navigationslinks mit niedriger Nummerierung ist es fast besser, die Größe etwas zu erhöhen. Wenn Sie nur 3-4 Seiten haben, sollten diese leicht gefunden und exquisit überarbeitet werden. Was die Icons angeht, gibt es so viele Ressourcen, die Sie überprüfen sollten. Es ist sehr wahrscheinlich, dass Sie auf etwas Cooles stoßen!
Regeln für HTML5-Standards
Das Internet hat sich seit 2001 weit entwickelt. In den letzten 10 Jahren haben wir weltweit enorme Innovationssprünge zwischen Technikern gesehen. Und jetzt hat HTML5 die Design-Welt mit Sturm erobert und bietet auch für einige verschlungene Seitenelemente eine solide, stabile Deklaration.
Ein solches Beispiel ist das
Tag, der langsam die ungeordneten Listenformate übernimmt (oder sogar die beiden zusammenkoppelt). Hier ist eine großartige Stack Overflow-Frage zu semantischem HTML und der Verwendung des nav-Elements. Wie von der Specs-Seite zitiert?Das Nav-Element repräsentiert einen Abschnitt einer Seite, der Links zu anderen Seiten oder auf Teile innerhalb der Seite?. 
Ein persönlicher Lieblingsartikel, der Anfang des Jahres veröffentlicht wurde, trägt den Titel Wie HTML5 die Art und Weise verändert, wie wir von Navigation denken, und bringt viele starke Vorteile für die Umstellung der Codierung zum Ausdruck. Die grundlegende Verwirrung rührt von so vielen Entwicklern her, die an die Standards XHTML und HTML 4.01 gewöhnt sind.
Fazit
In diesem Handbuch wurde näher auf die Semantik und das Markup beim Erstellen eines dynamischen Navigationsmenüs eingegangen. Zwischen den neuen CSS3-Animationseffekten und der jQuery-UI-Bibliothek gibt es unzählige Anpassungen, die Sie erstellen können. Front-End-Webentwicklung hat noch nie so viel Spaß gemacht! Und es ist leicht, großartige Support-Communitys für Neulinge-Entwickler zu finden, die den Handel abholen.
Haben Sie dynamische Menüsysteme auf Ihrer eigenen Website erstellt? Oder Sie haben auf anderen Websites wirklich ein paar wirklich coole Effekte gefunden. Teilen Sie uns Ihre Gedanken und Ideen im untenstehenden Diskussionsbereich mit.