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"