CSS für Bootstrap 4 Navigation

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;
}
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
  • css_bootstrap_4_navigation.txt
  • Zuletzt geändert: 25/09/2019 21:10
  • von Thomas Berscheid