466d36e541
- Replaces manual use of .bd-callout with {% callout [type] %}
- Rearranged some callouts for proximity to others
- Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming
6.1 KiB
| layout | title |
|---|---|
| page | Dropdowns |
Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin.
Example
Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
{% example html %}
Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
{% callout warning %}
May require additional positioning
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
{% endcallout %}
{% highlight html %}
-
...
Menu headers
Add a header to label sections of actions in any dropdown menu.
{% example html %}
- Dropdown header
- Action
- Another action
Menu dividers
Separate groups of related menu items with a divider.
{% example html %}
{% endexample %}Disabled menu items
Add .disabled to a <li> in the dropdown to disable the link.
{% example html %}
{% endexample %}Usage
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.
Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
Via data attributes
Add data-toggle="dropdown" to a link or button to toggle a dropdown.
{% highlight html %}
-
...
To keep URLs intact with link buttons, use the data-target attribute instead of href="#".
{% highlight html %}
-
...
Via JavaScript
Call the dropdowns via JavaScript:
{% highlight js %} $('.dropdown-toggle').dropdown() {% endhighlight %}
{% callout info %}
data-toggle="dropdown" still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
{% endcallout %}
Options
None.
Methods
$().dropdown('toggle')
Toggles the dropdown menu of a given navbar or tabbed navigation.
Events
All dropdown events are fired at the .dropdown-menu's parent element and have a relatedTarget property, whose value is the toggling anchor element.
| Event Type | Description |
|---|---|
| show.bs.dropdown | This event fires immediately when the show instance method is called. |
| shown.bs.dropdown | This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). |
| hide.bs.dropdown | This event is fired immediately when the hide instance method has been called. |
| hidden.bs.dropdown | This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). |
{% highlight js %} $('#myDropdown').on('show.bs.dropdown', function () { // do something… }) {% endhighlight %}