153.bootstrap导航多级菜单

时间 2019-11-25

标签 153.bootstrap bootstrap 导航多级菜单栏目 Bootstarp 繁體版

原文原文链接

参考：https://blog.csdn.net/s740556472/article/details/54632905javascript

1. 效果

2. 实现

2.1 导入自定义的css样式

下面的样式就当作模板使用css

java

/*自定义的css*/
.dropdown-submenu {
position: relative;
}bootstrap

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}echarts

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}spa

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}.net

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}blog

.dropdown-submenu.pull-left {
float: none;
}ip

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
</style>

引导到项目中

<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>

2.2 使用

2.2.1 增长三级菜单

2.2.2 四级菜单

<li class="dropdown-submenu">
                                   <a tabindex="-1" href="#">工资变化图</a>
                                   <ul class="dropdown-menu">
                                   <li><a tabindex="-1" href="javascript:echartsIndex()">我的工资</a></li>
                                   <li><a tabindex="-1" href="#">部门平均工资</a></li>
                                   
                                   <li class="dropdown-submenu">
                                          <a tabindex="-1" href="#">四级</a>
                                           <ul class="dropdown-menu">
                                           <li><a tabindex="-1" href="javascript:echartsIndex()">4.1</a></li>
                                           <li><a tabindex="-1" href="#">4.2</a></li>
                                           <li><a tabindex="-1" href="#">4.3</a></li>
                                           <li><a tabindex="-1" href="#">4.4</a></li>
                                           </ul>
                                           </li>
                                           
                                   </ul>
                                   </li>

153.bootstrap导航 多级菜单