Question

我使用bootstrap 3并设计大型菜单导航。

HTML：

<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>
                            <ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection 2<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>

CSS：

body {
    font-family:'Open Sans', 'sans-serif';
    background:#f0f0f0;
}
.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;
}

现在，我有两个<ul>导航菜单。在我看到一个sub menu。我的意思是如果我点击收集或收集2我看到一个子菜单。

我该如何解决这个问题？

问题：click on collection and collection 2 u see one submenu bottom of collection not for collection 2.

enter image description here

注意：要更改箭头的位置。对于两个下拉列表，向上箭头表示相同的位置。这个位置应该像
一样改变

首次下拉：http://i.imgur.com/Vklu5c1.png
第二次下拉：http://i.imgur.com/97Lhca3.png

JSFIDDLE DEMO

Answer 1

出现此问题是因为css三角形相对于整体navbar定位。由于此元素的位置不会改变，因此三角形会重新定位。

理想的解决方案是将三角形嵌入当前所选项目中。要实现此目的，请删除

.mega-dropdown-menu:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: relative;
    top: -15px;
    left: 150px;
    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;
}

并替换为

.open .dropdown-toggle:after {
    border-bottom: 15px solid #fff;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    content: "";
    left: 163px;
    position: absolute;
    bottom: -21px;
    z-index: 1500;
}
.open .dropdown-toggle span:after {
    border-bottom: 17px solid #ccc;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    content: "";
    left: -10px;
    position: absolute;
    bottom: -41px;
    z-index: 8;
}

这会将三角形附加到文本和向下箭头，并将其相对于这些元素定位。

小提琴 - http://jsfiddle.net/7eHFd/4/

更新：在上面，三角形在确定尺寸时保持不变。要解决此问题，请使用媒体查询包含上述代码。

@media (min-width: 768px) {
}

小提琴 - http://jsfiddle.net/7eHFd/5/

Answer 2

解决方案： JS Fiddle Solution Link

信息：

参考this链接，您无法调整psudo class css。样式或内容由：after或：before创建，不属于DOM，因此无法选择或修改。

此外，此解决方案适用于：

响应式设计
菜单箭头将位于菜单项的中心。

<强>的问题：

Psudo class CSS：

.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 -downdown-menu＆＃39; class需要重置psudo边框样式。

解决方案： JS Fiddle Solution Link

因此，要添加一个新元素，其具有与以下相同的样式：

CSS更改：

.show{
    display: block;
}
.arrow1, .arrow2 {
    position: absolute;
    z-index: 99999;
    display: none;
}
.open .arrow1, .open .arrow2 {
    display: block;
}
.arrow1 span:after, .arrow2 span:after {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: 6px;
    left: 2px;
}
.arrow1 span:before, .arrow2 span:before {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: 4px;
}
.mega-dropdown-menu:after, .mega-dropdown-menu:before{border: none;}

JS改变：

$(".nav > li.mega-dropdown").eq( 0 ).append("<p class='arrow1 arrOw'><span></span></p>");
$(".nav > li.mega-dropdown").eq( 1 ).append("<p class='arrow2 arrOw'><span></span></p>");

$(".nav > li.mega-dropdown").eq( 0 ).click(function () {
    //x = $(".mega-dropdown.open").position();
    x = $(this).position();
    aa = x.left+75;
    $(this).find(".arrow1").css("left", aa);
});
$(".nav > li.mega-dropdown").eq( 1 ).click(function () {
    //x = $(".mega-dropdown.open").position();
    x = $(this).position();
    aa = x.left + 75;
    $(this).find(".arrow2").css("left", aa);
});

如果您有任何其他问题，请在下方添加评论。

问候D.

Answer 3

此处解决的一个问题＆gt;＆gt; Mega drop down triangle

FullScreen View

检查1920 X 1080分辨率！它的工作！ enter image description here

继续努力！

CSS

  body {
    font-family:'Open Sans', 'sans-serif';
    background:#f0f0f0;
}
.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-1:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 30%;
    z-index: 10;
}
.mega-dropdown-menu-1:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 30%;
    z-index: 8;
}
.mega-dropdown-menu-2:before {
    content:"";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 50%;
    z-index: 10;
}
.mega-dropdown-menu-2:after {
    content:"";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 50%;
    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;
}

bootstrap 3响应多个大型菜单

3 个答案: