diff options
| author | Mark Otto <[email protected]> | 2013-02-17 13:35:14 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-02-17 13:35:14 -0800 |
| commit | 6ccf588a8e08a9f99e6a56f9201a4348eb946cde (patch) | |
| tree | f5393f5a464907e562fcaf6232422b7d2b5f72a5 /docs/components.html | |
| parent | fdeb7f574385094da8b656e4cfef43de23c12f90 (diff) | |
| download | bootstrap-6ccf588a8e08a9f99e6a56f9201a4348eb946cde.tar.xz bootstrap-6ccf588a8e08a9f99e6a56f9201a4348eb946cde.zip | |
Restore submenu support
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 93 |
1 files changed, 91 insertions, 2 deletions
diff --git a/docs/components.html b/docs/components.html index bc5d7a2b3..b80eb6e71 100644 --- a/docs/components.html +++ b/docs/components.html @@ -53,7 +53,7 @@ title: Components <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p> <div class="bs-docs-example"> <div class="dropdown clearfix"> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> @@ -87,7 +87,7 @@ title: Components <p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p> <div class="bs-docs-example"> <div class="dropdown clearfix"> - <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Regular link</a></li> <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li> <li><a tabindex="-1" href="#">Another link</a></li> @@ -101,6 +101,95 @@ title: Components <li><a tabindex="-1" href="#">Another link</a></li> </ul> {% endhighlight %} + + <h3>Sub menus on dropdowns</h3> + <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p> + <div class="bs-docs-example bs-docs-example-submenu"> + + <div class="pull-left"> + <p class="muted">Default</p> + <div class="dropdown clearfix"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-submenu"> + <a tabindex="-1" href="#">More options</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + </ul> + </li> + </ul> + </div> + </div> + + <div class="pull-left"> + <p class="muted">Dropup</p> + <div class="dropup"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-submenu"> + <a tabindex="-1" href="#">More options</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + </ul> + </li> + </ul> + </div> + </div> + + <div class="pull-left"> + <p class="muted">Left submenu</p> + <div class="dropdown"> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-submenu pull-left"> + <a tabindex="-1" href="#">More options</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + </ul> + </li> + </ul> + </div> + </div> + + </div> +{% highlight html linenos %} +<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> + ... + <li class="dropdown-submenu pull-left"> + <a tabindex="-1" href="#">More options</a> + <ul class="dropdown-menu"> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + <li><a tabindex="-1" href="#">Second level link</a></li> + </ul> + </li> + ... +</ul> +{% endhighlight %} + </section> |