全国服务热线:4008-888-888

公司新闻

微信小程序系统_Bootstrap 3多级下拉菜单实例

Bootstrap 3多级下拉菜单实例       这篇文章主要为大家详细介绍了Bootstrap 3多级下拉菜单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁、大气的Bootstrap界面上靠,着实要费一些功夫。下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用。

 !DOCTYPE HTML 
 html lang="zh-CN" 
 head 
 meta charset="UTF-8" 
 title Bootstrap 3 的多级下拉菜单示例 /title 
 script type="text/javascript" src="jquery/1.9.0/jquery.js" /script 
 link rel="stylesheet" href="bootstrap/3.0.3/css/bootstrap.min.css"/ 
 script type="text/javascript" src="bootstrap/3.0.3/js/bootstrap.min.js" /script 
 style type="text/css" 
 .dropdown-submenu { 
 position: relative; 
 .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; 
 .dropdown-submenu:hover .dropdown-menu { 
 display: block; 
 .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; 
 .dropdown-submenu:hover a:after { 
 border-left-color: #fff; 
 .dropdown-submenu.pull-left { 
 float: none; 
 .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 
 /head 
 body 
 div 
 div 
 h2 Bootstrap 3多级下拉菜单 /h2 
 div 
 a id="dLabel" role="button" data-toggle="dropdown" data-target="#" 
 href="javascript:;" 
 下拉多级菜单 span /span 
 ul role="menu" aria-labelledby="dropdownMenu" 
 li a href="javascript:;" 一级菜单 /a /li 
 li a href="javascript:;" 一级菜单 /a /li 
 li /li 
 a tabindex="-1" href="javascript:;" 一级菜单 /a 
 li a tabindex="-1" href="javascript:;" 二级菜单 /a /li 
 li /li 
 a href="javascript:;" 二级菜单 /a 
 li a href="javascript:;" 三级菜单 /a /li 
 /ul 
 /li 
 /ul 
 /li 
 /ul 
 /div 
 /div 
 /div 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服