Navbar Megamenu vertical pour Bootstrap

Question

J'ai créé quelques menus verticaux dans le passé sur bootstrap en utilisant le menu déroulant. Pour en faire un mégamenu je devrais spécifier une largeur spécifique pour le sous-menu à flyout - une largeur définitive. C'est parce que la largeur verticale (parent) est trop petite. Le problème est que le contenu est dynamique, donc il serait bon d'avoir cette largeur flexible - en utilisant le%, car pour l'instant nous devons modéliser le contenu pour qu'il corresponde au menu. Si j'ajoute la classe col-lg-12 au sous-menu, elle ne représentera que 100% de sa largeur parente (la largeur verticale), je ne peux pas augmenter la largeur verticale car cela s'étendrait sur la page.

Je veux quelque chose comme ça - http://geedmo.github.io/yamm3/

Cependant, l'exemple de yamm3 est un GPS horizontal, donc le parent est déjà enjambant la page pour donner le sous-menu une vaste gamme d'ajouter ce col-lg- ?? il aime.

Est-ce que quelqu'un sait comment transformer l'exemple Yamm3 en une barre de navigation verticale tout en gardant la largeur du sous-menu flexible sans être limité par son parent?

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