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.

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

Suchfeld automatisch zum WordPress-Menü hinzufügen

wordpress-nav-menu

Seit der WordPress Version 3.0 haben wir die Möglichkeit über das Backend individuelle Navigationsmenüs zu erstellen. Dieses Feature erleichtert nicht nur das Anlegen von Navigationen sondern vor allem auch die spätere Pflege seitens des Kunden oder des Webdesigners.
Nachdem die Unterstützung für diese Menüs im Theme aktiviert ist kann die Navigation entweder per Template-Tag oder per Widget im Theme anzeigen werden. Um diesem Menü nun automatisch auch noch ein Suchfeld hinzuzufügen reicht es die functions.php ein wenig anzupassen.

Beitrag zu Ende lesen