Bootstrap 3 Submenu

Bootstrap 3 Dropdown Submenu – Die Lösung

In der Version 2 von Twitter Bootstrap konnte mit der CSS-Klasse “dropdown-submenu” ganz einfach das so genannte Submenu erstellt werden. Seit dem Release der Version 3.0 gibt es diese Klasse nicht mehr. Wir erklären, wie man auch in der aktuellen Version das Submenu nutzen kann.

Um die Navigation einer Webseite oder einer Anwendung übersichtlich und leicht nutzbar zu machen, bietet es sich oft an, mit so genannten Submenus zu arbeiten. Das bedeutet, dass man die Navigation strukturiert aufbauen kann. Sobald ein Besucher mit der Maus auf einen Link im Menü klickt oder mit der Maus darauf zeigt, öffnet sich ein Menü mit weiteren Links. Auch dieses Untermenü kann dann nochmals unterteilt werden.

In der Version 2 von Twitter Bootstrap war dies eine Standard-Funktion, welche in der aktuellen Version leider nicht mehr vorhanden ist. Warum diese entfernt wurde, weiß man nicht. In diesem Artikel werden wir zeigen, wie man auch in Version 3 nicht darauf verzichten muss und sich das Submenu selber nachbauen kann.

In diesem Beispiel werden wir ein vertikales Menü erstellen, dass die Untermenüs beim “Hovern”, also wenn der Mauszeiger über dem übergeordneten Links ist, nach rechts hin öffnet.

HTML für das Submenu

Wir erstellen nun den gesamten HTML-Code für das Submenu. Dabei werden wird 3 Hauptlinks erzeugen, wobei der Dritte ein Untermenü enthält.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
   style="display: block; position: static; margin-bottom: 5px; width: 180px;">
     <li>
          <a href="#">Link 1</a>
     </li>
     <li>
          <a href="#">Link 2</a>
     </li>
     <li class="dropdown-submenu"> <!-- Neue CSS-Klasse .dropdown-submenu -->
          <a href="#">Link 3</a>
          <ul class="dropdown-menu">
               <li class="dropdown-submenu">
                    <a href="#">Link 3.1</a>
                    <ul class="dropdown-menu">
                         <li>
                              <a href="#">3.1.1</a>
                         </li>
                         <li>
                              <a href="#">3.1.2</a>
                         </li>
                    </ul>
               </li>
          </ul>
     </li>
</ul>

Mit diesem HTML-Schnippsel haben wir jetzt das folgende Menü erzeugt:

  • Link 1
  • Link 2
  • Link 3
    • Link 3.1
      • Link 3.1.1
      • Link 3.1.2

Wie man gut sehen kann, wird lediglich eine neue CSS-Klasse benötigt, um so viele Ebenen zu erzeugen, wie man möchte.

Die CSS-Klasse .dropdown-submenu

Wie bereits oft erwähnt, ist es am besten die eigenen CSS-Styles in einer neuen Datei bzw. im Head-Bereich der betreffenden Datei zu definieren. Die Standard-CSS Dateien von Bootstrap sollten immer so bleiben wie sie sind. Hier nun die CSS-Styles, die hinzugefügt werden müssen um das Submenu zu erzeugen.

.dropdown-submenu {
     position: relative;
}

Hiermit wird sichergestellt, dass sich das DIV, dass das Submenu erzeugt sich fließend in das bereits bestehende Dokument einbringt.

.dropdown-submenu>.dropdown-menu {
     top:0;
     left:100%;
     margin-top:-6px;
     margin-left:-1px;
     -webkit-border-radius:0 6px 6px 6px;
     -moz-border-radius:0 6px 6px 6px;
     border-radius:0 6px 6px 6px;
}

Hier wird das DIV angepasst, welches als ausklappendes Menü benutzt wird.

.dropdown-submenu:hover>.dropdown-menu {
     display:block;
}

Wird über ein DIV mit der Klasse .dropdown-submenu gehovert, wird das jeweilige Dropdown-Menu angezeigt.

.dropdown-submenu>a:after {
     display:block;
     content:" ";
     float:right;
     width:0;
     height:0;
     border-color:transparent;
     border-style:solid;
     border-width:5px 0 5px 5px;
     border-left-color:#cccccc;
     margin-top:5px;
     margin-right:-10px;
}

.dropdown-submenu:hover>a:after {
     border-left-color: #fff;
}
.dropdown-submenu.pull-left {
     float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
     left:-100%;
     margin-left:10px;
     -webkit-border-radius:6px 0 6px 6px;
     -moz-border-radius:6px 0 6px 6px;
     border-radius:6px 0 6px 6px;
}

Das sich öffnende Submenu erhält hierdurch eine Ausrichtung nach Links.

Ihr habt eine eigene Lösung für die Submenus in Bootstrap 3? Wir freuen uns auf Kommentare!

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter FAQ's abgelegt am von .

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>