diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index b65eb64290..8a5477b16a 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -118,7 +118,6 @@ - title: Overview - title: Transitions - title: Modal - - title: Dropdowns - title: Scrollspy - title: Tabs - title: Tooltips diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 4c4ad61d0f..efb0f6309f 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -3,9 +3,9 @@ layout: page title: Dropdowns --- -Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin]({{ site.bsaeurl }}javascript/#dropdowns). +Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin. -### Example +## 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. @@ -28,7 +28,7 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another {% endexample %} -### Alignment +## 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. @@ -43,7 +43,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al {% endhighlight %} -### Menu headers +## Menu headers Add a header to label sections of actions in any dropdown menu. @@ -59,7 +59,7 @@ Add a header to label sections of actions in any dropdown menu. {% endexample %} -### Menu dividers +## Menu dividers Separate groups of related menu items with a divider. @@ -81,7 +81,7 @@ Separate groups of related menu items with a divider. {% endexample %} -### Disabled menu items +## Disabled menu items Add `.disabled` to a `
  • ` in the dropdown to disable the link. @@ -98,3 +98,104 @@ Add `.disabled` to a `
  • ` in the dropdown to disable the link.
    • {% 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 %} +
    + + +
    +{% endhighlight %} + +To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`. + +{% highlight html %} +
    + + Dropdown trigger + + + + +
    +{% endhighlight %} + +### Via JavaScript + +Call the dropdowns via JavaScript: + +{% highlight js %} +$('.dropdown-toggle').dropdown() +{% endhighlight %} + +
    +

    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.

    +
    + +### 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 TypeDescription
    show.bs.dropdownThis event fires immediately when the show instance method is called.
    shown.bs.dropdownThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
    hide.bs.dropdownThis event is fired immediately when the hide instance method has been called.
    hidden.bs.dropdownThis 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 %} diff --git a/docs/javascript/dropdowns.md b/docs/javascript/dropdowns.md deleted file mode 100644 index b1bda334a9..0000000000 --- a/docs/javascript/dropdowns.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -layout: page -title: Dropdowns ---- - -Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills. - -### Within navbars - -
    - -
    - -### Within pills - -
    - -
    - -## 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 %} -
    - - -
    -{% endhighlight %} - -To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`. - -{% highlight html %} -
    - - Dropdown trigger - - - - -
    -{% endhighlight %} - -### Via JavaScript - -Call the dropdowns via JavaScript: - -{% highlight js %} -$('.dropdown-toggle').dropdown() -{% endhighlight %} - -
    -

    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.

    -
    - -### 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 TypeDescription
    show.bs.dropdownThis event fires immediately when the show instance method is called.
    shown.bs.dropdownThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
    hide.bs.dropdownThis event is fired immediately when the hide instance method has been called.
    hidden.bs.dropdownThis 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 %}