css_bootstrap_4_navigation

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
css_bootstrap_4_navigation [25/09/2019 21:10]
Thomas Berscheid [CSS für MegaMenu mit Bootstrap 4]
css_bootstrap_4_navigation [11/11/2020 23:24] (aktuell)
Thomas Berscheid [Downloads TypoScript und CSS Source Code]
Zeile 1: Zeile 1:
 ====== CSS für Bootstrap 4 Navigation ====== ====== CSS für Bootstrap 4 Navigation ======
  
-===== CSS für MegaMenu mit Bootstrap 4 =====+===== CSS Mega Menu Bootstrap 4 =====
  
 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_mit_bootstrap_4|TypoScript]] und einer kurzen [[jquery_konfiguration#javascript_fuer_mega_menu|JavaScript]] Konfiguration. Mit Hilfe des nun folgenden Style Sheet lassen sich diese Inhalte nun formatieren. 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_mit_bootstrap_4|TypoScript]] und einer kurzen [[jquery_konfiguration#javascript_fuer_mega_menu|JavaScript]] Konfiguration. Mit Hilfe des nun folgenden Style Sheet lassen sich diese Inhalte nun formatieren.
Zeile 97: Zeile 97:
     color: #900000;     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:
 +
 +<WRAP left info 100%>
 +[[https://www.agentur-ibk.de/typo3-tutorial-schulung/typo3-downloads|Download TypoScript und CSS bei Agentur IBK]]
 +</WRAP>
  
  • css_bootstrap_4_navigation.1569438651.txt.gz
  • Zuletzt geändert: 25/09/2019 21:10
  • von Thomas Berscheid