kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Navigation


jQuery Accordion – Elemente auf- und zufahren lassen (slide toggle)

Um auf einer Website lange Listen mit Inhalten platzsparend abzubilden, wird häufig auf ein sog. Accordion zurückgegriffen. Bei einem Accordion verfügt jeder Eintrag der Liste über einen Titel und eine Beschreibung. Per Klick auf den Titel wird dann die Beschreibung eingeblendet und – sofern gewünscht – die Beschreibungen aller anderen Einträge versteckt. In diesem Beitrag findet ihr verschiedene Versionen eines Accordions auf Basis des JavaScript-Frameworks jQuery.

Beitrag zu Ende lesen

WordPress: Untergeordnete Seiten (Child Pages) gezielt ausgeben

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

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

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

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

Photoshop-Screencast: Ebenenkompositionen im Webdesign

Beim Webdesign mit Photoshop müssen häufig verschiedene Unterseiten eines Projektes gestaltet werden damit der Kunde oder der Art-Director einen Eindruck des späteren Produkts bekommen kann. Nun kann man natürlich für die verschiedenen Subpages jeweils ein neues Dokument erstellen. Doch was passiert wenn sich nachträglich etwas im Header der Seite ändert oder die Navigation um einen Punkt erweitertert werden soll?
Spätestens zu diesem Zeitpunkt müssen Korrekturen in mehreren Photoshop-Files durchgeführt werden was natürlich lästig und zeitaufwändig ist. Mit Ebenenkompositionen könnt Ihr dieses Problem geschickt umgehen und alle Unterseiten, Navigations-Zustände etc. in einer Datei verwalten.

Beitrag zu Ende lesen