mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-26 14:54:27 +02:00
improve dropdown submenu docs; add docs for left submenu; remove all dupe css for left submenu
This commit is contained in:
Mark Otto
12
docs/assets/css/bootstrap.css
vendored
12
docs/assets/css/bootstrap.css
vendored
@@ -2929,6 +2929,18 @@ table [class*=span],
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
|
||||
.dropdown-submenu.pull-left {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.dropdown-submenu.pull-left > .dropdown-menu {
|
||||
left: -100%;
|
||||
margin-left: 10px;
|
||||
-webkit-border-radius: 6px 0 6px 6px;
|
||||
-moz-border-radius: 6px 0 6px 6px;
|
||||
border-radius: 6px 0 6px 6px;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu .nav-header {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
|
||||
@@ -165,25 +165,11 @@
|
||||
|
||||
<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">
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<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 class="dropup" style="float: left; margin-left: 20px;">
|
||||
<div class="bs-docs-example" style="min-height: 180px;">
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Default</p>
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">Action</a></li>
|
||||
<li><a tabindex="-1" href="#">Another action</a></li>
|
||||
@@ -202,6 +188,51 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<p class="muted">Dropup</p>
|
||||
<div class="dropup">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<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" style="margin-left: 20px;">
|
||||
<p class="muted">Left submenu</p>
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
|
||||
71
docs/templates/pages/components.mustache
vendored
71
docs/templates/pages/components.mustache
vendored
@@ -94,25 +94,11 @@
|
||||
|
||||
<h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}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.{{/i}}</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;">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="dropup" style="float: left; margin-left: 20px;">
|
||||
<div class="bs-docs-example" style="min-height: 180px;">
|
||||
|
||||
<div class="pull-left">
|
||||
<p class="muted">Default</p>
|
||||
<div class="dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
@@ -130,7 +116,52 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<p class="muted">Dropup</p>
|
||||
<div class="dropup">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
<div class="pull-left" style="margin-left: 20px;">
|
||||
<p class="muted">Left submenu</p>
|
||||
<div class="dropdown">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown-submenu pull-left">
|
||||
<a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
<li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>{{! /.pull-left }}
|
||||
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
|
||||
Reference in New Issue
Block a user