Bootstrap Large Drawer Dropdowns

Question

我試圖仿效我在telerik的網站上使用bootstrap看到的整潔菜單系統。你可以看到什麼，我想在這裏實現的例子：

telerik.com

加載這個頁面，點擊產品，你會看到一個巨大的「抽屜」下拉菜單。我喜歡這個效果。

我想用bootstrap做到這一點，但我發現它很困難。這是用來在引導一個下拉菜單項的典型代碼...

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
    <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> 
     <li class="divider"></li> 
     <li class="dropdown-header">Nav header</li> 
     <li><a href="#">Separated link</a></li> 
     <li><a href="#">One more separated link</a></li> 
    </ul> 
</li> 

所以我有點困惑在這裏採取的方法;我怎樣才能讓下拉區域跨越整個屏幕？然後，除此之外，如何讓用戶在不關閉實際菜單的情況下單擊下拉圖層的某些部分？

我真的很感謝這裏的任何幫助，我是bootstrap的新手，這是由於某種原因令我非常沮喪的。

UPDATE

我設法接近了我的目標。我在這裏有一個例子。 現在的問題是，我不知道如何在bootsnipp上進行JavaScript編輯，以便我可以與大家分享。

Bootstrap Large Drawer Sample

我提出了以下的變化;請注意，我使用bootstrap的減去文件，而不是編譯後的css。

dropdowns.less

// 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 
    &.drawer { 
     position: fixed; 
     top: 50px; 
     width: 100%; 
    } 
} 

然後我在周圍line 488

bootstrap.js

function clearMenus(e) { 
    if (e) if ($(e.target).parents().hasClass('open')) return; // this is the added line 

    // the rest was left alone 
} 

現在做了以下編輯到bootstrap.js然後，與加我可以請執行下列操作;

<li class="dropdown"> 
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
    <div class="dropdown-menu drawer" role="menu" aria-labelledby="drop1"> 
     <div class="container"> 
      <div class="col-xs-12 col-sm-9"> 
       <p class="pull-right visible-xs"> 
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> 
       </p> 
       <div class="jumbotron"> 
        <h1>Hello, world!</h1> 
        <p>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.</p> 
       </div> 
       <div class="row"> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
       </div><!--/row--> 
      </div> 
     </div> 
    </div> 
</li> 
<li class="dropdown"> 
    <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> 
    </ul> 
</li> 

Answer 1

更新

我要發佈這在bootsnipp，但我想不出該怎麼辦在那裏正確的JavaScript部分。如果有人想告訴我如何，我會獎勵他們的積分。

這個問題的答案需要兩個非常小的編輯引導系統。

我做了以下更改;請注意，我使用bootstrap的減去文件，而不是編譯後的css。這也可以對本地進行。CSS通過添加類.dropdown-menu.drawer

dropdowns.less

// 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 
    &.drawer { 
     position: fixed; 
     top: 50px; 
     width: 100%; 
    } 
} 

然後關鍵是要確保點擊抽屜本身，或內容吧，不關上抽屜。這是困難的部分。爲了解決這個問題，我編輯了一行bootstrap.js。

從488行bootstrap.js開始，或者在那裏，您想對function clearMenus(e)進行以下更改。

bootstrap.js

function clearMenus(e) { 
    if (e) if ($(e.target).parents().hasClass('open')) return; // this is the added line 

    // the rest was left alone 
} 

然後，我可以貼上類drawer我想要砸下來的元素。

<li class="dropdown"> 
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
    <div class="dropdown-menu drawer" role="menu" aria-labelledby="drop1"> 
     <div class="container"> 
      <div class="col-xs-12 col-sm-9"> 
       <p class="pull-right visible-xs"> 
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> 
       </p> 
       <div class="jumbotron"> 
        <h1>Hello, world!</h1> 
        <p>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.</p> 
       </div> 
       <div class="row"> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
        <div class="col-6 col-sm-6 col-lg-4"> 
         <h2>Heading</h2> 
         <p>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. </p> 
         <p><a class="btn btn-default" href="#" role="button">View details »</a></p> 
        </div><!--/span--> 
       </div><!--/row--> 
      </div> 
     </div> 
    </div> 
</li> 
<li class="dropdown"> 
    <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li> 
    </ul> 
</li> 

Answer 2

我想這就是你正在尋找一個例子：

http://bootsnipp.com/snippets/featured/nav-account-manager