当前位置:主页 > JavsScript库 > 菜单 / 导航 >

Bootstrap 5 的多级下拉组件 - bootstrap-5-multi-level-dropdown
栏目分类:菜单 / 导航   发布日期:2021-08-19   浏览次数:

一个简单的 JavaScript,用于扩展本地 Bootstrap 5 下拉组件,允许您在单击或悬停时切换无限级别的子下拉菜单。

在 Bootstrap 5 导航栏上创建多级下拉菜单而不破坏原生 HTML 标记的绝佳解决方案。

使用:

1.在 Bootstrap 5 项目中加载 JavaScriptbootstrap5-dropdown-ml-hack.js和bootstrap5-dropdown-ml-hack-hover.css(仅当您想使用悬停事件切换子菜单时才需要)。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<link href="bootstrap5-dropdown-ml-hack-hover.css" rel="stylesheet" />
<script src="bootstrap5-dropdown-ml-hack.js"></script>

2. 就是这样。要创建悬停触发的多级下拉列表,只需将dropdown-hover-all&dropdown dropdown-hover类添加到下拉列表中,如下所示:

<div class="dropdown-hover-all">
  <!-- .dropdown 元素 -->
</div>
<div class="dropdown dropdown-hover">
  <!-- 切换和菜单元素 -->
</div>



官方网站:https://github.com/dallaslu/bootstrap-5-multi-level-dropdown

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库