Dropdowns

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.

  1. <ul class=«dropdown-menu» role=«menu» aria-labelledby=«dropdownMenu»>
  2.  <li><a tabindex=«-1» href=«#»>Action</a></li>
  3.  <li><a tabindex=«-1» href=«#»>Another action</a></li>
  4.  <li><a tabindex=«-1» href=«#»>Something else here</a></li>
  5.  <li class=«divider»></li>
  6.  <li><a tabindex=«-1» href=«#»>Separated link</a></li>
  7. </ul>

Markup

Looking at just the dropdown menu, here’s the required HTML. You need to wrap the dropdown’s trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

  1. <div class=«dropdown»>
  2.  <!– Link or button to toggle dropdown –>
  3.  <ul class=«dropdown-menu» role=«menu» aria-labelledby=«dLabel»>
  4.  <li><a tabindex=«-1» href=«#»>Action</a></li>
  5.  <li><a tabindex=«-1» href=«#»>Another action</a></li>
  6.  <li><a tabindex=«-1» href=«#»>Something else here</a></li>
  7.  <li class=«divider»></li>
  8.  <li><a tabindex=«-1» href=«#»>Separated link</a></li>
  9.  </ul>
  10. </div>

Options

Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

  1. <ul class=«dropdown-menu pull-right» role=«menu» aria-labelledby=«dLabel»>
  2. </ul>

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

  1. <ul class=«dropdown-menu» role=«menu» aria-labelledby=«dLabel»>
  2.  <li class=«dropdown-submenu»>
  3.  <a tabindex=«-1» href=«#»>More options</a>
  4.  <ul class=«dropdown-menu»>
  5.  </ul>
  6.  </li>
  7. </ul>

Examples

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within tabs


Usage

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

  1. <div class=«dropdown»>
  2.  <a class=«dropdown-toggle» data-toggle=«dropdown» href=«#»>Dropdown trigger</a>
  3.  <ul class=«dropdown-menu» role=«menu» aria-labelledby=«dLabel»>
  4.  </ul>
  5. </div>

To keep URLs intact, use the data-target attribute instead of href="http://vigilanteinformativo.com/wordpress/?p=264".

  1. <div class=«dropdown»>
  2.  <a class=«dropdown-toggle» id=«dLabel» role=«button» data-toggle=«dropdown» data-target=«#» href=«/page.html»>
  3. Dropdown
  4.  <b class=«caret»></b>
  5.  </a>
  6.  <ul class=«dropdown-menu» role=«menu» aria-labelledby=«dLabel»>
  7.  </ul>
  8. </div>

Via JavaScript

Call the dropdowns via JavaScript:

  1. $(‘.dropdown-toggle’).dropdown()

Options

None

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.

Compartir:
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •