Working on multiple levels for dropdowns

Gruntfile.js

@@ -371,6 +371,9 @@ module.exports = function (grunt) {
   // Default task.
   grunt.registerTask('default', ['dist', 'build-customizer']);
 
+  // Documentation task.
+  grunt.registerTask('docs', ['jekyll', 'dist-docs']);
+  
   // Version numbering task.
   // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
   // This can be overzealous, so its changes should always be manually reviewed!
@@ -386,5 +389,5 @@ module.exports = function (grunt) {
 
   // Task for updating the npm packages used by the Travis build.
   grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '_update-shrinkwrap']);
-  grunt.registerTask('_update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });
+  grunt.registerTask('∆update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });
 };

dist/css/jasny-bootstrap.css

@@ -1,12 +1,15 @@
 /*!
- * Jasny Bootstrap v3.1.0 (http://jasny.github.io/bootstrap)
+ * Jasny Bootstrap v3.1.1 (http://jasny.github.io/bootstrap)
  * Copyright 2012-2014 Arnold Daniels
  * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
  */
 
+.container-smooth {
+  max-width: 1170px;
+}
 @media (min-width: 1px) {
   .container-smooth {
-    max-width: 1170px;
+    width: auto;
   }
 }
 .btn-labeled {
@@ -57,6 +60,43 @@
   left: auto;
   border-radius: 0 2px 2px 0;
 }
+.dropdown-menu .dropdown {
+  position: relative;
+}
+.dropdown-menu .dropdown > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+          border-radius: 0 6px 6px 6px;
+
+  -webkit-border-radius: 0 6px 6px 6px;
+     -moz-border-radius: 0 6px 6px;
+}
+.dropdown-menu .dropdown > a:after {
+  display: block;
+  float: right;
+  width: 0;
+  height: 0;
+  margin-top: 5px;
+  margin-right: -10px;
+  content: " ";
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+}
+.dropdown-menu .dropdown.pull-left {
+  float: none;
+}
+.dropdown-menu .dropdown.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+          border-radius: 6px 0 6px 6px;
+
+  -webkit-border-radius: 6px 0 6px 6px;
+     -moz-border-radius: 6px 0 6px 6px;
+}
 .nav-tabs-bottom {
   border-top: 1px solid #ddd;
   border-bottom: 0;
@@ -151,12 +191,15 @@
   border-radius: 0;
 }
 .navmenu-fixed-left,
-.navbar-offcanvas {
+.navbar-offcanvas.navmenu-fixed-left {
+  right: auto;
   left: 0;
   border-width: 0 1px 0 0;
 }
-.navmenu-fixed-right {
+.navmenu-fixed-right,
+.navbar-offcanvas {
   right: 0;
+  left: auto;
   border-width: 0 0 0 1px;
 }
 .navmenu-nav {
@@ -521,7 +564,8 @@
   cursor: pointer;
   filter: alpha(opacity=0);
   opacity: 0;
-  transform: translate(-300px, 0) scale(4);
+  -webkit-transform: translate(-300px, 0) scale(4);
+          transform: translate(-300px, 0) scale(4);
 
   direction: ltr;
 }
@@ -565,13 +609,20 @@
 .form-control .fileinput-filename {
   vertical-align: bottom;
 }
+.fileinput.input-group {
+  display: table;
+}
+.fileinput-new.input-group .btn-file,
 .fileinput-new .input-group .btn-file {
   border-radius: 0 4px 4px 0;
 }
+.fileinput-new.input-group .btn-file.btn-xs,
 .fileinput-new .input-group .btn-file.btn-xs,
+.fileinput-new.input-group .btn-file.btn-sm,
 .fileinput-new .input-group .btn-file.btn-sm {
   border-radius: 0 3px 3px 0;
 }
+.fileinput-new.input-group .btn-file.btn-lg,
 .fileinput-new .input-group .btn-file.btn-lg {
   border-radius: 0 6px 6px 0;
 }

dist/js/jasny-bootstrap.js

@@ -1,5 +1,5 @@
 /*!
- * Jasny Bootstrap v3.1.0 (http://jasny.github.io/bootstrap)
+ * Jasny Bootstrap v3.1.1 (http://jasny.github.io/bootstrap)
  * Copyright 2012-2014 Arnold Daniels
  * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
  */
@@ -7,10 +7,8 @@
 if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScript requires jQuery') }
 
 /* ========================================================================
- * Bootstrap: offcanvas.js v3.1.0
+ * Bootstrap: offcanvas.js v3.1.1
  * http://jasny.github.io/bootstrap/javascript/#offcanvas
- * 
- * Based on Boostrap collapse.js by Twitter, Inc. 
  * ========================================================================
  * Copyright 2013-2014 Arnold Daniels
  *
@@ -36,6 +34,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
     this.$element = $(element)
     this.options  = $.extend({}, OffCanvas.DEFAULTS, options)
     this.state    = null
+    this.placement = null
     
     if (this.options.recalc) {
       this.calcClone()
@@ -50,13 +49,14 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
 
   OffCanvas.DEFAULTS = {
     toggle: true,
-    placement: 'left',
+    placement: 'auto',
     autohide: true,
-    recalc: true
+    recalc: true,
+    disableScrolling: true
   }
 
   OffCanvas.prototype.offset = function () {
-    switch (this.options.placement) {
+    switch (this.placement) {
       case 'left':
       case 'right':  return this.$element.outerWidth()
       case 'top':
@@ -65,26 +65,31 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
   }
   
   OffCanvas.prototype.calcPlacement = function () {
-    var horizontal = $(window).width() / this.$element.width(),
-        vertical = $(window).height() / this.$element.height()
-        
+    if (this.options.placement !== 'auto') {
+        this.placement = this.options.placement
+        return
+    }
+    
     if (!this.$element.hasClass('in')) {
       this.$element.css('visiblity', 'hidden !important').addClass('in')
     } 
     
+    var horizontal = $(window).width() / this.$element.width()
+    var vertical = $(window).height() / this.$element.height()
+        
     var element = this.$element
     function ab(a, b) {
       if (element.css(b) === 'auto') return a
       if (element.css(a) === 'auto') return b
       
-      var size_a = parseInt(element.css(a), 10),
-          size_b = parseInt(element.css(b), 10)
+      var size_a = parseInt(element.css(a), 10)
+      var size_b = parseInt(element.css(b), 10)
   
       return size_a > size_b ? b : a
     }
     
-    this.options.placement = horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
-    
+    this.placement = horizontal >= vertical ? ab('left', 'right') : ab('top', 'bottom')
+      
     if (this.$element.css('visibility') === 'hidden !important') {
       this.$element.removeClass('in').css('visiblity', '')
     }
@@ -114,12 +119,12 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
     // Use jQuery animation if CSS transitions aren't supported
     if (!$.support.transition) {
       var anim = {}
-      anim[this.options.placement] = "+=" + offset
+      anim[this.placement] = "+=" + offset
       return elements.animate(anim, 350, callback)
     }
 
-    var placement = this.options.placement,
-        opposite = this.opposite(placement)
+    var placement = this.placement
+    var opposite = this.opposite(placement)
     
     elements.each(function() {
       if ($(this).css(placement) !== 'auto')
@@ -136,7 +141,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
 
   OffCanvas.prototype.disableScrolling = function() {
     var bodyWidth = $('body').width()
-    var prop = 'padding-' + this.opposite(this.options.placement)
+    var prop = 'padding-' + this.opposite(this.placement)
 
     if ($('body').data('offcanvas-style') === undefined) $('body').data('offcanvas-style', $('body').attr('style'))
     
@@ -158,17 +163,22 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    if (this.options.placement === 'auto') this.calcPlacement()
-
-    this.state = 'sliding'
-
+    this.state = 'slide-in'
+    this.calcPlacement();
+    
     var elements = this.getCanvasElements()
-    var offset = this.offset(),
-        placement = this.options.placement,
-        opposite = this.opposite(placement)
+    var placement = this.placement
+    var opposite = this.opposite(placement)
+    var offset = this.offset()
+
+    if (elements.index(this.$element) !== -1) {
+      $(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
+      this.$element.css(placement, -1 * offset)
+      this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
+    }
 
     elements.addClass('canvas-sliding').each(function() {
-      $(this).data('offcanvas-style', $(this).attr('style') || '')
+      if ($(this).data('offcanvas-style') === undefined) $(this).data('offcanvas-style', $(this).attr('style') || '')
       if ($(this).css('position') === 'static') $(this).css('position', 'relative')
       if (($(this).css(placement) === 'auto' || $(this).css(placement) === '0px') &&
           ($(this).css(opposite) === 'auto' || $(this).css(opposite) === '0px')) {
@@ -176,11 +186,11 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
       }
     })
     
-    if (elements.index(this.$element) !== -1) this.$element.css(placement, -1 * offset)
-
-    this.disableScrolling()
+    if (this.options.disableScrolling) this.disableScrolling()
     
     var complete = function () {
+      if (this.state != 'slide-in') return
+      
       this.state = 'slid'
 
       elements.removeClass('canvas-sliding').addClass('canvas-slid')
@@ -200,18 +210,22 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    this.state = 'sliding'
+    this.state = 'slide-out'
 
     var elements = $('.canvas-slid')
+    var placement = this.placement
     var offset = -1 * this.offset()
 
     var complete = function () {
+      if (this.state != 'slide-out') return
+      
       this.state = null
-
+      this.placement = null
+      
       this.$element.removeClass('in')
       
       elements.removeClass('canvas-sliding')
-      elements.add('body').each(function() {
+      elements.add(this.$element).add('body').each(function() {
         $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
       })
 
@@ -226,7 +240,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
   }
 
   OffCanvas.prototype.toggle = function () {
-    if (this.state === 'sliding') return
+    if (this.state === 'slide-in' || this.state === 'slide-out') return
     this[this.state === 'slid' ? 'hide' : 'show']()
   }
 
@@ -238,17 +252,18 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
   }
 
   OffCanvas.prototype.recalc = function () {
-    if (this.state() !== 'slid' || this.$calcClone.css('display') === 'none') return
+    if (this.$calcClone.css('display') === 'none' || (this.state !== 'slid' && this.state !== 'slide-in')) return
     
-    var offset = -1 * this.offset()
+    this.state = null
+    this.placement = null
+    var elements = this.getCanvasElements()
     
-    var placement = this.options.placement
-    this.getCanvasElements().each(function() {
-      $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
-    }).removeClass('canvas-slid')
+    this.$element.removeClass('in')
     
-    $('body').css('overflow', '')
-    this.$element.css(placement, '').removeClass('in canvas-slid')
+    elements.removeClass('canvas-slid')
+    elements.add(this.$element).add('body').each(function() {
+      $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
+    })
   }
   
   OffCanvas.prototype.autohide = function (e) {
@@ -264,10 +279,10 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
     return this.each(function () {
       var $this   = $(this)
       var data    = $this.data('bs.offcanvas')
-      var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option == 'object' && option)
+      var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
 
       if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
-      if (typeof option == 'string') data[option]()
+      if (typeof option === 'string') data[option]()
     })
   }
 
@@ -750,7 +765,7 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
 }(window.jQuery);
 
 /* ===========================================================
- * Bootstrap: fileinput.js v3.1.0
+ * Bootstrap: fileinput.js v3.1.1
  * http://jasny.github.com/bootstrap/javascript/#fileinput
  * ===========================================================
  * Copyright 2012-2014 Arnold Daniels
@@ -812,7 +827,11 @@ if (typeof jQuery === 'undefined') { throw new Error('Jasny Bootstrap\'s JavaScr
 
   Fileinput.prototype.change = function(e) {
     if (e.target.files === undefined) e.target.files = e.target && e.target.value ? [ {name: e.target.value.replace(/^.+\\/, '')} ] : []
-    if (e.target.files.length === 0) return
+
+    if (e.target.files.length === 0) {
+      this.clear()
+      return
+    }
 
     this.$hidden.val('')
     this.$hidden.attr('name', '')

docs/components.html

@@ -7,6 +7,68 @@ base_url: "../"
 ---
 
 
+  <!-- Multi level dropdowns
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="navmenu">Multi level dropdowns</h1>
+    </div>
+    <p>Use multiple levels with <a href="http://getbootstrap.com/components/#dropdowns" target="_blank">Bootstrap's dropdown component</a> by adding a <code>.dropdown</code> a <code>.dropdown-menu</code>.</p>
+    
+    <div class="bs-example">
+      <div class="dropdown clearfix">
+        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+          Dropdown
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+          <li><a href="#">Some action</a></li>
+          <li><a href="#">Some other action</a></li>
+          <li class="divider"></li>
+          <li class="dropdown" data-toggle="dropdown">
+            <a tabindex="-1" href="#">More options</a>
+            <ul class="dropdown-menu">
+              <li><a tabindex="-1" href="#">Second level</a></li>
+              <li class="dropdown" data-toggle="dropdown">
+                <a href="#">Even more options</a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">3rd level</a></li>
+                  <li><a href="#">Yet another action</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+{% highlight html %}
+<div class="dropdown">
+  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+    Dropdown
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+    <li><a href="#">Some action</a></li>
+    <li><a href="#">Some other action</a></li>
+    <li class="divider"></li>
+    <li class="dropdown" data-toggle="dropdown">
+      <a tabindex="-1" href="#">More options</a>
+      <ul class="dropdown-menu">
+        <li><a tabindex="-1" href="#">Second level</a></li>
+        <li class="dropdown" data-toggle="dropdown">
+          <a href="#">Even more options</a>
+          <ul class="dropdown-menu">
+            <li><a href="#">3rd level</a></li>
+            <li><a href="#">Yet another action</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+{% endhighlight %}
+  </div>
+  
   <!-- Navmenu
   ================================================== -->
   <div class="bs-docs-section">

docs/examples/dropdown/index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
+
+    <title>Navmenu Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+
+    <!-- Just for debugging purposes. Don't actually copy this line! -->
+    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="dropdown clearfix">
+        <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+          Dropdown
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+          <li><a href="#">Some action</a></li>
+          <li><a href="#">Some other action</a></li>
+          <li class="divider"></li>
+          <li class="dropdown">
+            <a href="#" data-toggle="dropdown">More options</a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Second level</a></li>
+              <li class="dropdown">
+                <a href="#" data-toggle="dropdown">Even more options</a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">3rd level</a></li>
+                  <li><a href="#">Yet another action</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      
+      <div class="dropdown clearfix">
+        <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+          Dropdown 2
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+          <li><a href="#">Some action</a></li>
+          <li><a href="#">Some other action</a></li>
+          <li class="divider"></li>
+          <li class="dropdown">
+            <a href="#" data-toggle="dropdown">More options</a>
+            <ul class="dropdown-menu">
+              <li><a href="#">Second level</a></li>
+              <li class="dropdown">
+                <a href="#" data-toggle="dropdown">Even more options</a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">3rd level</a></li>
+                  <li><a href="#">Yet another action</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <!--script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script-->
+    <script src="../../../js/dropdown.js"></script>
+    <script src="../../dist/js/jasny-bootstrap.min.js"></script>
+    
+    <script type="text/javascript">
+        $(document).on('hidden.bs.dropdown', '.dropdown', function(e) {
+            $(this).parents('[toggle=dropdown]').addClass('open')
+        });
+    </script>
+  </body>
+</html>

docs/examples/navmenu/index.html

@@ -41,7 +41,7 @@
         <li><a href="#">Link</a></li>
         <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-          <ul class="dropdown-menu navmenu-nav">
+          <ul class="dropdown-menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
             <li><a href="#">Something else here</a></li>
@@ -49,6 +49,13 @@
             <li class="dropdown-header">Nav header</li>
             <li><a href="#">Separated link</a></li>
             <li><a href="#">One more separated link</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">2nd level dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Subaction</a></li>
+                <li><a href="#">Another subaction</a></li>
+              </ul>
+            </li>
           </ul>
         </li>
       </ul>
@@ -78,5 +85,11 @@
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
     <script src="../../dist/js/jasny-bootstrap.min.js"></script>
+    
+    <script type="text/javascript">
+        $('.dropdown').on('hidden', function(e) {
+            alert(1);
+        });
+    </script>
   </body>
 </html>

js/dropdown.js

@@ -0,0 +1,147 @@
+/* ========================================================================
+ * Bootstrap: dropdown.js v3.1.1
+ * http://getbootstrap.com/javascript/#dropdowns
+ * ========================================================================
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // DROPDOWN CLASS DEFINITION
+  // =========================
+
+  var backdrop = '.dropdown-backdrop'
+  var toggle   = '[data-toggle="dropdown"]'
+  var Dropdown = function (element) {
+    $(element).on('click.bs.dropdown', this.toggle)
+  }
+
+  Dropdown.prototype.toggle = function (e) {
+    var $this = $(this)
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    clearMenus()
+
+    if (!isActive) {
+      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
+        // if mobile we use a backdrop because click events don't delegate
+        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+      }
+
+      var relatedTarget = { relatedTarget: this }
+      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
+
+      if (e.isDefaultPrevented()) return
+
+      $parent
+        .toggleClass('open')
+        .trigger('shown.bs.dropdown', relatedTarget)
+
+      $this.trigger('focus')
+    }
+
+    return false
+  }
+
+  Dropdown.prototype.keydown = function (e) {
+    if (!/(38|40|27)/.test(e.keyCode)) return
+
+    var $this = $(this)
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    if (!isActive || (isActive && e.keyCode == 27)) {
+      if (e.which == 27) $parent.find(toggle).trigger('focus')
+      return $this.trigger('click')
+    }
+
+    var desc = ' li:not(.divider):visible a'
+    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
+
+    if (!$items.length) return
+
+    var index = $items.index($items.filter(':focus'))
+
+    if (e.keyCode == 38 && index > 0)                 index--                        // up
+    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
+    if (!~index)                                      index = 0
+
+    $items.eq(index).trigger('focus')
+  }
+
+  function clearMenus(e) {
+    $(backdrop).remove()
+    $(toggle).each(function () {
+      var $parent = getParent($(this))
+      var relatedTarget = { relatedTarget: this }
+      if (!$parent.hasClass('open')) return
+      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
+      if (e.isDefaultPrevented()) return
+      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+    })
+  }
+
+  function getParent($this) {
+    var selector = $this.attr('data-target')
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+    }
+
+    var $parent = selector && $(selector)
+
+    return $parent && $parent.length ? $parent : $this.parent()
+  }
+
+
+  // DROPDOWN PLUGIN DEFINITION
+  // ==========================
+
+  var old = $.fn.dropdown
+
+  $.fn.dropdown = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+      var data  = $this.data('bs.dropdown')
+
+      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.dropdown.Constructor = Dropdown
+
+
+  // DROPDOWN NO CONFLICT
+  // ====================
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
+  // APPLY TO STANDARD DROPDOWN ELEMENTS
+  // ===================================
+
+  $(document)
+    .on('click.bs.dropdown.data-api', clearMenus)
+    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+    .on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
+
+}(jQuery);

less/dropdown-submenu.less

@@ -0,0 +1,54 @@
+// Dropdown-submenu.less
+// Multi level dropdowns
+//
+// Based on work by Maks Surguy (https://twitter.com/msurguy)
+// http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
+// ------------------------------------------------
+
+.dropdown-menu .dropdown {
+    position: relative;
+
+    > .dropdown-menu {
+        top: 0;
+        left: 100%;
+        margin-top: -6px;
+        margin-left: -1px;
+        -webkit-border-radius: 0 6px 6px 6px;
+        -moz-border-radius: 0 6px 6px;
+        border-radius: 0 6px 6px 6px;
+    }
+
+    &.open > .dropdown-menu {
+        display: block;
+    }
+
+    > 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: #ccc;
+        margin-top: 5px;
+        margin-right: -10px;
+    }
+
+    &.open > a:after {
+        border-left-color: #fff;
+    }
+
+    &.pull-left {
+        float: none;
+        
+        > .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;
+        }
+    }
+}

less/jasny-bootstrap.less

@@ -9,6 +9,7 @@
 @import "button-labels.less";
 
 // Components
+@import "dropdown-submenu.less";
 @import "nav-tab-alignment.less";
 @import "navmenu.less";
 @import "alerts-fixed.less";