title: Bootstrap Large Drawer Dropdowns
body: <p>I am attempting to emulate a neat menu system I saw on telerik's website using <code>bootstrap</code>. You can see the example of what I want to achieve here:</p>
  <h1><a href="http://demos.telerik.com/kendo-ui/web/panelbar/index.html" rel="nofollow noreferrer">telerik.com</a></h1>
  <p>Load this page and click on <strong>Products</strong>, and you will see a large &quot;drawer&quot; drop down. I love this effect.</p>
  <p>I want to do this with bootstrap, but I am finding it difficult. This is the typical code used to make a dropdown menu item in bootstrap...</p>
  <pre><code>&lt;li class=&quot;dropdown&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
          &lt;li class=&quot;dropdown-header&quot;&gt;Nav header&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  <p>So I am a bit confused about the approach to take here; How can I get the drop down area to span the entire screen? And then beyond that, how can I allow the user to click on parts of the dropped down layer without closing the actual menu?</p>
  <p>I would really appreciate any help here, I am new to bootstrap and this is for some reason frustrating me a lot.</p>
  <h1>UPDATE</h1>
  <p>I have managed to come close to my goal. I have an example here; <em><strong>The problem now is that I am not sure how to make the javascript edit on bootsnipp so I can share it with everyone.</strong></em></p>
  <h1><a href="http://bootsnipp.com/fullscreen/Vn23" rel="nofollow noreferrer">Bootstrap Large Drawer Sample</a></h1>
  <p>I made the following changes; please note, I am using bootstrap's <strong>less</strong> files, not the compiled css.</p>
  <h1>dropdowns.less</h1>
  <pre><code>// The dropdown menu (ul)
  .dropdown-menu {
      // no changes made to this class, but a new attachable class added below
          
          // added this companion class to give the effect I want
      &amp;.drawer {
          position: fixed;
          top: 50px;
          width: 100%;
      }
  }
  </code></pre>
  <p>Then I made the following edit to the bootstrap.js at around <code>line 488</code></p>
  <h1>bootstrap.js</h1>
  <pre><code>function clearMenus(e) {
      if (e) if ($(e.target).parents().hasClass('open')) return; // this is the added line
  
      // the rest was left alone
  }
  </code></pre>
  <p>Now then, with that added I can do the following;</p>
  <pre><code>&lt;li class=&quot;dropdown&quot;&gt;
      &lt;a id=&quot;drop1&quot; href=&quot;#&quot; role=&quot;button&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;div class=&quot;dropdown-menu drawer&quot; role=&quot;menu&quot; aria-labelledby=&quot;drop1&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;col-xs-12 col-sm-9&quot;&gt;
                  &lt;p class=&quot;pull-right visible-xs&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-xs&quot; data-toggle=&quot;offcanvas&quot;&gt;Toggle nav&lt;/button&gt;
                  &lt;/p&gt;
                  &lt;div class=&quot;jumbotron&quot;&gt;
                      &lt;h1&gt;Hello, world!&lt;/h1&gt;
                      &lt;p&gt;This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-6 col-sm-6 col-lg-4&quot;&gt;
                          &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
                          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;View details »&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
                      &lt;div class=&quot;col-6 col-sm-6 col-lg-4&quot;&gt;
                          &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
                          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;View details »&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
                      &lt;div class=&quot;col-6 col-sm-6 col-lg-4&quot;&gt;
                          &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
                          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;View details »&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
                      &lt;div class=&quot;col-6 col-sm-6 col-lg-4&quot;&gt;
                          &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
                          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;View details »&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
                      &lt;div class=&quot;col-6 col-sm-6 col-lg-4&quot;&gt;
                          &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
                          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;View details »&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
                      &lt;div class=&quot;col-6 col-sm-6 col-lg-4&quot;&gt;
                          &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. &lt;/p&gt;
                          &lt;p&gt;&lt;a class=&quot;btn btn-default&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;View details »&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!--/span--&gt;
                  &lt;/div&gt;&lt;!--/row--&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class=&quot;dropdown&quot;&gt;
      &lt;a href=&quot;#&quot; id=&quot;drop2&quot; role=&quot;button&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown 2 &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;drop2&quot;&gt;
          &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;http://twitter.com/fat&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;http://twitter.com/fat&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;http://twitter.com/fat&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;/li&gt;
          &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;http://twitter.com/fat&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>