aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/assets/css/bootstrap.css20
-rw-r--r--docs/components.html55
-rw-r--r--docs/templates/pages/components.mustache55
-rw-r--r--less/dropdowns.less19
4 files changed, 123 insertions, 26 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f24baf581..c59a7fd97 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2763,7 +2763,7 @@ table .span24 {
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
- margin-top: -5px;
+ margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
@@ -2774,6 +2774,24 @@ table .span24 {
display: block;
}
+.dropdown-submenu > a:after {
+ display: block;
+ float: right;
+ width: 0;
+ height: 0;
+ margin-top: 5px;
+ margin-right: -10px;
+ border-color: transparent;
+ border-left-color: #cccccc;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ content: " ";
+}
+
+.dropdown-submenu:hover > a:after {
+ border-left-color: #ffffff;
+}
+
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
diff --git a/docs/components.html b/docs/components.html
index c36eec940..719a9e874 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -122,16 +122,7 @@
<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="#">Separated link</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>
+ <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
@@ -162,10 +153,50 @@
</pre>
<h2>Options</h2>
- <p>...</p>
+ <p>Align menus to the right and add include additional levels of dropdowns.</p>
<h3>Aligning the menus</h3>
- <p>...</p>
+ <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+<pre class="prettyprint linenums">
+&lt;ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"&gt;
+ ...
+&lt;/ul&gt;
+</pre>
+
+ <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;">
+ <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>
+<pre class="prettyprint linenums">
+&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
+ ...
+ &lt;li class="dropdown-submenu"&gt;
+ &lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
+ &lt;ul class="dropdown-menu"&gt;
+ ...
+ &lt;/ul&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
</section>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index e9022ee12..7ac31e219 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -51,16 +51,7 @@
<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}}Separated link{{/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>
+ <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div>
</div>{{! /example }}
@@ -91,10 +82,50 @@
</pre>
<h2>{{_i}}Options{{/i}}</h2>
- <p>{{_i}}...{{/i}}</p>
+ <p>{{_i}}Align menus to the right and add include additional levels of dropdowns.{{/i}}</p>
<h3>{{_i}}Aligning the menus{{/i}}</h3>
- <p>{{_i}}...{{/i}}</p>
+ <p>{{_i}}Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"&gt;
+ ...
+&lt;/ul&gt;
+</pre>
+
+ <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;">
+ <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>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
+ ...
+ &lt;li class="dropdown-submenu"&gt;
+ &lt;a tabindex="-1" href="#"&gt;{{_i}}More options{{/i}}&lt;/a&gt;
+ &lt;ul class="dropdown-menu"&gt;
+ ...
+ &lt;/ul&gt;
+ &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
</section>
diff --git a/less/dropdowns.less b/less/dropdowns.less
index a36c3a416..fb85ca57a 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -176,7 +176,7 @@
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
- margin-top: -5px;
+ margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
@@ -186,6 +186,23 @@
display: block;
}
+.dropdown-submenu > a:after {
+ display: block;
+ content: " ";
+ float: right;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: darken(@dropdownBackground, 20%);
+ margin-top: 5px;
+ margin-right: -10px;
+}
+.dropdown-submenu:hover > a:after {
+ border-left-color: @dropdownLinkColorHover;
+}
+
// Tweak nav headers
// -----------------
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 14:56:35 +0000