Bootstrap Sub菜单可拉伸全屏并覆盖整个页面

rory-h 发表于 Dev

罗里

我做了一个JSFiddle来说明我目前所拥有的。请在这里查看我的代码：

我的一些CSS代码段代码：

.subnav {
    display: none;
    position: absolute;
    //top: 58px;
    background: #dfe6e8;
    padding: 24px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.subnav li {
    margin-right: 0px !important;
    min-width: 142px;
}
.subnav li a {
    padding-bottom: 0px !important;
    margin-bottom: 16px;
}
.subnav li:last-child a {
    margin-bottom: 0px;
}
.has-dropdown:hover .subnav {
    display: block;
}

我在使UL扩展到全屏时遇到问题。这是我要达到的目标，如下所示：

任何帮助，将不胜感激

萨西斯

为此，您必须进行一些结构和CSS更改。我编辑了您的小提琴，并对导航进行了一些更改。

HTML：

   <div class="nav-container">
            <nav class="top-bar">
                <div class="container-fluid">
                    <div class="row nav-menu">
                        <div class="col-xs-12 columns">
                            <a class="navbar-brand" href="index.html"><img alt="Logo" class="logo logo-light" src="img/logo-light.png"> <img alt="Logo" class="logo logo-dark" src="http://www.subcablenews.com/links/images2/telenor.gif"></a>
                            <ul class="menu navbar-right">
                                <li>
                                    <a href="#">ABOUT</a>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">PROGRAMMES</a>
                                    <ul class="subnav">
                                        <li>
                                            <a href="about.html">Programme 1</a>
                                        </li>
                                        <li>
                                            <a href="about-2.html">Programme 2</a>
                                        </li>
                                        <li>
                                            <a href="services.html">Programme 3</a>
                                        </li>
                                        <li>
                                            <a href="services-2.html">Programme 4</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">PROJECTS</a>
                                    <div class="subnav subnav-halfwidth fullwidth">
                                        <div class="col-sm-4">
                                            <h6 class="alt-font">Project Lists</h6>
                                            <ul class="subnav subnav-halfwidth">
                                                <li>
                                                    <a href="blog-masonry.html">Project 1</a>
                                                </li>
                                                <li>
                                                    <a href="blog-masonry-sidebar.html">Project 2</a>
                                                </li>
                                                <li>
                                                    <a href="blog.html">Project 3</a>
                                                </li>
                                                <li>
                                                    <a href="blog-large-image.html">Project 4</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-4">
                                        <h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div>
                                        <div class="col-sm-4">
                                        <h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div>
                                    </div>
                                </li>
                                <li class="has-dropdown">
                                    <a href="#">MEDIA</a>
                                    <ul class="subnav">
                                        <li>
                                            <a href="projects.html">Media 1</a>
                                        </li>
                                        <li>
                                            <a href="projects-2.html">Media 2</a>
                                        </li>
                                        <li>
                                            <a href="project-single-2.html">Media 3</a>
                                        </li>
                                        <li>
                                            <a href="project-single.html">Media 4</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">CONTACT</a>
                                </li>
                            </ul>
                            <ul class="social-icons text-right">
                                <li>
                                    <a href="#"><i class="icon social_twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon social_facebook"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon social_instagram"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div><!--end of row-->
                    <div class="mobile-toggle">
                        <i class="icon icon_menu"></i>
                    </div>
                </div><!--end of container-->
            </nav>
        </div>

额外的CSS：

.subnav.fullwidth{
    position: absolute;
    right: -15px;
    top: 58px;
    width: 100vw;
    background: #F6F4F4;
    padding: 48px 64px 48px;
    box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(113,111,111,.7);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
    /* box-shadow: 1px 2px 5px #7D7D7D; */
}
.row{margin:0}
.top-bar .logo {
    width: 150px;
}
.subnav li{float:none; display: block;}

下面是更新的提琴。确保您也检查了html。因为我也做了一些更改。阅读此得到更好的了解有关引导的导航。希望这对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。