Bootstrap 4侧栏菜单下拉菜单
[英]Bootstrap 4 Sidebar Menu Dropdown
问题描述
我需要创建一个Bootstrap 4边栏菜单下拉菜单，如下所示（图像）。
我正在考虑使用Dropright按钮，我正在寻找良好的代码示例，但未成功...
谁能给我一个起点？ 还是带有引导功能的菜单这样的功能示例？
2 个解决方案
解决方案1
1 已采纳 2019-07-26 03:48:55
具有下拉菜单的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>
检查是否可以。
解决方案2
1 2019-07-27 18:38:51
在做一些调整之后，我做了一些调整，以更接近所发布的图像。
谢谢@Amaresh SM！
垃圾：
从HTML移除了tabindex -1
从CSS移除了我的标签
删除了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折叠侧边栏菜单下拉列表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.