Question

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

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

有人可以给我一个起点吗？还是带有引导功能的菜单这样的功能示例？

Answer 1

具有下拉菜单的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>

检查是否可以。

Answer 2

下面我做了一些调整，以使其更接近所发布的图像。

谢谢@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"/>

Bootstrap 4侧栏菜单下拉菜单

2 个答案: