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>