如何在bootstrap菜单栏中添加mega菜单

时间:2014-11-10 06:33:05

标签: html css twitter-bootstrap

我在菜单栏中使用了bootstrap。现在我想要我的菜单栏是大型菜单,但是没有得到如何使用bootstrap显示大型菜单。我想要下拉菜单是mega menu <ul class="dropdown-menu"> .. 这是HTML ..

         <div class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="about-us.html">About Us</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="blog-item.html">Blog Single</a></li>
                            <li><a href="pricing.html">Pricing</a></li>
                            <li><a href="404.html">404</a></li>
                            <li><a href="shortcodes.html">Shortcodes</a></li>
                        </ul>
                    </li>
                    <li><a href="blog.html">Blog</a></li> 
                    <li><a href="contact-us.html">Contact</a></li>                        
                </ul>
            </div>

1 个答案:

答案 0 :(得分:1)

使用 Yamm3 megamenu

扩展您的引导程序

这是指向小部件的链接

http://geedmo.github.io/yamm3/

并像这样使用

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li>
               <div class="yamm-content">
                  <div class="row"> 
                    ...
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

这是工作小提琴

http://jsfiddle.net/DTcHh/1698/