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.

Ü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;
}

Ü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.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;
}
#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;
}
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • bootstrap_3_navigation.txt
  • Zuletzt geändert: 14/09/2019 13:27
  • von Thomas Berscheid