Open-Source Web-Design

Menüstapel: Verschieben heißt verschönern

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 dann recht unfreund­lich zu unse­ren Lese­rin­nen. Denn sie stol­pern dann dar­über, dass da jeweils etwas ver­bor­gen unter dem liegt, was sie oben­auf sehen. Also ent­zer­ren wir die Menü­st­a­pel 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.


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.

To top