mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 20:02:34 +02:00
Code Issues Releases Wiki Activity

add basic support for sub menus in dropdown menus

Browse Source
This commit is contained in:
Mark Otto
2012-07-27 10:06:54 -07:00
parent 1e9b450619
commit 9d5c431223
4 changed files with 74 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/assets/css/bootstrap.css vendored
View File

@@ -2687,7 +2687,8 @@ table .span24 {
} }
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus { .dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #0088cc; background-color: #0088cc;
@@ -2728,11 +2729,6 @@ table .span24 {
background-color: transparent; background-color: transparent;
} }
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
}
.open { .open {
*z-index: 1000; *z-index: 1000;
} }
@@ -2760,6 +2756,29 @@ table .span24 {
margin-bottom: 1px; margin-bottom: 1px;
} }
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -5px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
}
.typeahead { .typeahead {
margin-top: 2px; margin-top: 2px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;

19
docs/components.html
View File

@@ -122,7 +122,16 @@
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></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>
</ul> </ul>
</div> </div>
</div> </div>
@@ -136,10 +145,6 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<hr class="bs-docs-separator">
<h2>Markup</h2> <h2>Markup</h2>
<p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p> <p>Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.</p>
@@ -156,10 +161,6 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<hr class="bs-docs-separator">
<h2>Options</h2> <h2>Options</h2>
<p>...</p> <p>...</p>

19
docs/templates/pages/components.mustache vendored
View File

@@ -51,7 +51,16 @@
<li><a tabindex="-1" href="#">{{_i}}Another 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><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></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>
</ul> </ul>
</div> </div>
</div>{{! /example }} </div>{{! /example }}
@@ -65,10 +74,6 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Markup{{/i}}</h2> <h2>{{_i}}Markup{{/i}}</h2>
<p>{{_i}}Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.{{/i}}</p> <p>{{_i}}Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then just create the menu.{{/i}}</p>
@@ -85,10 +90,6 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<hr class="bs-docs-separator">
<h2>{{_i}}Options{{/i}}</h2> <h2>{{_i}}Options{{/i}}</h2>
<p>{{_i}}...{{/i}}</p> <p>{{_i}}...{{/i}}</p>

38
less/dropdowns.less
View File

@@ -96,7 +96,8 @@
// Hover state // Hover state
// ----------- // -----------
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus { .dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
text-decoration: none; text-decoration: none;
color: @dropdownLinkColorHover; color: @dropdownLinkColorHover;
background-color: @dropdownLinkBackgroundHover; background-color: @dropdownLinkBackgroundHover;
@@ -128,14 +129,6 @@
cursor: default; cursor: default;
} }
// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
}
// Open state for the dropdown // Open state for the dropdown
// --------------------------- // ---------------------------
.open { .open {
@@ -175,6 +168,33 @@
} }
} }
// Sub menus
// ---------------------------
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -5px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
}
// Typeahead // Typeahead
// --------- // ---------
.typeahead { .typeahead {