Open-Source Web-Design

Tiefer verschachtelte Menüs

/ von Karsten Reincke | Kommentar schreiben

Ein Stapel von Stühen

Wie Boot­strap, kennt auch BootS­core nur Menüs mit einer Tie­fe von 2. Boot­strap, weil es das grund­sätz­lich so will. BootS­core, weil es sei­ner Basis so strikt wie mög­lich folgt. Tie­fer ver­schach­tel­te Menüs gehen aber auch:

Ebe­ne-0-Menü-Ein­trä­ge lis­ten bei­de hori­zon­tal auf, zuge­hö­ri­ge Ebe­ne-1-Ein­trä­ge jeweils ver­ti­kal dar­un­ter. Die Ein­trä­ge auf obers­ter Ebe­ne grup­pie­ren also die Ein­trä­ge dar­un­ter. Und Menüs ver­hal­ten sich auf Smart­phones und Desk­tops gleich: Die obe­ren Menü­ein­trä­ge wer­den ange­klickt, wenn die ent­spre­chen­de Unter­grup­pe ange­zeigt wer­den soll. Und sie wer­den auch ange­klickt, damit die Grup­pe wie­der ein­ge­klappt wird. Also über­all alles ohne hover, weder auf der Smart­phones, noch auf grö­ße­ren Gerä­ten.

Hier der Weg, den BootS­core selbst dafür anbie­tet1 , mehr­di­men­sio­na­le Menüs zu erzeu­gen:

[ de | en ]

Lösung

  • Lege einen Include-Ord­ner inc in Dei­nem Child-The­me an.
  • Lade navbar.php aus github.com/imanishpushkar/bs5-navwalker in die­sen Include-Ord­ner her­un­ter.
  • Benen­ne die Datei in class-bootstrap-5-navwalker.php um.
  • Füge fol­gen­den Code der Datei functions.php in Dei­nem Child-The­me hin­zu:
// Register new 3 level depth nav-walker
function register_navwalker() {
  require_once('inc/class-bootstrap-5-navwalker.php');
  // Register Menus
  register_nav_menu('main-menu', 'Main menu');
  register_nav_menu('footer-menu', 'Footer menu');
}
  • Kopie­re — sofern noch nicht gesche­hen — die Datei header.php aus dem The­me bootscore-main in Dein Child-The­me.
  • Suche nach wp_nav_menu(array( …
  • Set­ze in dem Array 'depth' => 2, auf den Wert, die die Tie­fe Dei­nes Menüs maxi­mal hat.

Hintergrund

Erläu­tern wir die Aspek­te dies­mal rück­wärts:

  • Der Code aus dem Git­Hub-Repo­si­to­ry bs5-nav­wal­ker von Manisch Push­kar ist expli­zit MIT lizen­ziert. Du kannst ihn also direkt in Dein Child-The­me ein­bau­en, ohne den Open-Source-Cha­rak­ter zu unter­lau­fen.
  • Die Lösung selbst hat Bas­ti­an Krei­ter2 in einer Dis­kus­si­on3 als Aus­weg dafür ange­bo­ten, dass bootS­core dies­bzgl. lie­ber den Eigen­ar­ten von Boot­strap folgt.
  • Dass Boot­strap mehr­di­men­sio­na­le Menüs anbie­ten sol­le, wird immer wie­der the­ma­ti­siert.4 Und stets erneut abge­lehnt, mit unter­schied­li­chen Begrün­dun­gen. So habe er, Mark Otto5 — wie er 2017 sagt — die­sen Wunsch schon vor drei Jah­ren abge­lehnt. Und das habe nie­mand dar­an gehin­dert, gute Sites zu schrei­ben.6 Außer­dem gäbe es nur schwie­ri­ge tech­ni­sche Lösun­gen, bei denen Auf­wand und Gewinn nicht in ange­mes­se­nem Ver­hält­nis stün­den. 7

So haben wir jetzt trotz­dem eine Lösung für den Wunsch nach tie­fer ein­ge­bet­te­ten Unter­me­nüs an der Hand. Gleich­wohl wer­den wir sie nicht exten­siv anwen­den. Denn Marks Ein­wän­de in Sachen Usa­bi­li­ty und Design sind beden­kens­wert.

Und dann noch dies:

  1. Die Unter­me­nüs wer­den hier über­ein­an­der gelegt und müs­sen — ent­spre­chend der boot­Strap-Logik — aktiv wie­der weg­ge­klickt wer­den. Der hier beschrie­be­ne Weg bie­tet also (noch) kei­ne Lösung für ein feh­len­des Hover auf Desk­top­sys­te­men.8
  2. Dass Unter­me­nüs stets per Klick geöff­net und wie­der geschlos­sen wer­den müs­sen, steht der gän­gi­gen Pra­xis ent­ge­gen, dem grup­pie­ren­den Menü­ein­trag direkt auch eine Sei­te zuzu­ord­nen. Das Menü­de­sign muss dar­auf Rück­sicht neh­men.9

Oder anders gesagt: immer hübsch sau­ber blei­ben.

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. wenigs­tens indi­rekt [↩]
  2. = crft­wrk, Spi­ri­tus Rek­tor von bootS­core [↩]
  3. vgl. dis­cus­sion #347 [↩]
  4. pars pro toto: vgl. issue 27659 [↩]
  5. = mdo, Spi­ri­tus Rec­tor von Boot­strap [↩]
  6. vgl. 21026#issuecomment-313980746 [↩]
  7. vgl. 27659#issuecomment-441783535 [↩]
  8. Zu hover-Menüs spä­ter mehr [↩]
  9. Zur Grup­pie­rung von Sub­me­nüs spä­ter mehr [↩]
To top