html - Bootstrap 3 响应式多重大型菜单-6ren

html - Bootstrap 3 响应式多重大型菜单

转载作者：太空狗更新时间：2023-10-29 13:26:41

我使用 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

Note: The Position of the arrow is to be changed. For both the dropdowns, the upward arrows indicate the same position. This position is to be changed like

第一个下拉列表:http://i.imgur.com/Vklu5c1.png
第二个下拉列表:http://i.imgur.com/97Lhca3.png

JSFIDDLE DEMO

最佳答案

出现此问题是因为 css 三 Angular 形相对于整体 navbar 定位。由于这个元素的位置没有改变，三 Angular 形会重新定位自己。

理想的解决方案是将三 Angular 形嵌入当前选定的元素中。为了实现这个删除

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

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

fiddle - http://jsfiddle.net/7eHFd/4/

更新:在缩小尺寸时，上面的三 Angular 形保持不变。要解决此问题，请使用媒体查询将上述代码包装起来。

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

fiddle - http://jsfiddle.net/7eHFd/5/

关于html - Bootstrap 3 响应式多重大型菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25057451/

文章推荐： html - 如何将 css 应用于三个不同的类并悬停其中一个

文章推荐： git - 如何使用 --dir-diff 选项设置 git mergetool？

文章推荐： html - 带打嗝的内联样式

twitter-bootstrap - Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别？
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗？最佳答案在 CSS 框架的上下文中，Bootstrap 和 Twitter B
twitter-bootstrap - Bootstrap 文档中的屏幕阅读器是什么？？？ >>>[ Bootstrap 文件]
什么是 Bootstrap 文档中的屏幕阅读器？？？ >>> bootstrap document 不知道什么是屏幕阅读器？最佳答案它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具；它会向
twitter-bootstrap - Bootstrap : How do I identify the Bootstrap version?
我想更新网站上的 Bootstrap，但我不知道安装的版本。如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本？ CSS 文件中没有版
twitter-bootstrap - Bootstrap.js、Bootstrap.min.js、Bootstrap-table.js 有什么区别
很抱歉问了这么一个愚蠢的问题，但我真的不清楚这些。 Bootstrap 是一个非常棒的库，它节省了开发人员的大量工作。因为它提供了很多功能，比如节省大量时间。响应式功能。一致的设计。便于使用
twitter-bootstrap - 如何使用 ng2-bootstrap 从 Bootstrap 3 切换到 Bootstrap 4？
我正在使用 ng2-bootstrap对于 Angular 2 项目。这个包同时支持Bootstrap 3和4，我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。如何从 Boo
twitter-bootstrap - 我在 "ngx-bootstrap"和 "@ng-bootstrap/ng-bootstrap"之间感到困惑
我计划在我的项目中使用 Bootstrap 4 和 angular 4，但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
twitter-bootstrap - 如何使用 Bootstrap 类将 Bootstrap 警报高度显示为较小的字体？
单击删除按钮后，我设置了警报。但它的默认高度更大，我想让它更小(高度)。我试过 display-4 属性(property)，但它没有工作。我已通过 w-50 将宽度设置为屏幕的一半，但警报的一
twitter-bootstrap - 在 Bootstrap 按钮下拉列表中显示 Bootstrap 选择
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap - twitter-bootstrap 中 "bootstrap"这个词的含义
twitter-bootstrap 中的“bootstrap”一词是什么意思？在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义，但无法得出结论。那么有人可以在这种情况下给出“Bo
twitter-bootstrap - Bootstrap 5 仍然推荐使用 Bootstrap-vue？
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS，我想知道是否仍然建议使用 Bootstrap-Vue，不管 Bootstrap-Vue 还不支持 Bootst
twitter-bootstrap - Bootstrap typeahead 在 Bootstrap 模式中不起作用
我正在使用 codeigniter 框架，我正在使用 bootstrap typeahead，一切都很好，但我的问题是当我将它放在 bootstrap 模式中时，bootstrap typeahead
twitter-bootstrap - Bootstrap 5 引用错误 : bootstrap is not defined
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
twitter-bootstrap - Bootstrap ScrollSpy 似乎正在破坏 Bootstrap 选项卡
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。这是我的 body 标签: 这是我的标签 HTML: Home Profile
twitter-bootstrap - Twitter Bootstrap 和 Bootstrap-Xtra
如果您选择使用 Bootstrap-Xtra，您是否应该也包括原始的 bootstrap.css，或者 bootstrap-xtra.css 应该是一个完整的替代品。例如，bootstrap-xtr
twitter-bootstrap - 如何使用 Bootstrap 日期选择器作为输入创建 Bootstrap 框提示符
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
twitter-bootstrap - react Bootstrap 中的 Bootstrap "type alignment"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap，两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
twitter-bootstrap - 为什么 bootstrap 3 中的 bootstrap 默认按钮对我来说是深灰色的？
我正在使用 Bootstrap 3 RC，默认按钮是带有黑色文本的深灰色，而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个？这可能
twitter-bootstrap-3 - bootstrap-tagsinput with typeahead, bootstrap-3
在我的一个项目中，我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
twitter-bootstrap - AngularUI/Bootstrap 是否支持 twitter-bootstrap 3？
下拉菜单在 Angular-UI-Bootstrap 中不起作用？使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了？
twitter-bootstrap - 如何在 Bootstrap Table 中添加 Bootstrap 按钮
如何在 Bootstrap Table 中添加 Bootstrap 按钮最佳答案我已经想出了解决办法。我想和大家分享。这是我的 table : # Visit

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 3 响应式多重大型菜单