Bei einem Projekt gab es den Wunsch, einen Teil der Navigation und eine Linkliste jeweils auf mobilen Endgeräten in ein Dropdown umzuwandeln. Dieses sollte aber kein echtes SELECT sein, da die Styles auf das Layout farblich angepasst werden sollten. Die Verwendung eines SELECT hat zusätzliche den Nachteil, dass die Inhalte doppelt in die Seite eingefügt werden müssen oder recht komplexe JavaScript Funktionen notwendig ist. Ich habe mir also eine recht elegante Variante überlegt, die ich euch kurz vorstellen möchte.

Die Schlagwörter-Wolke auf mobilen Geräten

Ich möchte für diesen Beitrag das Schlagwörter-Wolke-Widget als Beispiel nehmen, denn auch dieses ist auf mobilen Geräten nicht wirklich optimal. Erst vor ein paar Tagen hatte mich ein Kollege gefragt, wer denn die Tag-Cloud auf mobilen Geräten überhaupt verwendet bzw. verwenden kann, da die Links sehr klein sind und sehr nahe beieinanderliegen. Meine Tag-Cloud sieht z.B. wie folgt aus:

Die Tag-Cloud erfüllt für mich ebenfalls noch den Zweck, dass man sieht, worüber in einem Blog so geschrieben wird. Aber wirklich gut bedienbar ist das nicht.

Ein paar kleine CSS-Tricks

Zuerst einmal müssen wir ein Dropdown basteln. Hierzu limitieren wir einfach die Höhe des „Containers“ auf einen festen Wert, stellen jeden Link in einer neuen Zeile dar und normalisieren die Schriftgröße:

.widget_tag_cloud .tagcloud {
	background-color: rgb( 247, 247, 247 );
	border: 2px solid rgb( 228, 228, 228 );
	height: 30px;
	overflow: hidden;
}

.widget_tag_cloud .tagcloud.toggled {
	height: auto;
	max-height: 300px;
	overflow-y: scroll;
}

.widget_tag_cloud .tagcloud a {
	display: block;
	font-size: 1em !important;
	line-height: 20px;
	padding: 3px 5px;
}

JavaScript zum Auf- und Zuklappen

Ganz ohne JavaScript ist es nicht möglich das Dropdown umzusetzen. Ich habe aber versucht, es so klein wie möglich zu halten. Eine spannende Frage war, wie der Nutzer das Dropdown öffnen kann, ohne dabei gleich den ersten Link anzuklicken. Hierzu kopiere ich einfach den ersten (oder den aktiven) Link und füge ihn ganz oben ein. Dieser hat dann kein Linkziel und führt somit auch keine Navigationsaktion beim Klick aus.

Sobald das Dropdown sichtbar ist, muss es auch eine Möglichkeit geben, es wieder zu schließen. Hierzu wird ein Eventhandler auf den „Seitencontainer“ gelegt, der die CSS-Klasse, die das Dropdown aufklappt wieder entfernt. Ich habe mich dazu entschieden, den Code ohne die Verwendung von jQuery umzusetzen, denn einige Themes verwenden kein jQuery (wie auch die Standardthemes TwentyFifteen und Co.), sofern es nur um einfache Skripte geht.

Das Ergebnis

Nach ein paar weiteren CSS-Verschönerungen sieht das Ergebnis des Tag-Cloud-Dropdown dann auf meinem Blog wie folgt aus:

Hier seht ihr den kopierten Eintrag aus der Tag-Cloud. Diesen habe ich noch um einen kleinen Pfeil erweitert, damit der Nutzer merkt, dass es sich um ein Dropdown handelt. Klickt man dann auf diesen Punkt, klappt das Dropdown auf und der Nutzer kann durch die Schlagwörter scrollen:

Auch ein normales Dropdown kann man in einem Desktop-Browser relativ gut stylen und es lässt sich das gleiche Aussehen wie oben erzielen. Auf iOS-Geräten werden diese aber durch das System anders dargestellt. Auch das Dropdown hat denn eben das systemtypische UI:

Zusätzlich ist auch hier JavaScript notwendig das bei einer Auswahl eines der Punkte dann die Tag-Seite aufruft. Hierzu muss man dann also noch die Permalinks speichern um sie dann per JavaScript ausrufen zu können. Ein einfacher Link wie in meiner Lösung funktioniert dagegen ohne großen Aufwand. Ach und hatte ich schon erwähnt, dass es natürlich responsive ist? 🙂

Fazit

Mit ein paar CSS-Tricks lassen sich eigene UI-Elemente auch ohne große JavaScript Bibliotheken umsetzen, die sich perfekt in das Design der Seite einfügen. Den Code gibt es, wie immer, auch wieder in einem GitHub-Repository inklusive ZIP-Download als Plugin. Da hier individuelles CSS notwendig ist könnt ihr diesen entweder dann in eurem Theme überschreiben oder aber den bereitgestellten Filter tag_cloud_dropdown_css verwenden um eine eigene CSS-Datei zu verwenden oder die CSS-Datei des Plugins zu deaktivieren, wenn ihr den Code in eure style.css Datei einfügt.

Habt ihr auch schon einmal etwas Ähnliches gebastelt? Dann hinterlasst doch gerne einen Link hierzu in einem Kommentar. Zuletzt wünsche ich euch noch einen hoffentlich entspannten Tag, bevor morgen dann der Weihnachtsstress anfängt 🙂