Prüfen, ob ein WordPress-Navigationsbereich (wp_nav_menu) ein Menü enthält

wp-nav-menu

In WordPress können über die Funktion wp_nav_menu Navigationsbereiche registriert und im Template platziert werden. Im Administrationsbereich hat der Administrator anschließend die Möglichkeit die Navigationsbereiche mit Menüs zu bestücken.
Je nach Theme sollte geprüft werden, ob ein Bereich auch eine Navigation enthält. Beispielsweise weil die Navigation auf dem Smartphone hinter einem Button versteckt wird und dieser Button natürlich keinen Sinn macht, wenn gar keine Links vorhanden sind.

Beitrag zu Ende lesen

CSS counter() – zählen mit CSS

css-counter-schema

In CSS existieren verschiedene Selektoren um ein Element über zählen zu identifizieren. Mit h2:nth-of-type(4) lässt sich beispielsweise die vierte »Überschrift 2« in einem bestimmten Abschnitt auswählen und entsprechend gestalten.
CSS Counter verhalten sich anders, denn es handelt sich hierbei nicht um einen Selektor, sondern um eine Eigenschaft die zählt und einen Zahlwert ausgeben kann. Mit einem Counter würde also nicht die vierte Überschrift ausgewählt, sondern auf der Website angezeigt, dass es sich um die vierte Überschrift handelt.

Beitrag zu Ende lesen

Berechnungen mit CSS calc()

css-calculations

Moderne Web-Layouts werden zunehmend komplex, gleichzeitig versuchen Entwickler den Code immer weiter zu verschlanken und zu optimieren. Insbesondere im Responsive Design verwendet eine Website beispielsweise mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Das führt oft zu Problemen bei der Vergabe von CSS-Klassen. Eine schöne Möglichkeit den Code von solch überflüssigen CSS-Klassen zu befreien bieten die Kalkulationsmöglichkeiten mit Hilfe der CSS-Eigenschaft calc(). Ähnlich sieht es aus, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Beispielsweise um Werbebanner in einem ansonsten flüssigen Layout zu platzieren.

Beitrag zu Ende lesen

CSS Regions mit Adobe Edge Reflow

css-regions-reflow-grafik

CSS Regions sind eine CSS-Technologie mit deren Hilfe Inhalte durch verschiedene Container geleitet werden können. Sollte euch das Konzept hinter CSS Regions unbekannt sein, lest bitte zunächst meine Einführung in dieses Thema. In Adobe Edge Reflow – einem Design-Tool für Responsive Web Design – sind CSS Regions nun ebenfalls verfügbar. Die Einführung in Edge Reflow findet ihr wiederum hier.

In diesem Beitrag erkläre ich wie CSS Regions in Edge Reflow aktiviert und eingesetzt werden können.

Beitrag zu Ende lesen

CSS Flip Animation – Objekte umdrehen

flip

Bei sog. CSS-Flips (CSS3-3D-Animationen) wird ein Objekt umgedreht, so dass die Rückseite sichtbar ist. Um den Effekt zu erreichen, setzen wir CSS3-3D-Transformationen und CSS3-Transitions ein. Spannend an diesem Beispiel sind auch die perspektivischen Möglichkeiten von CSS.

Beitrag zu Ende lesen

CSS Regions

css-regions

Es ist durchaus eine anspruchsvolle Aufgabe eine Website inhaltlich interessant, optisch ansprechend und responsive herzustellen. Komplexe und flexible Magazin-Layouts mit Infografiken, verschiedenen Text-Boxen, Marginalien usw. sind oft nur mit erheblichem Aufwand zu realisieren. Das Problem: Wir haben keine Möglichkeit zusammenhängende Inhalte nacheinander durch mehrere divs oder article-Elemente fließen zu lassen. CSS Regions bieten eine Lösung.

Beitrag zu Ende lesen