부트 스트랩 용 수직 메가 메뉴 Navbar

Question

나는 과거에 부트 스트랩에서 dropdown-menu compontent를 사용하여 몇 개의 수직 메뉴를 만들었습니다. 그것을 megamenu로 만들기 위해서, 나는 submenu가 특정 너비로 ​​넓어 지도록 지정해야 할 것입니다. 수직 너비 (부모)가 너무 작기 때문입니다.

콘텐츠가 동적이므로 문제가되는 것은 동적이므로이 너비를 유연하게 설정하는 것이 좋습니다. %를 사용하면 콘텐츠를 메뉴에 맞게 성형해야합니다. 하위 메뉴에 col-lg-12 클래스를 추가하면 상위 너비 (세로 너비)의 100 %에만 해당하므로 페이지 전체에 걸쳐 세로 너비를 늘릴 수는 없습니다.

나는 이런 식으로 뭔가 싶어 - http://geedmo.github.io/yamm3/

그러나, yamm3 예는 수평 탐색 따라서 부모가 이미 하위 메뉴에게 어떤 COL-LG- 추가 할 수있는 거대한 범위를 제공하는 페이지에서 확장되고,이다 ?? 좋아해.

누구나 Yamm3 예제를 수직 navbar로 바꾸는 방법을 알고 있지만 부모가 제한하지 않고 유연한 메가 서브 메뉴 너비를 유지하는 방법을 알고 있습니까?

Answer 1

HTML 


<nav class="navbar navbar-inverse"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Super_Shop</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav nav-pills nav-stacked vertical-nav"> 
     <li><a href="#"> Home <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">About</a></li> 
     <li class="dropdown menu-large"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Category <span class="glyphicon glyphicon-chevron-right"></span></a> 
      <ul class="dropdown-menu megamenu row"> 
       <li class="col-sm-3"> 
        <ul> 
      <li class="dropdown-header">Household</li> 
      <li><a href="#">Kitchen</a></li> 
      <li><a href="#">Toilleted</a></li> 
      <li><a href="#">Grocery</a></li> 
      <li><a href="#">Toys</a></li> 
      <li><a href="#">Vegetable</a></li> 
      </ul> 
       </li> 
      <li class="col-sm-3"> 
        <ul> 
      <li class="dropdown-header">Household</li> 
      <li><a href="#">Kitchen</a></li> 
      <li><a href="#">Toilleted</a></li> 
      <li><a href="#">Grocery</a></li> 
      <li><a href="#">Toys</a></li> 
      <li><a href="#">Vegetable</a></li> 
      </ul> 
       </li> 
      <li class="col-sm-3"> 
        <ul> 
      <li class="dropdown-header">Household</li> 
      <li><a href="#">Kitchen</a></li> 
      <li><a href="#">Toilleted</a></li> 
      <li><a href="#">Grocery</a></li> 
      <li><a href="#">Toys</a></li> 
      <li><a href="#">Vegetable</a></li> 
      </ul> 
       </li> 
      <li class="col-sm-3"> 
        <ul> 
      <li class="dropdown-header">Household</li> 
      <li><a href="#">Kitchen</a></li> 
      <li><a href="#">Toilleted</a></li> 
      <li><a href="#">Grocery</a></li> 
      <li><a href="#">Toys</a></li> 
      <li><a href="#">Vegetable</a></li> 
      </ul> 
       </li> 
      <li class="col-sm-3"> 
        <ul> 
      <li class="dropdown-header">Household</li> 
      <li><a href="#">Kitchen</a></li> 
      <li><a href="#">Toilleted</a></li> 
      <li><a href="#">Grocery</a></li> 
      <li><a href="#">Toys</a></li> 
      <li><a href="#">Vegetable</a></li> 
      </ul> 
       </li> 


      </ul> 
     </li> 
     <li><a href="#">Electronics</a></li> 
     <li><a href="#">Electrical</a></li> 
     <li><a href="#">Meat</a></li> 
     <li><a href="#">Fish</a></li> 
     <li><a href="#">Household</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Forum</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 



CSS 

.vertical-nav{ 

    position: absolute; 
    top: 80px; 
    background-color: #111; 
} 

.nav-pills > li > a { 
/* background-color: #333;*/ 
    border-radius: 0px; 
    padding: 10px 25px; 
    color: #eee; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
} 
.nav > li > a:hover, .nav > li > a:focus{ 
    background-color: #4CAF50; 
} 
.dropdown-menu{ 
    min-width: 600px; 
    top: 0; 
    left: 160px; 
    background-color: #111; 
} 

.dropdown-menu > li > a{ 
    color: #eee; 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 400; 
} 
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ 
    color: #eee; 
    background-color: #4CAF50; 
} 
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { 
    background-color: #111; 
    border-color: transparent; 
} 

.megamenu{ 
    position: absolute; 
    padding: 20px 0px; 
    width:100%; 
} 
.megamenu> li > ul { 
    padding: 0; 
    margin: 0; 
} 
.megamenu> li > ul > li { 
    list-style: none; 
    position: relative; 
} 
.megamenu> li > ul > li > a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.428571429; 
    color: #fff; 
    text-transform: uppercase; 
    font-size: 12px; 
    white-space: normal; 
    text-decoration: none; 
} 
.megamenu> li > ul > li > a:hover, 
.megamenu> li > ul > li > a:focus{ 
    color: #4CAF50; 
} 



.dropdown-header { 
    display: block; 
    padding: 3px 20px; 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    line-height: 1.42857143; 
    color: #4CAF50; 
    white-space: nowrap; 
}