Bootstrap 4侧边栏菜单下拉菜单答案

【问题标题】：Bootstrap 4 Sidebar Menu DropdownBootstrap 4侧边栏菜单下拉菜单
【发布时间】：2019-12-04 07:55:13
【问题描述】：

我需要创建一个 Bootstrap 4 侧边栏菜单下拉菜单，如下图（图片）。

我正在考虑使用 Dropright 按钮，我正在寻找好的代码示例，但没有成功...

谁能给我一个起点？或者像这样的菜单的功能示例，带有引导程序？

【问题讨论】：

标签： html css drop-down-menu bootstrap-4

【解决方案1】：

下面是我为达到更接近发布的图片所做的一些调整。

谢谢@Amaresh S M！

垃圾：

从 html 中移除 tabindex -1
从 css 中移除 i 标签
删除了 jquery 脚本（在这种情况下不是必需的）

为了有 4 个部分的菜单（3 个动态和 1 个固定）：

容器从 .container 更改为 .container-fluid，有完整的宽度
原来的容器改成了col-9（宽度的75%）
css 中的所有 .container 都改为 col-9
在右侧添加了一个固定的 col-3（菜单的静态部分，宽度的 25%）
col-9 的三个部分各有 33.33% 的宽度
唯一的 .row 具有 100% 的高度

重要：

我为列 col-9 和 col-3 创建了类。将 CSS 关联到泛型类不是一个好主意！这可能会影响整个网站。

.row-menu-full-width {
    height: 100%;
}

.dynamic-part {
    margin: 0 !important;
    padding: 0 !important;
    background-color: black;
    float: left;
}

a {
    color:#fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff;
    padding:0px 0px 0px 0px;
    width:100%;
    display:block;
}

li {
    list-style-type: none;
    color:#fff;
    padding-left: 30px;
}

.dynamic-part > ul {
    width:33.33%;
    height: 100%;
    background-color:#225fe8;
    position:relative;
    padding:0 !important;
    overflow:visible;
}

.dynamic-part > ul > li:hover {background-color:#0f1e41;}
.dynamic-part > ul > li > ul {
    display:none;
    position:absolute;
    right:-100%;
    top:0;
    padding:0 !important;
    width:100%;
    background-color:#193d8e;
    height: 100%;
}

a:hover {
    color: #fbfbfb !important;
}

.dynamic-part > ul > li:hover > ul {
    display:block;
}

.dynamic-part > ul > li > ul >li:hover {background-color:#0f1e41;}
.dynamic-part > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-100%;
    padding:0 !important;
    top:0;
    width:100%;
    background-color:#112551;
    height: 100%
}

.dynamic-part > ul > li > ul > li:hover ul {
    display:block;
}

.dynamic-part > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.dynamic-part > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
}

.static-part {
    margin: 0 !important;
    padding: 0 !important;
    background-color: lightgray;
    float: right;
}

<body>
<div class="container-fluid container-menu-full width">

    <div class="row row-menu-full-width">
        <div class="col-9 dynamic-part">
            <ul class="">
                <li class="">
                    <a href="#">HOME<i class="fa fa-angle-right" style="font-size:20px"></i></a>
                    <ul class="">
                        <li class=""><a href="#">Locations</a></li>
                        <li class=""><a href="#">Strategy</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#"> Products  <i class="fa fa-angle-right" style="font-size:20px"></i></a>
                            <ul class="">
                                <li>
                                    <a href="#">
                                         Product List                                        
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                         Product List                                        
                                    </a>
                                </li>

                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Locations</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                    </ul>
                </li>
                <li ><a href="#">Contact</a></li>
                <li ><a href="#">Address</a></li>
                <li ><a href="#">News</a></li>
            </ul>
        </div>

        <div class="col-3 static-part">
            
            fixed column
        </div>
    </div>
</div>

</body>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

【讨论】：

【解决方案2】：

Bootstrap 4 带有下拉菜单的 SideMenu 栏：以全页模式运行并查看它。

html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
a {
    color:#fff !important;
    text-decoration: none !important;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
      list-style-type: none;

    color:#fff;
}

.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#225fe8;
    position:relative;
    padding:0 !important;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    padding:0 !important;
    width:250px;
    background-color:#193d8e;
}
a:hover {
    color: #fbfbfb !important;
}
i{
  margin-top: 4px;
  padding-left: 8px;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    padding:0 !important;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">        
            <ul class="">

                <li class="">
                    <a tabindex="-1" href="#">HOME  <i class="fa fa-angle-right" style="font-size:20px"></i>
  </a>
                    <ul class="">

                        <li class=""><a tabindex="-1" href="#">Locations</a></li>
                        <li class=""><a href="#">Strategy</a></li>
                        <li class=""><a href="#">Research</a></li>
                        <li class="">
                            <a href="#"> Products  <i class="fa fa-angle-right" style="font-size:20px"></i></a>
                            <ul class="parent">
                                <li >
                                    <a href="#">
                                         Product List                                        
                                    </a>

                                    <ul class="child">
                                        <li >Platforms</li>
                                        <li > Funds</li>
                                        <li >Wealth</li>
                                        <li >Listed </li>
                                        <li >Wealth </li>
                                        <li >Listed</li>
                                        <li >Listed </li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Locations</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#">Implementation</a></li>
                    </ul>
                </li>
                <li ><a href="#">Contact</a></li>
                <li ><a href="#">Address</a></li>
                <li ><a href="#">News</a></li>
            </ul>
        
    </div>
<script type="text/javascript">
  $('.child').hide(); 
        $('.parent').children().click(function () {
            event.preventDefault();
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });
</script>
</body>

检查是否正常。

【讨论】：

你的代码很完美。但不要使用“.container ul {height:100%;}”。因为它在底部隐藏了 ul 列表。