如何创建像 Avast 网站这样的引导导航栏答案

【问题标题】：how can create bootstrap navbar like Avast site如何创建像 Avast 网站这样的引导导航栏
【发布时间】：2017-05-15 08:49:23
【问题描述】：

我想要这样的导航栏，我该怎么做

这是 li 下拉菜单

                            <li class="dropdown>

                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="javascript:void(0)">
                                    test
                                <span class="caret"></span></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 role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                  </ul>
                            </li>

我希望它的宽度为 100% 的下拉菜单类

【问题讨论】：

标签： twitter-bootstrap navbar responsive

【解决方案1】：

尝试此代码并根据您的需要进行自定义， -HTML

<div class="container">
<nav class="navbar navbar-inverse">
<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="#">My Store</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">Men <span class="caret"></span></a>              
            <ul class="dropdown-menu mega-dropdown-menu">
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Men Collection</li>                            
                        <div id="menCollection" class="carousel slide" data-ride="carousel">
                          <div class="carousel-inner">
                            <div class="item active">
                                <a href="#"><img src="http://placehold.it/254x150/ff3546/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/3498db/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 -->
                          <!-- Controls -->
                          <a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </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">Features</li>
                        <li><a href="#">Auto Carousel</a></li>
                        <li><a href="#">Carousel Control</a></li>
                        <li><a href="#">Left & Right Navigation</a></li>
                        <li><a href="#">Four Columns Grid</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Fonts</li>
                        <li><a href="#">Glyphicon</a></li>
                        <li><a href="#">Google Fonts</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Plus</li>
                        <li><a href="#">Navbar Inverse</a></li>
                        <li><a href="#">Pull Right Elements</a></li>
                        <li><a href="#">Coloured Headers</a></li>                            
                        <li><a href="#">Primary Buttons & Default</a></li>                          
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Much more</li>
                        <li><a href="#">Easy to Customize</a></li>
                        <li><a href="#">Calls to action</a></li>
                        <li><a href="#">Custom Fonts</a></li>
                        <li><a href="#">Slide down on Hover</a></li>                         
                    </ul>
                </li>
            </ul>               
        </li>
        <li class="dropdown mega-dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <span class="caret"></span></a>                
            <ul class="dropdown-menu mega-dropdown-menu">
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Features</li>
                        <li><a href="#">Auto Carousel</a></li>
                        <li><a href="#">Carousel Control</a></li>
                        <li><a href="#">Left & Right Navigation</a></li>
                        <li><a href="#">Four Columns Grid</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Fonts</li>
                        <li><a href="#">Glyphicon</a></li>
                        <li><a href="#">Google Fonts</a></li>
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Plus</li>
                        <li><a href="#">Navbar Inverse</a></li>
                        <li><a href="#">Pull Right Elements</a></li>
                        <li><a href="#">Coloured Headers</a></li>                            
                        <li><a href="#">Primary Buttons & Default</a></li>                          
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Much more</li>
                        <li><a href="#">Easy to Customize</a></li>
                        <li><a href="#">Calls to action</a></li>
                        <li><a href="#">Custom Fonts</a></li>
                        <li><a href="#">Slide down on Hover</a></li>                         
                    </ul>
                </li>
                <li class="col-sm-3">
                    <ul>
                        <li class="dropdown-header">Women Collection</li>                            
                        <div id="womenCollection" 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/ff3546/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 -->
                          <!-- Controls -->
                          <a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </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>
            </ul>               
        </li>
        <li><a href="#">Store locator</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My account <span class="caret"></span></a>
      <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li>
      </ul>
    </li>
    <li><a href="#">My cart (0) items</a></li>
  </ul>
</div><!-- /.nav-collapse -->

-JS

$(document).ready(function(){
$(".dropdown").hover(            
    function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
        $(this).toggleClass('open');        
    },
    function() {
        $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
        $(this).toggleClass('open');       
    }
); });

-CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);body {font-family: 'Open Sans', 'sans-serif';}.mega-dropdown {position: static !important;}.mega-dropdown-menu {padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;}.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;color: #222;
padding: 3px 5px;}.mega-dropdown-menu>li ul>li>a:hover,.mega-dropdown-menu>li ul>li>a:focus {text-decoration: none;}.mega-dropdown-menu .dropdown-header {font-size: 18px;color: #ff3546;padding: 5px 60px 5px 5px;line-height: 30px;}.carousel-control {width: 30px;height: 30px;
top: -35px;}.left.carousel-control {
right: 30px;left: inherit;}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {
font-size: 12px;    background-color: #fff;    line-height: 30px;    text-shadow: none;    color: #333;    border: 1px solid #ddd;}

【讨论】：

不幸的是:(此代码无法与我一起成功运行，但谢谢亲爱的，我在您的代码中找到了巨型导航栏，我搜索它并找到了最好的东西谢谢bootsnipp.com/snippets/featured/bootstrap-mega-menu
很高兴它在某种程度上有所帮助。 :) 但这对我有用，所以我没有再次检查代码。