ブートストラップ大きなコンテンツメニューを作成するには？

Question

私はブートストラップには新しく、リンク/画像のような多くのコンテンツを持つ他のサブカテゴリを含むカテゴリがあるはずのメガメニューを作りたいと思っています。

私は、ブートストラップナビのドキュメントに基づいて、このようなことをどうやってやろうとしているのか分かりません。

私はこのようなサイトの例を持っています。hereをチェックしてください。ナビゲーションメニューを参照してください。私が欲しいのは、このメニューに似た機能です。

誰もこのようなことをどのように達成できるか説明できますか？たとえば、どのような方法やコンセプトでも構いません。

小さなデモ/ jsfiddleはすばらしいでしょう。

Answer 1

ブートストラップを使用している場合は、小さな画面でも折り畳み可能な応答性のあるナビゲーションを作成するのに役立ちますが、独自のメガメニューはありません。もしあなたが分かっていれば、基本HTML、CSS、あるいはjQueryを使ってブートストラップナビをメガメニューに拡張することができます。必要に応じてul li（順序付けされていないリスト）を多数配置し、ul li上にホバー規則を配置するだけです。

最終的にはコードを訪問して分析できるcodepenリンクがここで乱雑になります。この良い例

https://codepen.io/Omi236/pen/vZPgjz

jQuery(document).on('click', '.mega-dropdown', function(e) { 
 
    e.stopPropagation() 
 
})

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 
 
body { 
 
    font-family: 'Open Sans', 'sans-serif'; 
 
    background: #f0f0f0; 
 
    background: url(https://pcbx.us/bfjb.jpg); 
 
} 
 

 
h1, 
 
.h1 { 
 
    font-size: 36px; 
 
    text-align: center; 
 
    font-size: 5em; 
 
    color: #404041; 
 
} 
 

 
.navbar-nav>li>.dropdown-menu { 
 
    margin-top: 20px; 
 
    border-top-left-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
} 
 

 
.navbar-default .navbar-nav>li>a { 
 
    width: 200px; 
 
    font-weight: bold; 
 
} 
 

 
.mega-dropdown { 
 
    position: static !important; 
 
    width: 100%; 
 
} 
 

 
.mega-dropdown-menu { 
 
    padding: 20px 0px; 
 
    width: 100%; 
 
    box-shadow: none; 
 
    -webkit-box-shadow: none; 
 
} 
 

 
.mega-dropdown-menu:before { 
 
    content: ""; 
 
    border-bottom: 15px solid #fff; 
 
    border-right: 17px solid transparent; 
 
    border-left: 17px solid transparent; 
 
    position: absolute; 
 
    top: -15px; 
 
    left: 285px; 
 
    z-index: 10; 
 
} 
 

 
.mega-dropdown-menu:after { 
 
    content: ""; 
 
    border-bottom: 17px solid #ccc; 
 
    border-right: 19px solid transparent; 
 
    border-left: 19px solid transparent; 
 
    position: absolute; 
 
    top: -17px; 
 
    left: 283px; 
 
    z-index: 8; 
 
} 
 

 
.mega-dropdown-menu>li>ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.mega-dropdown-menu>li>ul>li { 
 
    list-style: none; 
 
} 
 

 
.mega-dropdown-menu>li>ul>li>a { 
 
    display: block; 
 
    padding: 3px 20px; 
 
    clear: both; 
 
    font-weight: normal; 
 
    line-height: 1.428571429; 
 
    color: #999; 
 
    white-space: normal; 
 
} 
 

 
.mega-dropdown-menu>li ul>li>a:hover, 
 
.mega-dropdown-menu>li ul>li>a:focus { 
 
    text-decoration: none; 
 
    color: #444; 
 
    background-color: #f5f5f5; 
 
} 
 

 
.mega-dropdown-menu .dropdown-header { 
 
    color: #428bca; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
} 
 

 
.mega-dropdown-menu form { 
 
    margin: 3px 20px; 
 
} 
 

 
.mega-dropdown-menu .form-group { 
 
    margin-bottom: 3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> 
 
     <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="#">MegaMenu</a> 
 
    </div> 
 

 

 
    <div class="collapse navbar-collapse js-navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown mega-dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> 
 

 
      <ul class="dropdown-menu mega-dropdown-menu row"> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">New in Stores</li> 
 
       <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
        <div class="carousel-inner"> 
 
        <div class="item active"> 
 
         <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> 
 
         <h4><small>Summer dress floral prints</small></h4> 
 
         <button class="btn btn-primary" type="button">49,99 €</button> 
 
         <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
 
        </div> 
 
        <!-- End Item --> 
 
        <div class="item"> 
 
         <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> 
 
         <h4><small>Gold sandals with shiny touch</small></h4> 
 
         <button class="btn btn-primary" type="button">9,99 €</button> 
 
         <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
 
        </div> 
 
        <!-- End Item --> 
 
        <div class="item"> 
 
         <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> 
 
         <h4><small>Denin jacket stamped</small></h4> 
 
         <button class="btn btn-primary" type="button">49,99 €</button> 
 
         <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> 
 
        </div> 
 
        <!-- End Item --> 
 
        </div> 
 
        <!-- End Carousel Inner --> 
 
       </div> 
 
       <!-- /.carousel --> 
 
       <li class="divider"></li> 
 
       <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Dresses</li> 
 
       <li><a href="#">Unique Features</a></li> 
 
       <li><a href="#">Image Responsive</a></li> 
 
       <li><a href="#">Auto Carousel</a></li> 
 
       <li><a href="#">Newsletter Form</a></li> 
 
       <li><a href="#">Four columns</a></li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown-header">Tops</li> 
 
       <li><a href="#">Good Typography</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Jackets</li> 
 
       <li><a href="#">Easy to customize</a></li> 
 
       <li><a href="#">Glyphicons</a></li> 
 
       <li><a href="#">Pull Right Elements</a></li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown-header">Pants</li> 
 
       <li><a href="#">Coloured Headers</a></li> 
 
       <li><a href="#">Primary Buttons & Default</a></li> 
 
       <li><a href="#">Calls to action</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="col-sm-3"> 
 
       <ul> 
 
       <li class="dropdown-header">Accessories</li> 
 
       <li><a href="#">Default Navbar</a></li> 
 
       <li><a href="#">Lovely Fonts</a></li> 
 
       <li><a href="#">Responsive Dropdown </a></li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown-header">Newsletter</li> 
 
       <form class="form" role="form"> 
 
        <div class="form-group"> 
 
        <label class="sr-only" for="email">Email address</label> 
 
        <input type="email" class="form-control" id="email" placeholder="Enter email"> 
 
        </div> 
 
        <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
 
       </form> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 

 
     </li> 
 
     </ul> 
 

 
    </div> 
 
    <!-- /.nav-collapse --> 
 
    </nav> 
 
</div> 
 

 
<h1 class="c-text"> Bootstrap Mega Menu </h1>