---
title: "Bootstrap 3 Multi-Level Dropdown Menü"
url: "https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Bootstrap","Frage","TYPO3 6.x"]
created: "2013-10-09"
last_reply: "2018-02-06"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# Bootstrap 3 Multi-Level Dropdown Menü

TYPO3 › Menüs · 4 Antworten · gestartet 2013-10-09

## Eröffnungsbeitrag

**runde8** · 2013-10-09 · [Beitrag #1](https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue/1)

Hallo Leute, ich habe heute keine Frage sondern eher ein Tipp / Beispiel.
Ich hoffe ich kann damit jemanden weiter helfen :)

Vorspann: Es kam eher etwas ungeplant zustande. Ich war gerade dabei eine Plattform auf Basis von Bootstrap am gestalten. Als ich dann am Menü angelegt bin, ist mir aufgefallen, dass in der 3er Bootstrap kein Submenü existiert (Die Sinnigkeit lass ich jetzt mal unkommentiert im Raum stehen, ich kann es allerdings gut nachvollziehen). Naja.. da ich aber jetzt nicht wieder zurück auf Version 2 wollte (im Endeffekt wäre das wohl schneller gewesen) hab ich mich mal auf die Suche begeben und kam letztendlich auf eine sehr angenehme Lösung.

Voraussetzung ist das Framework "Bootstrap 3"

Das TS-Menü

```typoscript
# Main-Navigation
temp.mainNavi = HMENU
temp.mainNavi {
  1 = TMENU
  1 {
    expAll = 1
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title
 
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
 
    IFSUB = 1
    IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
    IFSUB.ATagTitle.field = abstract // description // title
    IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"
 
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title
    ACTIFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"
 
    wrap = <ul class="nav nav-pills">|</ul>
  }
  2 < .1
  2 {
     
    IFSUB = 1
    IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li>
    IFSUB.ATagParams = class="dropdown-toogle" data-toogle="dropdown"
 
    ACTIFSUB = 1
    ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu active">|</li>
    ACTIFSUB.ATagTitle.field = abstract // description // title

 
    wrap = <ul class="dropdown-menu">|</ul>
  }
 
  3 < .2
  3 {

 
    ACT = 1
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACT.ATagTitle.field = abstract // description // title
 
    

  wrap = <ul class="dropdown-menu">|</ul>
 
  }
}
```

Nun müsst ihr noch eure CSS Datei um folgendes erweitern damit die Multi-Level Funktion greift (Stammt aus der Bootstrap Version 2)

```css
.dropdown-submenu{
position:relative;
}
.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;
}
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
.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:#ffffff;
}
.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;
}
```

Als letztes muss nur noch der Hover:Effekt aktiviert werden! Also noch etwas für die CSS-Datei

```css
ul.nav > li.dropdown:hover > ul.dropdown-menu {
    display: block;
    margin-top:0px
}
```

Das wäre es erstmal! Vlt. hilft es ja :)

## Antworten

### [#2](https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue/2) · BlackPanther · 2014-09-12

Super, danke. Hat mir echt geholfen!

### [#3](https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue/3) · Unbekannter Benutzer · 2014-09-19

Mir hat es auch super geholfen. Vor allem, da ich auch Bootstrap verwende ;).
Danke!!!!!!

### [#4](https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue/4) · 100mark · 2015-12-21

Hallo,
klappt soweit super. Aber das Dropdown funktioniert leider nicht.
Hab das Typoscript eingebunden plus CSS.
Schnallt er aber leider nicht.
Woran kann das liegen?
Gruß
Dirk

### [#5](https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue/5) · runde8 · 2018-02-06

Könnte leider viele Möglichkeiten haben... sorry für die späte Antwort

---

Quelle: „Bootstrap 3 Multi-Level Dropdown Menü“, typo3.net, https://www.typo3.net/d/116269-bootstrap-3-multi-level-dropdown-menue
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.