首页 > 代码库 > bootstrap 多级下拉菜单
bootstrap 多级下拉菜单
如上效果;
实现代码:
导入js和css:
1 <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 2 <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 3 <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
html code:
1 <div class="container"> 2 <div class="row"> 3 <div class="dropdown" > 4 <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-success" data-target="#" href=http://www.mamicode.com/"/page.html"> 5 xx <span class="caret"></span> 6 </a> 7 <ul style="text-align: center" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 8 <li class="dropdown-submenu"> 9 <a tabindex="-1" href=http://www.mamicode.com/"#">xx</a> 10 <ul class="dropdown-menu"> 11 <li style="text-align: center"> 12 <a tabindex="-1" href=http://www.mamicode.com/"#">xx</a> 13 </li> 14 <li class="divider"></li> 15 <li style="text-align: center"> 16 <a href=http://www.mamicode.com/"#">xx</a> 17 </li> 18 </ul> 19 </li> 20 </ul> 21 </div> 22 </div> 23 </div>
css:
1 <style> 2 3 .dropdown-submenu { 4 position: relative; 5 } 6 7 .dropdown-submenu>.dropdown-menu { 8 top: 0; 9 left: 100%; 10 margin-top: -6px; 11 margin-left: -1px; 12 -webkit-border-radius: 0 6px 6px 6px; 13 -moz-border-radius: 0 6px 6px; 14 border-radius: 0 6px 6px 6px; 15 } 16 17 .dropdown-submenu:hover>.dropdown-menu { 18 display: block; 19 } 20 21 .dropdown-submenu>a:after { 22 display: block; 23 content: " "; 24 float: right; 25 width: 0; 26 height: 0; 27 border-color: transparent; 28 border-style: solid; 29 border-width: 5px 0 5px 5px; 30 border-left-color: #ccc; 31 margin-top: 5px; 32 margin-right: -10px; 33 } 34 35 .dropdown-submenu:hover>a:after { 36 border-left-color: #fff; 37 } 38 39 .dropdown-submenu.pull-left { 40 float: none; 41 } 42 43 .dropdown-submenu.pull-left>.dropdown-menu { 44 left: -100%; 45 margin-left: 10px; 46 -webkit-border-radius: 6px 0 6px 6px; 47 -moz-border-radius: 6px 0 6px 6px; 48 border-radius: 6px 0 6px 6px; 49 } 50 </style>
bootstrap 多级下拉菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。