Open Source

Verschiebe und verschönere!

/ von Karsten Reincke | Kommentar schreiben

Ein Zeitungsstapel

Tie­fer ver­schach­tel­ten Menüs wer­den der Gerä­te­grö­ße gemäß ange­zeigt. Die gesta­pel­ten Sub­me­nüs bei grö­ße­ren Bild­schir­men sind lese­rin­nen­un­freund­lich. Denn wir stol­pern über das, was dar­un­ter liegt. Also ent­zer­ren wir die Sta­pe­lei etwas.

[ de | en ]

Lösung:

  • Tra­ge ein­fach den fol­gen­den Code in Dei­ne _bscore_custom.scs Datei ein:
@include media-breakpoint-up(lg) {
  ul.depth_1 {
    left: 25% !important;
    top: 0% !important;
  }
  ul.depth_2 {
    left: 25% !important;
    top: 0% !important;
  }
  ul.depth_3 {
    left: 25% !important;
    top: 0% !important;
  }
  ul.depth_4 {
    left: 25% !important;
    top: 0% !important;
  }
}

Hintergrund:

Bis zum Boot­strap-Break­point LG wird in den Menüs Platz geschaf­fen, um die Sub­me­nüs dort hin­ein ein­zu­bet­ten. So wird nichts ver­deckt. Die Lese­rin sieht direkt, was gemeint ist. Anders ober­halb des Boot­strap-Break­points LG: Hier wer­den die Sub­me­nüs auf­ein­an­der gesta­pelt. Das lenkt ab. Die Lese­rin denkt näm­lich zunächst noch ein­mal über das Dar­un­ter­lie­gen­de nach. Ver­schie­ben wir die Sub­me­nüs jedoch jeweils ein klei­nes Stück nach rechts, bleibt das Vor­he­ri­ge wei­ter erkenn­bar, ohne vom Neu­en abzu­len­ken.

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

To top