Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Vorhergehende Überarbeitung | |||
| — | css_bootstrap_4_navigation [2024.01.09 16:38] (aktuell) – thomweb | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| + | ====== 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 [[bootstrap_4_navigation# | ||
| + | |||
| + | .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: | ||
| + | } | ||
| + | nav.navbar { | ||
| + | background-color: | ||
| + | margin: 0; | ||
| + | border: none; | ||
| + | max-width: 1170px; | ||
| + | margin: 0 auto; | ||
| + | border-radius: | ||
| + | background: # | ||
| + | } | ||
| + | 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: | ||
| + | } | ||
| + | .div-nav: | ||
| + | background-color: | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| + | | ||
| + | /* 2. Ebene */ | ||
| + | .div-nav-title { | ||
| + | padding: 15px 15px 5px 20px; | ||
| + | } | ||
| + | .div-nav-title: | ||
| + | background-color: | ||
| + | color: #900000; | ||
| + | } | ||
| + | .div-nav-title: | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| + | .nav-title { | ||
| + | font-weight: | ||
| + | } | ||
| + | .nav-title: | ||
| + | text-decoration: | ||
| + | } | ||
| + | .div-nav-abstract { | ||
| + | font-size: 12px; | ||
| + | line-height: | ||
| + | font-weight: | ||
| + | color: #666; | ||
| + | } | ||
| + | | ||
| + | /* 3. Ebene */ | ||
| + | .div-nav-content { | ||
| + | padding: 3px 15px 3px 25px; | ||
| + | line-height: | ||
| + | } | ||
| + | .div-nav-content: | ||
| + | background-color: | ||
| + | } | ||
| + | .div-nav-content: | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| + | .nav-content { | ||
| + | font-size: 14px; | ||
| + | } | ||
| + | .nav-content: | ||
| + | text-decoration: | ||
| + | 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. | ||
| + | |||
| + | # | ||
| + | font-family: | ||
| + | width: 800px; | ||
| + | } | ||
| + | .navbar { | ||
| + | border-radius: | ||
| + | padding: 0 15px; | ||
| + | margin: 10px 0 0 0; | ||
| + | background-color: | ||
| + | } | ||
| + | | ||
| + | .dropdown-menu { | ||
| + | border: none; | ||
| + | border-radius: | ||
| + | padding: 0; | ||
| + | margin: 0 0 -3px -3px; | ||
| + | min-width: 100%; | ||
| + | } | ||
| + | | ||
| + | /* 2. Ebene Navigation */ | ||
| + | .dropdown-item.active, | ||
| + | .dropdown-item: | ||
| + | background-color: | ||
| + | } | ||
| + | | ||
| + | .dropdown-item: | ||
| + | background-color: | ||
| + | color: #eee; | ||
| + | } | ||
| + | | ||
| + | .nav-container { | ||
| + | padding: 0; | ||
| + | } | ||
| + | |||
| + | ===== Download TypoScript und CSS Source Code ===== | ||
| + | |||
| + | Wir haben aus unseren TYPO3 Projekten einige ZIP-Dateien zusammengestellt, | ||
| + | |||
| + | <WRAP left download 100%> | ||
| + | [[https:// | ||
| + | </ | ||