制作bootstarp下拉菜单.按钮向左显示二级菜单
时间: 2023-07-31 20:05:43 浏览: 116
可以通过 Bootstrap 的下拉菜单和嵌套下拉菜单组合来实现按钮向左显示二级菜单的效果。具体步骤如下:
1. 创建一个按钮,并在其上添加 `data-toggle="dropdown"` 和 `aria-haspopup="true"` 属性,以指示该按钮可以展开下拉菜单。
```html
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">Dropdown</button>
```
2. 在该按钮下方添加一个 `dropdown-menu` 类的无序列表,表示下拉菜单的内容。
```html
<ul class="dropdown-menu">
<!-- 下拉菜单内容 -->
</ul>
```
3. 在下拉菜单中添加一个带有 `dropdown-submenu` 类的列表项,表示该项为一个包含嵌套下拉菜单的二级菜单。
```html
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">二级菜单</a>
<!-- 嵌套下拉菜单 -->
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">二级菜单子项1</a></li>
<li><a class="dropdown-item" href="#">二级菜单子项2</a></li>
<!-- 更多子项 -->
</ul>
</li>
```
4. 在二级菜单项上添加一个右箭头图标,表示该项包含嵌套下拉菜单。
```html
<a class="dropdown-item" href="#">二级菜单 <span class="float-right">▸</span></a>
```
5. 最后,使用 CSS 样式将下拉菜单向左浮动,即可实现按钮向左显示二级菜单的效果。
```css
.dropdown-menu {
left: auto;
right: 100%;
}
```
完整代码示例:
```html
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">菜单项1</a></li>
<li><a class="dropdown-item" href="#">菜单项2</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">二级菜单 <span class="float-right">▸</span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">二级菜单子项1</a></li>
<li><a class="dropdown-item" href="#">二级菜单子项2</a></li>
<!-- 更多子项 -->
</ul>
</li>
<!-- 更多菜单项 -->
</ul>
</div>
<style>
.dropdown-menu {
left: auto;
right: 100%;
}
</style>
```
阅读全文