Hauptmenü Dropdown (Bootstrap Navbar)

Mit der Bootstrap Navbar können einstufige Dropdown-Menüs erstellt werden. Diese Menüs können Icons, Trennlinien, Titel und inaktive Links enthalten.

So wird im Hauptmenü ein Dropdown erzeugt:

  1. Bei URL wird nur ein #-Zeichen eingesetzt. Eine richtige URL wird ignoriert da der Link nur für das Anzeigen der Untermenüs (Dropdown) benutzt wird.
  2. Unter «Angezeigter Name» wird der gewünschte sichtbare Namen eingetragen.
  3. Per Drag & Drop werden die Untermenüs einem Link untergeordnet. Man erkennt die Untermenüs am optischen Einzug. Eine weitere Unterteilung (tiefere Verschachtelung) ist nicht möglich. Ein Untermenü innerhalb eines Untermenüs ist nicht möglich.

AlbinoMouse Dropdown Menu

Icon vor Link in Hauptmenü

So wird ein Icon des Iconsets Glyphicon Halflings vor einem Menülink platziert:

  1. Unter HTML-Attribut title das Wort glyphicon-iconname ein, wobei iconname dem Namen des gewünschten Icons entspricht. Auf der Bootstrap-Webseite findet ihr die zu Verfügung stehenden Icons und deren Namen.

AlbinoMouse Glyphicon Menu

Titel innerhalb Dropdown-Menü

Um ein Dropdown-Menü besser zu strukturieren, können Titel innerhalb des Menüs eingefügt werden. So wird ein Titel hinzugefügt:

  1. Bei URL wird nur ein #-Zeichen eingesetzt. Die Überschrift kann nicht verlinkt werden. Die Eingabe einer URL wird ignoriert.
  2. Unter HTML-Attribut title wird das Wort dropdown-header eingegeben.

AlbinoMouse Dropmenu Header

Trennlinie in Dropdown-Menü

So wird eine Trennlinie innerhalb des Dropdown-Menüs erzeugt:

  1. Bei URL wird nur ein #-Zeichen eingesetzt. Eine richtige URL wird ignoriert da dieser Eintrag durch eine Linie ersetzt wird.
  2. Unter HTML-Attribut title muss das Wort divider eingefügt werden.

AlbinoMouse Dropdown Divider

Inaktiver Link in Dropdown-Menü

Ein inaktiver Link wird grau dargestellt und lässt sich nicht anklicken. So wird ein solcher Link erstellt:

  1. In das Feld HTML-Attribut title wird das Wort disabled eingefügt.

AlbinoMouse Inaktiver Menulink