Open-Source Web-Design

Saubere Menüs

/ von Karsten Reincke | Kommentar schreiben

Ein Ballon in der Luft

In mei­nem ‘vor­he­ri­gen’ Word­Plus-Leben bin ich mit Menüs eher schlam­pig umge­gan­gen. Wor­über reden wir da? Word­Press kennt Schlag­wör­ter (key­words) und Kate­go­rien (cate­go­ries). Nun benö­ti­gen wir auch eine Bezeich­nung für die Ein­trä­ge in ver­schach­tel­ten Menüs, die selbst Sub­ein­trä­ge haben. Die sind ihrer grup­pie­ren­den Wir­kung wegen eigent­lich auch Kate­go­rien. Nur sind sie nicht das, was Word­Press meint, wenn es von Kate­go­rie spricht. Wor­auf kommt es also an? Auf sau­be­re Menüs:

Um Ver­wir­run­gen zu ver­mei­den, rede ich lie­ber nicht von einer (Menü)Kategorie, son­dern von einer Menü­grup­pie­rung, wenn ich Menü­ein­trä­ge mit Sub­ein­trä­gen mei­ne.1

Wo waren wir? Genau. Bei mei­nem schlam­pi­gen Umgang: Ich habe weder dar­über nach­ge­dacht, ob mei­ne ver­schach­tel­ten Menüs lese­rin­nen­freund­lich waren, noch habe ich mich um Kon­sis­tenz geschert. Manch­mal gehör­ten zu den Menü­grup­pie­run­gen eige­nen Sei­ten, manch­mal nicht. Und ich habe auch nicht über­prüft, ob so eine Menü­grup­pie­rungs­sei­te auf den Smart­phones und Tablets erreich­bar war. Hät­te ich das getan, wäre mir näm­lich auf­ge­fal­len, dass ich die­se Sei­ten auf dem Desk­top sys­te­ma­tisch anwäh­len und anzei­gen las­sen konn­te, auf klei­nen Gerä­ten nicht. Das will ich dies­mal bes­ser machen:

[ de | en ]

Lösung

  • Akti­vie­re das Fea­ture ‘Short­Codes in Menüs’.
  • Set­ze im Word­Press-Backend unter Settings/Permalink auf Siteurl + %postname.
  • Gib allen Sei­ten und Posts einen ein­fa­chen slug als ID.
  • Wand­le alle Menü­grup­pie­run­gen (= Menü­ein­trä­ge mit Sub­ein­trä­gen) in Cus­tom Links um.
  • Ent­stand ein sol­cher Menü­ein­trag bis­her durch eine Sei­te mit Inhalt, hän­ge sie mit pas­sen­dem Namen unter den gera­de erzeug­ten Cus­tom Link.
  • Tra­ge in jeden Cus­tom Link, der für eine Menü­grup­pie­rung steht, den String https://karsten-reincke.de ein.
  • Hän­ge dar­an — nach dem Mus­ter https://karsten-reincke.de/slug — den slug des­je­ni­gen Bei­trags an, der der Nut­ze­rin eines Desk­top­sys­tem ange­zeigt wer­den soll, wenn sie auf die Menü­grup­pie­rung klickt.

Hintergrund

Das ‘Pro­blem’ ent­steht durch das CSS-Fea­ture hover: Im Brow­ser einer Desk­top­ma­schi­ne klappt ein HOVER-Sub­me­nü auto­ma­tisch auf, wenn der Maus­zei­ger in den Bereich einer Menü­grup­pie­rung rutscht. So kann frau die Menü­grup­pie­rung außer­dem noch ankli­cken und sich die dahin­ter ‘ver­ber­gen­de’ Sei­te anzei­gen las­sen.

hover auf Smart­phones und Tablets ist dage­gen ein Pro­blem: hover wird dort nicht bedient. Statt­des­sen muss die Lese­rin eine Menü­grup­pie­rung aktiv ankli­cken, will sie die Sub­grup­pe dar­un­ter sehen. Des­halb wird sie die eine Sei­te ‘hin­ter’ Menü­grup­pie­rung auch nie errei­chen. Denn der nächs­te Klick schließt das Sub­me­nü schon wie­der.

Boot­strap — und damit auch bootS­core — fol­gen dem Prin­zip mobi­le first. So bie­ten sie von sich auch kein HOVER-Menü an.2 Denn gro­ße und klei­ne Gerä­te sol­len das­sel­be Bedien­erleb­nis bie­ten: Wenn ein Menü­ein­trag Sub­ein­trä­ge ‘ent­hält’, öff­net ein Klick das Sub­me­nü, sonst die Sei­te oder den Post.

Der Wunsch nach HOVER-Menüs für Boot­strap ist groß.3 Auch bei uns. Dann dür­fen wir heu­te aber nicht so schlam­pig agie­ren, wie ich es damals getan habe. Wir dür­fen kei­ne Grup­pe von Sub­ein­trä­gen mit einer Word­Press-Sei­te oder einem Post ‘zusam­men­fas­sen’, son­dern nur durch Cus­tom Links, die wir mit einer Sei­te aus der Grup­pe ver­knüp­fen. Klickt eine Lese­rin die­se Menü­grup­pe auf einem Desk­top­ge­rät an, wird ihr die tie­fe­re ein­ge­bet­te­te Sei­te auto­ma­tisch ange­zeigt. Auf den klei­ne­ren Gerä­ten sucht sie sich die Sei­te dage­gen aus dem Unter­me­nü selbst her­aus.

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, hat eine Web-Desi­gne­rin die ers­ten Schrit­te auch in Sachen SEO getan, wird sie sich bald einem rich­tig dicken Brett zuwen­den, näm­lich ihrem Menü. Dabei muss sie the­ma­ti­sche Clus­ter sau­ber glie­dern und prä­sen­tie­ren, ohne zu fan­cy zu wer­den. Dann kann sie die Anzei­ge von fes­ten und ska­lier­ba­ren Bil­dern auf­hüb­schen und beschleu­ni­gen. Über einen Teil die­ser Etap­pe spricht auch die­ser Post.

Im Übri­gen: Män­ner sind mit­ge­meint.

  1. Für die Tech­ni­ker unter uns — also alle — ist ein Menü ein Baum. Und jeder nicht ter­mi­na­len Kno­ten die­ses Bau­mes ist dann eine Menü­grup­pie­rung. [↩]
  2. Außer­dem ist dies eine gene­rel­le Design­ent­schei­dung. Sie reicht bis ins Jahr 2012 zurück. [↩]
  3. Sie wer­den als Exten­si­on oder Plug­in auf Git­Hub ange­bo­ten. [↩]
To top