Adding dropup support to split buttons and navbar

* Documents the hidden .dropdown-menu.bottom-up option (to be used for dropups) * Extends the .bottom-up class to carets and all relevant caret styles * Adds .dropdown-menu.pull-right class for right-aligned dropdowns and dropups * Adds examples and some information to the "split dropdown" and "navbar" sections of the Docs
amente · Jan 29, 2012 · 918a17a · 918a17a
1 parent 7bf2767
commit 918a17a
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 15 deletions.
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -1517,6 +1517,11 @@ table .span12 {
   filter: alpha(opacity=30);
   content: "\2193";
 }
+.caret.bottom-up {
+  border-top: 0;
+  border-bottom: 4px solid #000000;
+  content: "\2191";
+}
 .dropdown .caret {
   margin-top: 8px;
   margin-left: 2px;
@@ -1558,7 +1563,11 @@ table .span12 {
 .dropdown-menu.bottom-up {
   top: auto;
   bottom: 100%;
-  margin-bottom: 2px;
+  margin-bottom: 1px;
+}
+.dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
 }
 .dropdown-menu .divider {
   height: 1px;
@@ -1992,6 +2001,7 @@ button.btn.small, input[type="submit"].btn.small {
 .info .caret,
 .success .caret {
   border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
   opacity: 0.75;
   filter: alpha(opacity=75);
 }
@@ -2217,6 +2227,7 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
   border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
   opacity: 1;
   filter: alpha(opacity=100);
 }
@@ -2554,8 +2565,22 @@ button.btn.small, input[type="submit"].btn.small {
   top: -6px;
   left: 10px;
 }
+.navbar .dropdown-menu.bottom-up:before {
+  border-top: 7px solid #ccc;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  border-bottom: 0;
+  bottom: -7px;
+  top: auto;
+}
+.navbar .dropdown-menu.bottom-up:after {
+  border-top: 6px solid #ffffff;
+  border-bottom: 0;
+  bottom: -6px;
+  top: auto;
+}
 .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
   border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
 }
 .navbar .nav .active .caret {
   opacity: 1;
@@ -2567,15 +2592,15 @@ button.btn.small, input[type="submit"].btn.small {
 .navbar .nav .active > .dropdown-toggle:hover {
   color: #ffffff;
 }
-.navbar .nav.pull-right .dropdown-menu {
+.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
   left: auto;
   right: 0;
 }
-.navbar .nav.pull-right .dropdown-menu:before {
+.navbar .nav.pull-right .dropdown-menu:before, .navbar .nav .dropdown-menu.pull-right:before {
   left: auto;
   right: 12px;
 }
-.navbar .nav.pull-right .dropdown-menu:after {
+.navbar .nav.pull-right .dropdown-menu:after, .navbar .nav .dropdown-menu.pull-right:after {
   left: auto;
   right: 13px;
 }

diff --git a/docs/components.html b/docs/components.html
@@ -175,11 +175,11 @@ <h4 class="muted">Heads up</h4>
 ================================================== -->
 <section id="buttonDropdowns">
   <div class="page-header">
-    <h1>Buttons dropdowns <small>Built on button groups to provide contextual dropdown menus</small></h1>
+    <h1>Button dropdowns and dropups <small>Built on button groups to provide contextual dropdown menus</small></h1>
   </div>
   <div class="row">
     <div class="span4">
-      <h3>Split button dropdowns</h3>
+      <h3>Split button dropdowns and dropups</h3>
       <p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
       <div class="btn-toolbar" style="margin-top: 18px;">
         <div class="btn-group">
@@ -239,6 +239,42 @@ <h3>Split button dropdowns</h3>
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn" href="#">Right</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div>
+      <p>Additionally, you can create dropup style split buttons. Simply add a second class, <code>.bottom-up</code>, after <code>.caret</code> and <code>.dropdown-menu</code> classes. Optionally, it's recommended to add a third <code>.pull-right</code> class to provide a better experience.</p>
+      <div class="btn-toolbar" style="margin-top: 18px;">
+        <div class="btn-group">
+          <a class="btn" href="#">Dropup</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></a>
+          <ul class="dropdown-menu bottom-up">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn primary" href="#">Right Dropup</a>
+          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div>
     </div>
     <div class="span8">
@@ -255,6 +291,9 @@ <h3>Example markup</h3>
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
+      <div class="alert alert-info">
+              <strong>Heads up!</strong> In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu.
+      </div>
     </div>
   </div>
 </section>
@@ -684,13 +723,33 @@ <h2>Static navbar example</h2>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropup <b class="caret bottom-up"></b></a>
+              <ul class="dropdown-menu bottom-up pull-right">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
           </ul>
           <form class="navbar-search pull-left" action="">
             <input type="text" class="search-query span2" placeholder="Search">
           </form>
           <ul class="nav pull-right">
             <li><a href="#">Link</a></li>
             <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropup <b class="caret bottom-up"></b></a>
+              <ul class="dropdown-menu bottom-up pull-right">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li><a href="#">Separated link</a></li>
+              </ul>
+            </li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu">
@@ -783,8 +842,8 @@ <h3>Nav links</h3>
   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-      <h3>Adding dropdowns</h3>
-      <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
+      <h3>Adding dropdowns and dropups</h3>
+      <p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="dropdown"&gt;

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
@@ -103,11 +103,11 @@
 ================================================== -->
 <section id="buttonDropdowns">
   <div class="page-header">
-    <h1>{{_i}}Buttons dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1>
+    <h1>{{_i}}Button dropdowns and dropups{{/i}} <small>{{_i}}Built on button groups to provide contextual dropdown menus{{/i}}</small></h1>
   </div>
   <div class="row">
     <div class="span4">
-      <h3>{{_i}}Split button dropdowns{{/i}}</h3>
+      <h3>{{_i}}Split button dropdowns and dropups{{/i}}</h3>
       <p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
       <div class="btn-toolbar" style="margin-top: 18px;">
         <div class="btn-group">
@@ -167,6 +167,42 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn" href="#">{{_i}}Right{{/i}}</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div>
+      <p>{{_i}}Additionally, you can create dropup style split buttons. Simply add a second class, <code>.bottom-up</code>, after <code>.caret</code> and <code>.dropdown-menu</code> classes. Optionally, it's recommended to add a third <code>.pull-right</code> class to provide a better experience.{{/i}}</p>
+      <div class="btn-toolbar" style="margin-top: 18px;">
+        <div class="btn-group">
+          <a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></a>
+          <ul class="dropdown-menu bottom-up">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn primary" href="#">{{_i}}Right Dropup{{/i}}</a>
+          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret bottom-up"></span></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div>
     </div>
     <div class="span8">
@@ -183,6 +219,9 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
+      <div class="alert alert-info">
++       <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu.{{_i}}
++     </div>
     </div>
   </div>
 </section>
@@ -612,13 +651,33 @@
                 <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
               </ul>
             </li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
+              <ul class="dropdown-menu bottom-up pull-right">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
           </ul>
           <form class="navbar-search pull-left" action="">
             <input type="text" class="search-query span2" placeholder="Search">
           </form>
           <ul class="nav pull-right">
             <li><a href="#">{{_i}}Link{{/i}}</a></li>
             <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
+              <ul class="dropdown-menu bottom-up pull-right">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
               <ul class="dropdown-menu">
@@ -711,8 +770,8 @@
   &lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-      <h3>{{_i}}Adding dropdowns{{/i}}</h3>
-      <p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
+      <h3>{{_i}}Adding dropdowns and dropups{{/i}}</h3>
+      <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="dropdown"&gt;

diff --git a/less/button-groups.less b/less/button-groups.less
@@ -136,6 +136,7 @@
 .success {
   .caret {
     border-top-color: @white;
+    border-bottom-color: @white;
     .opacity(75);
   }
 }

diff --git a/less/dropdowns.less b/less/dropdowns.less
@@ -29,6 +29,14 @@
   .opacity(30);
   content: "\2193";
 }
+
+  // Allow for caret to show up (goes well with dropup-menus)
+  &.bottom-up {
+    border-top: 0;
+    border-bottom: 4px solid @black;
+    content: "\2191";
+  }
+
 .dropdown .caret {
   margin-top: 8px;
   margin-left: 2px;
@@ -68,7 +76,13 @@
   &.bottom-up {
     top: auto;
     bottom: 100%;
-    margin-bottom: 2px;
+    margin-bottom: 1px;
+  }
+
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
   }
 
   // Dividers (basically an hr) within the dropdown

diff --git a/less/navbar.less b/less/navbar.less
@@ -253,11 +253,27 @@
     left: 10px;
   }
 }
-
+// Menu position and menu caret support for dropups via extra bottom-up class
+.navbar .dropdown-menu.bottom-up {
+  &:before {
+    border-top: 7px solid #ccc;
+    border-top-color: rgba(0, 0, 0, 0.2);
+    border-bottom: 0;
+    bottom: -7px;
+    top: auto;
+  }
+  &:after {
+    border-top: 6px solid #ffffff;
+    border-bottom: 0;
+    bottom: -6px;
+    top: auto;
+  }
+}
 // Dropdown toggle caret
 .navbar .nav .dropdown-toggle .caret,
 .navbar .nav .open.dropdown .caret {
   border-top-color: @white;
+  border-bottom-color: @white;
 }
 .navbar .nav .active .caret {
   .opacity(100);
@@ -276,7 +292,7 @@
 }
 
 // Right aligned menus need alt position
-.navbar .nav.pull-right .dropdown-menu {
+.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
   left: auto;
   right: 0;
   &:before {

diff --git a/less/navs.less b/less/navs.less
@@ -227,6 +227,7 @@
 .nav .open.active .caret,
 .nav .open a:hover .caret {
   border-top-color: @white;
+  border-bottom-color: @white;
   .opacity(100);
 }