Sie befinden sich hier: start » css_bootstrap_4_navigation

CSS für Bootstrap 4 und 5 Navigation

CSS für Bootstrap 4 und 5 Navigation

CSS Mega Menu Bootstrap 4 und 5

Bootstrap stellt eine recht einfache Möglichkeit bereit, eine individuell gestaltete Navigation mit mehreren Ebenen für eine Webseite zu gestalten. Dazu braucht es die Einbindung eines TypoScript und einer kurzen JavaScript Konfiguration. Mit Hilfe des nun folgenden Style Sheet lassen sich diese Inhalte nun formatieren.

.megamenu-li {
  position: static;
}
.megamenu {
  position: absolute;
  max-width: 1200px;
  width: 100%;
  left: 0;
  right: 0;
  padding: 0;
  margin-top: -10px;
}
.dropdown-menu {
  border: 1px #eeac5d solid;  
  border-radius: 0 0 0 0;
}
nav.navbar {
  background-color: #a65600;
  margin: 0;
  border: none;
  max-width: 1170px;
  margin: 0 auto;
  border-radius: 0 0 0 0;
  background: #a65600; 
}
nav.navbar.navbar-default > div.container-fluid {
  padding: 0;
}
ul.nav.navbar-nav > li > a {
  color: #eee;
}

/* 1. Ebene Boxen für Menu */
.nav-item.dropdown.megamenu-li > a {
  color: #eee;
}
.nav-item.dropdown.megamenu-li.show > a {
  color: #fff;
}

/* Alle Elemente ab der 2. Ebene */
.div-nav {
  padding: 0;
  border-bottom: 1px #ffc173 dotted;
}
.div-nav:hover {
  background-color: #ddd; 
  transition: all 0.5s;
}

/* 2. Ebene */
.div-nav-title {
  padding: 15px 15px 5px 20px;
}
.div-nav-title:hover {
  background-color: #eee;  
  color: #900000;
}
.div-nav-title:hover {
  transition: all 0.5s;
}
.nav-title {
  font-weight: bold;
}
.nav-title:hover {
  text-decoration: none;
}
.div-nav-abstract {
  font-size: 12px;
  line-height: 14px;
  font-weight: normal;
  color: #666;
}

/* 3. Ebene */
.div-nav-content {
  padding: 3px 15px 3px 25px;
  line-height: 16px;
}
.div-nav-content:hover {
  background-color: #eee;
}
.div-nav-content:hover {
  transition: all 0.5s;
}
.nav-content {
  font-size: 14px;
}
.nav-content:hover {
  text-decoration: none;
  color: #900000;
}

CSS Bootstrap 4 Navbar

Das übliche Menu für eine Navigation mit Bootstrap 4 erstellt man gewöhnlich mit einer Navbar. Im Vergleich zu der Version Bootstrap 3 ist die Arbeit für Frontend Entwickler einfacher geworden.

Hier finden Sie eine Vorlage für die Formatierung der Elemente der ersten und zweiten Ebene einer Navbar.

#navbarNavDropdown {
  font-family: Open Sans, Montserrat, Lato, sans-serif;
  width: 800px;
}
.navbar {
  border-radius: 0;
  padding: 0 15px;
  margin: 10px 0 0 0;
  background-color: var(--farbe-stark);
}

.dropdown-menu {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 -3px -3px;
  min-width: 100%;
}

/* 2. Ebene Navigation */
  .dropdown-item.active, 
  .dropdown-item:active {
  background-color: var(--farbe-hover);
}

.dropdown-item:hover {
  background-color: var(--farbe-hover);
  color: #eee;
}

.nav-container {
  padding: 0;
}

Download TypoScript und CSS Source Code

Wir haben aus unseren TYPO3 Projekten einige ZIP-Dateien zusammengestellt, in denen Sie Source Code für TypoScript und Style Sheets finden: