Familie Kohl Castrop-Rauxel dropdown

Dropdown Menüs Button Farben & Größen Fortschrittsbalken Seitennummerierung Text hervorheben

Dropdown-Menü nach unten

Hier mal ein Dropdown Menü was nach unten auf geht.

Dropdown-Menü nach unten

Hier mal eine Live Ansicht!

Code:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown Menü <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a data-cke-saved-href="#" href="#">Link 1</a></li> <li><a data-cke-saved-href="#" href="#">Link 2</a></li> <li><a data-cke-saved-href="#" href="#">Link 3</a></li> <li><a data-cke-saved-href="#" href="#">Link 4</a></li> </ul> </div>

Dropup-Menü nach oben

Hier mal eine Live Ansicht!

Code:

<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropup Menü <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a data-cke-saved-href="#" href="#">Link 1</a></li> <li><a data-cke-saved-href="#" href="#">Link 2</a></li> <li><a data-cke-saved-href="#" href="#">Link </a></li> <li><a data-cke-saved-href="#" href="#">Link </a></li> </ul> </div>

Dropdown Menü Divider

Fügen Sie einen Teiler hinzu, um eine Reihe von Links in einem Dropdown-Menü zu trennen.

Dropdown Menü Divider1

Hier mal eine Live Ansicht!

Code:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown Menü <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a data-cke-saved-href="#" href="#">Link 1</a></li> <li><a data-cke-saved-href="#" href="#">Link 2</a></li> <li><a data-cke-saved-href="#" href="#">Link 3</a></li> <li role="separator" class="divider"></li> <li><a data-cke-saved-href="#" href="#">Link 4</a></li> </ul> </div> Dropdow

Dropdown Menü Headers

Fügen Sie einen Beschriftungsabschnitten von Aktionen in einem Dropdown-Menü als Kopfzeile hinzu.

Dropdown Menü Headers1

Hier mal eine Live Ansicht!

Code:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown Menü <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> <li><a data-cke-saved-href="#" href="#">Link 1</a></li> <li><a data-cke-saved-href="#" href="#">Link 2</a></li> <li><a data-cke-saved-href="#" href="#">Link 3</a></li> <li class="dropdown-header">Abschnitt 2</li> <li><a data-cke-saved-href="#" href="#">Link 4</a></li> </ul> </div>