부트 스트랩 큰 서랍 드롭 다운

Question

bootstrap을 사용하여 telerik의 웹 사이트에서 본 깔끔한 메뉴 시스템을 에뮬레이션하려고합니다. 내가 여기서 무엇을 달성하고자하는의 예를 볼 수 있습니다

telerik.com

로드 페이지 및 제품을 클릭하면 큰 "서랍"드롭 다운 표시됩니다. 나는이 효과를 좋아한다.

부트 스트랩으로 이것을하고 싶지만, 어렵다고 느낍니다. 이

<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> 

그래서 내가 여기에 취할 수있는 방법에 대해 조금 혼란 스러워요 ... 부트 스트랩의 드롭 다운 메뉴 항목을 만들기 위해 사용되는 전형적인 코드; 드롭 다운 영역을 전체 화면으로 확장하려면 어떻게해야합니까? 그런 다음 어떻게하면 사용자가 실제 메뉴를 닫지 않고 드롭 다운 된 레이어의 일부를 클릭하도록 허용 할 수 있습니까?

정말 도움이 되었으면합니다. 저는 부트 스트랩을 처음 접했습니다. 이것은 나에게 많은 좌절감을 안겨주고 있습니다.

업데이트

나는 내 목표에 가까워졌습니다. 여기에 예제가 있습니다. 이제 문제는 내가 모든 사람과 공유 할 수 있도록 bootsnipp에서 javascript를 편집하는 방법을 잘 모르겠다는 것입니다. Bootstrap Large Drawer Sample

나는 다음과 같이 변경했다; 부트 스트랩의 이하 파일을 이하로 사용하고 있습니다. 컴파일 된 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

업데이트

,하지만 난 어떻게 알아낼 수 없습니다 실제 자바 스크립트 부분 제대로. 누구나 나를 보여주고 싶다면, 나는 그들에게 점수를 줄 것이다.

이 질문에 대한 대답은 부트 스트랩 시스템에 대해 두 가지 매우 작은 편집이 필요했습니다.

다음과 같이 변경했습니다. 부트 스트랩의 이하 파일을 이하로 사용하고 있습니다. 컴파일 된 CSS가 아닙니다. 이것은 네이티브에게도 할 수 있습니다.클래스 .dropdown-menu.drawer

에게

// 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%; 
    } 
} 

dropdowns.less

를 추가하여 CSS는 그런 트릭은 그 안에 서랍 자체, 또는 내용을 클릭하면, 서랍을 닫지 않습니다 있는지 확인하는 것입니다. 이것은 어려운 부분이었습니다. 이 문제를 해결하기 위해 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

나는 이것이 당신이 찾고있는 무엇의 예입니다 생각 : 나는 bootsnipp에이를 게시 할

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