mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-17 19:06:40 +02:00
remove submenus. for more context: http://www.youtube.com/watch?v=ggWyUEuGcWY&feature=youtu.be&t=48s
This commit is contained in:
Mark Otto
@@ -4,7 +4,6 @@
|
|||||||
<li><a href="#dropdowns-example">Example</a></li>
|
<li><a href="#dropdowns-example">Example</a></li>
|
||||||
<li><a href="#dropdowns-alignment">Alignment options</a></li>
|
<li><a href="#dropdowns-alignment">Alignment options</a></li>
|
||||||
<li><a href="#dropdowns-disabled">Disabled menu items</a></li>
|
<li><a href="#dropdowns-disabled">Disabled menu items</a></li>
|
||||||
<li><a href="#dropdowns-submenus">Submenus</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
56
docs/assets/css/bootstrap.css
vendored
56
docs/assets/css/bootstrap.css
vendored
@@ -2210,9 +2210,7 @@ input[type="button"].btn-block {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu > li > a:hover,
|
.dropdown-menu > li > a:hover,
|
||||||
.dropdown-menu > li > a:focus,
|
.dropdown-menu > li > a:focus {
|
||||||
.dropdown-submenu:hover > a,
|
|
||||||
.dropdown-submenu:focus > a {
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #357ebd;
|
background-color: #357ebd;
|
||||||
@@ -2290,58 +2288,6 @@ input[type="button"].btn-block {
|
|||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-submenu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-submenu > .dropdown-menu {
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
margin-top: -6px;
|
|
||||||
margin-left: -1px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-submenu:hover > .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropup .dropdown-submenu > .dropdown-menu {
|
|
||||||
top: auto;
|
|
||||||
bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: -2px;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-submenu.pull-left {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-submenu.pull-left > .dropdown-menu {
|
|
||||||
left: -100%;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .dropdown-menu .nav-header {
|
.dropdown .dropdown-menu .nav-header {
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
|||||||
@@ -66,95 +66,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
|
|||||||
<li><a tabindex="-1" href="#">Another link</a></li>
|
<li><a tabindex="-1" href="#">Another link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3 id="dropdowns-submenus">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-example bs-example-submenu">
|
|
||||||
|
|
||||||
<div class="pull-left">
|
|
||||||
<p class="text-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="text-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="text-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 %}
|
|
||||||
<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 %}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -63,9 +63,7 @@
|
|||||||
// Hover/Focus state
|
// Hover/Focus 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,
|
|
||||||
.dropdown-submenu:focus > a {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: @dropdown-link-hover-color;
|
color: @dropdown-link-hover-color;
|
||||||
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
|
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
|
||||||
@@ -153,64 +151,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sub menus
|
|
||||||
// ---------------------------
|
|
||||||
.dropdown-submenu {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
// Default dropdowns
|
|
||||||
.dropdown-submenu > .dropdown-menu {
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
margin-top: -6px;
|
|
||||||
margin-left: -1px;
|
|
||||||
border-top-left-radius: 0; // Nuke the closest corner as appropriate
|
|
||||||
}
|
|
||||||
.dropdown-submenu:hover > .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dropups
|
|
||||||
.dropup .dropdown-submenu > .dropdown-menu {
|
|
||||||
top: auto;
|
|
||||||
bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: -2px;
|
|
||||||
border-bottom-left-radius: 0; // Nuke the closest corner as appropriate
|
|
||||||
}
|
|
||||||
|
|
||||||
// Caret to indicate there is a submenu
|
|
||||||
.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(@dropdown-bg, 20%);
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-right: -10px;
|
|
||||||
}
|
|
||||||
.dropdown-submenu:hover > a:after {
|
|
||||||
border-left-color: @dropdown-link-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Left aligned submenus
|
|
||||||
.dropdown-submenu.pull-left {
|
|
||||||
// Undo the float
|
|
||||||
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
|
|
||||||
float: none;
|
|
||||||
|
|
||||||
// Positioning the submenu
|
|
||||||
> .dropdown-menu {
|
|
||||||
left: -100%;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-top-right-radius: 0; // Remove the rounded corner here
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tweak nav headers
|
// Tweak nav headers
|
||||||
// ---------------------------
|
// ---------------------------
|
||||||
// Increase padding from 15px to 20px on sides
|
// Increase padding from 15px to 20px on sides
|
||||||
|
|||||||
Reference in New Issue
Block a user