+
+

Overview

+

Added the following improvements:

+
    +
  • Support sub-menus
    • +
  • Support for radio and checkboxes
    • +
  • Positioning of menus
    • +
  • Bullet for menus
    • +
+

To start using the improvements you need to include a modified dropdown-enhancement.js and dropdown-enhancement.css file.

+

Important dropdown-enhancement.css only have enhancement rules and depends entirely on the original style of Bootstrap dropdowns.

+

For more information, see the examples below.

+

Javascript

+

dropdown-enhancement.js does not depend on the original dropdown.js. It adds support for sub-menu, radio and checkboxes, and centering menus that can not be is achieved by means of css.

+

Has been improved close menu function. It only closes menus opened by the module, also considers the submenus. Function clearMenus (close all menus) been preserved and made ​​public. Available as $.fn.dropdown.clearMenus.

+

Dropdown Events are not available at the moment.

+

Important You do not need to include the original Bootstrap dropdown.js

+ +

+ If you like my work, please buy me a beer. +

+ + + + +
+ +

+
+ +
+

Sub-menus

+

Enable sub-menu functionality.

+ +

Add class .dropdown-submenu to items with sub-menu.

+

Within a navbar

+ +
+ + +
+
+ + +
+
+ +
+

Radio & Checkboxes

+

Usage

+

The only thing that is required for proper operation, is to comply with certain markup conditions. Input + elements should be located outside of the label and label must have a correct for attribute.

+
+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ + + + +
    +
  • + + +
    • +
  • + + +
    • +
+
+
+
+
+
+ 
+            
+<div class="btn-group">
+  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Checked option <span class="caret"></span></button>
+    <ul class="dropdown-menu">
+      <li><input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
+      <!-- Other items -->
+    </ul>
+</div>
+            
+
+
+

No Close

+

Do not close the menu on click on radio add class .noclose.

+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ 
+            
+<div class="btn-group">
+  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Checked option <span class="caret"></span></button>
+    <ul class="dropdown-menu noclose">
+      <li><input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
+      <!-- Other items -->
+    </ul>
+</div>
+            
+
+
+

Custom placeholder

+

Use html5 attribute data-placeholder to specify a default label. Uncheck checkbox in example bellow + to see effect.

+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ 
+            
+<div class="btn-group">
+  <button data-toggle="dropdown" class="btn dropdown-toggle"  data-placeholder="Please select">Checked option <span class="caret"></span></button>
+    <ul class="dropdown-menu">
+      <li><input type="checkbox" id="ID"><label for="ID" name="NAME" value="VALUE">Label</label></li>
+      <!-- Other items -->
+    </ul>
+</div>
+            
+
+
+

Label placement

+

Using html5 attribute data-label-placement you can specify the container for label. See examples + below.

+
+
+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+ + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ 
+            
+<div class="btn-group">
+  <button class="btn btn-primary" data-label-placement>Checked option</button>
+  <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
+    <ul class="dropdown-menu">
+      <li><input type="checkbox" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
+      <!-- Other items -->
+    </ul>
+</div>
+            
+
+
+

Disable label replacement

+

Set data-placeholder="false" to disable label replacement. See examples below.

+
+
+ + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ 
+            
+<div class="btn-group">
+  <button class="btn btn-primary">Checked option</button>
+  <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" data-placeholder="false"><span class="caret"></span></button>
+    <ul class="dropdown-menu">
+      <li><input type="checkbox" id="ID" name="NAME" value="VALUE"><label for="ID">Label</label></li>
+      <!-- Other items -->
+    </ul>
+</div>
+            
+
+
+

Custom label text

+

Add class .data-label to desired element.

+
+
+ + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ 
+            
+<div class="btn-group">
+  <button data-toggle="dropdown" class="btn dropdown-toggle">Checked option <span class="caret"></span></button>
+    <ul class="dropdown-menu">
+      <li><input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"><span class="data-label">Label</span> Other text</label></li>
+      <!-- Other items -->
+    </ul>
+</div>
+            
+
+
+
+ +
+
+

Positioning

+
+

Usage

+

Use extra classes for advanced positioning of dropdown menus. Classes: .pull-top, .pull-right

+
+
+
+
+
+ + +
+
+ +
.pull-right
+
+
+ + + +
+
+ +
.pull-top
+
+
+ + +
+
+ +
.pull-top.pull-right
+
+
+ + + +
+
+ +
+ +
+

Centered

+

This classes use a small piece of javascript for correct positioning. Classes: .pull-center, .pull-middle

+
+
+
.pull-center
+
+
+ + +
+
+ +
.pull-center.pull-top
+
+
+ + +
+
+ +
.pull-middle
+
+
+ + +
+
+ +
.pull-middle.pull-right"
+
+
+ + +
+
+ +
.pull-middle.pull-center"
+
+
+ + +
+
+ +
+ +
+
+ +
+
+

Bullet

+
+

Usage

+

To add bullet just add class .bullet to the dropdown menu, .pull-right

+
+
+
.bullet
+
+
+ + +
+
+ +
.bullet.pull-right
+
+
+ + + +
+
+ +
.bullet.pull-top
+
+
+ + +
+
+ +
.bullet.pull-top.pull-right
+
+
+ + + +
+
+ +
+ +
+

Centered

+
+
+
.bullet.pull-center
+
+
+ + +
+
+ +
.bullet.pull-center.pull-top
+
+
+ + +
+
+ +
.bullet.pull-middle
+
+
+ + +
+
+ +
.bullet.pull-middle.pull-right"
+
+
+ + +
+
+ +
.bullet Ignored
+ .pull-middle.pull-center"
+
+
+ + +
+
+ +
+ +
+
+