Navigation

Die Aufgabe eines Navigationsmenüs ist es, Website-Besucher schnell und komfortabel zum gewünschten Ziel zu transportieren und ihnen einen Überblick über die Struktur der Seite zu geben. Der Besucher muss immer wissen wo er sich befindet und welche Optionen ihm zur Verfügung stehen. Ein logisches und benutzerfreundliches Navigationsmenü ist daher entscheidend für den Erfolg einer Website.

Im Webdesign existieren unterschiedliche Navigationssysteme (z.B. hierarchisch oder netzförmig) und Darstellungsformen (z.B. Drop-Down, Tag Cloud etc. ). Zusätzlich muss die Navigation mit unterschiedlichen Eingabemöglichkeiten (z.B. Touch-Screen, Mouse) funktionieren.

Links im WordPress-Nav-Menu in neuem Fenster öffnen, mit Klassen auszeichnen und um Mikroformate erweitern

design-wordpress-menu

WordPress bietet mit dem wp_nav_menu eine tolle Möglichkeit Navigationselemente unkompliziert über das Dashboard anzulegen und zu verwalten. Normalerweise verlinkt man statische Seiten oder Kategorien innerhalb von WordPress, doch ab und zu möchte man auch externe Seiten mit in die Navigation aufnehmen, in einem neuen Fenster öffnen und vielleicht sogar mit einem entsprechenden Icon kennzeichnen.
WordPress bietet von Haus aus die Möglichkeit Links mit einer Klasse, einem Linkziel, einer Beschreibung und einem XML-Attribut auszuzeichnen. Da die Funktion jedoch standardmäßig nicht aktiviert ist, und ich sogar schon Anleitungen gesehen habe die Features mit JavaScript nachzurüsten, möchte ich euch kurz zeigen wo ihr sie einschaltet.

Beitrag zu Ende lesen

Daten per Link/URL an Zielseite übergeben

daten-uebertragen-per-link-parameter-url

Wenn ihr Daten von einer Quellseite an eine Zielseite übergeben wollt, stehen euch verschiedene Möglichkeiten offen. Die Variante, auf die ich in diesem Beitrag kurz eingehen möchte überträgt die Daten mit Hilfe der URL an eine Zielseite. Dazu werden dem Link verschiedene Parameter mitgegeben und auf der Zielseite mit dem PHP-Befehl GET wieder ausgelesen.

Beitrag zu Ende lesen

jQuery Accordion – Elemente auf- und zufahren lassen (slide toggle) und parallel das Icon austauschen

jquery-slide-toggle

Ich habe beim Aufräumen meiner Dropbox ein praktisches Snippet für einen Accordion-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden.
Ich habe eine Basis-Datei erstellt, die nur den elementaren Code der Funktion enthält. Zusätzlich habe die Demo optisch aufbereitet und ebenfalls als Download bereitgestellt. Das Mini-Script kann aber auch einfach kopiert und sofort eingesetzt werden.

Beitrag zu Ende lesen

WordPress: Titel übergeordneter Seiten auslesen (direkter und oberster Vorfahre)

wordpress-page-title

Bei der Erstellung eines WordPress-Themes kommt es häufiger vor, dass man nur den Titel einer übergeordneten Seite anzeigen möchte. Zum Beispiel um für eine Metanavigation in der Sidebar eine Überschrift auszugeben.
Besonders interessant ist in diesem Zusammenhang der Titel einer Eltern-Seite auf oberster Verschachtelungsebene.

Beitrag zu Ende lesen

WordPress: Untergeordnete Seiten gezielt ausgeben

wordpress-page-strcture

In einem WordPress-Themes müssen häufig untergeordnete Seiten ausgegeben werden. Ich benötige diese Funktion regelmäßig um in der Sidebar die themenverwandten Seiten zur aktuell aufgerufenen Seite aufzulisten. In Kombination mit dem Snippet für den Titel der Eltern-Seite lässt sich hier sehr schnell eine individuelle Navigation erstellen.
Mit Standard-Funktionen von WordPress können alle, oder nur ausgewählte Seiten eingeblendet werden.

Beitrag zu Ende lesen

WordPress: Breadcrumb-Navigation ohne Plugin

wordpress-breadcrumb

Breadcrumb-Navigationen sind in komplexen Websites ein wichtiges Navigations- und Orientierungselement. Sobald Ihr WordPress als "echtes" CMS einsetzt, werdet ihr allerdings merken, dass viele Plugins und Snippets zu sehr auf den Einsatz in Blogs ausgerichtet sind. Sobald diverse statische und hierarchisch verschachtelte Seiten und Custom Post Types im Spiel sind, stößt so manche Breadcrumb an ihre Grenzen.
Das folgende Snippet berücksichtigt alle Anforderungen die ich bisher an eine Breadcrumb gestellt habe. Da ich meinen Blog auch selbst als Archiv nutze, lege ich den entsprechenden Code hier ab. Sicher wird das Snippet euch auch mal weiterhelfen.

Beitrag zu Ende lesen

Screencast: Futuristische Navigation mit Oberflächenglanz

navigationsleiste-glanz

Die Photoshop-Profis haben in Folge 48 erneut einen Screencast zum Thema Webdesign von mir veröffentlicht.
In diesem 14-minütigen Video-Tutorial beschreibe ich wie Ihr mit Grundformen und Verläufen eine futuristische anmutende "Web 2.0"-Navigationsleiste entwerfen könnt.
Die Online-Redakteure von Photoshop-Profis beschreiben den Inhalt des Videos wie folgt:

Sie können mit Photoshop auch eigene Navigationselemente für Webseiten entwerfen. Jonas Hellwig erklärt Ihnen in dieser Folge der »Photoshop-Profis«, wie Sie eine Navigationsleiste mit Glanz- und Glüh-Effekten sowie abgerundeten Ecken komplett in Photoshop gestalten. Dabei zeigt er Ihnen gleich zwei verschiedene Wege, um einen Oberflächenglanz in Photoshop zu simulieren.

Video anschauen