Navigation mit Bootstrap 3
Bootstrap hat sich in den vergangenen Jahren als Quasi-Standard für die Gestaltung responsiver Webseiten etabliert. Es ist recht leicht, ein Menu im Header der Seite zu gestalten, dass bei kleinen Endgeräten mit der Hand ebenso zu bedienen ist wie auf Desktop Rechnern mit der Maus.
Hier finden Sie ein Beispiel für das TypoScript einer Navigation über drei Ebenen.
Gesamte Navigationsleiste
Über die Klasse .navbar-default überschreibt man das Standard Layout von Bootstrap.
In diesem Fall wird die Farbe auf das Projekt angepasst und die Border entfernt. Zudem erhalten die Links eine eigene Farbe.
.navbar-default { background-color: #478FAD; border: none; } ul > li.active > a { background-color: #478FAD; }
1. Ebene der Navigation
Über diese CSS Klassen werden verschiedene Zustände der Bootstrap Navigation überschrieben: der Standard Link, die aktive Zustand und die geöffnete Seite in einem Dropdown Menu.
.navbar-default .navbar-nav > .active > a { background-color: #1877A0; color: #fbe1df; } .navbar-default .navbar-nav > .active > a:hover { background-color: #0C506D; color: #46BCF0; } .navbar-default .navbar-nav > .active > a:active, .navbar-default .navbar-nav > .active > a:focus { background-color: #119BD7; color: #efefef; } .navbar-default .navbar-nav > .open > a:active, .navbar-default .navbar-nav > .open > a:visited, .navbar-default .navbar-nav > .open > a:focus { color: #fff; background-color: #119BD7; } .navbar-default .navbar-nav > li > a { color: #52BBE7; } .navbar-default .navbar-nav > li > a:hover { color: #7CD4F9; }
Dropdown Menus für aufklappende zweite Ebene
.dropdown.open > a { color: #99D9F5; background-color: #26B6F4; } .dropdown.open > ul > li > a { color: #99D9F5; } .dropdown-menu { background-color: #26B6F4; padding: 0; border: none; border-radius: 0; } .dropdown-menu > li > a { color: #069BDB; } .dropdown-menu > li > a:hover { color: #069BDB; background-color: #229ACD; }
2. Ebene der Navigation
#navbar > ul > li.dropdown.active.open > ul > li > a { color: #8FDDFE; } #navbar > ul > li.dropdown.active.open > ul > li.active > a { background-color: #1877A0; color: #59CAFA; } #navbar > ul > li.dropdown.active.open > ul > li > a:hover { background-color: #229ACD; color: #59CAFA; } #navbar > ul > li > ul > li > a { color: #BAE9FD; } #navbar > ul > li > ul > li > a:hover { color: #1877A0; background-color: #BAE9FD; }
Einbindung eigener Schriftarten
Der Standard der Navigation lässt sich mit Google Fonts überschreiben, die über das TypoScript Setup geladen werden.
#navbar { font-family: Lexend Deca, Montserrat, Verdana, Geneva, Arial; }
Fixed-Top: Inhalte unter Navigation sichtbar machen
Bootstrap
bietet die Möglichkeit, die Navigation
am oberen Rand des Browserfensters zu fixieren. Dies führt dazu, dass die oberen Inhalte unter dieser Navigation verschwinden. Dies kann man umgehen, wenn man den Rest der Webseite um ca. 45 Pixel nach unten verschiebt.
body { padding-top: 45px; }