bootstrap实现可折叠菜效果代码
代码语言:html
所属分类:菜单导航
代码描述:bootstrap实现可折叠菜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> .no-padding { padding: 0px; } .glyphicon-icon-rpad .glyphicon,.glyphicon-icon-rpad .glyphicon.m8,.fa-icon-rpad .fa,.fa-icon-rpad .fa.m8 { padding-right: 8px; } .glyphicon-icon-lpad .glyphicon,.glyphicon-icon-lpad .glyphicon.m8,.fa-icon-lpad .fa,.fa-icon-lpad .fa.m8 { padding-left: 8px; } .glyphicon-icon-rpad .glyphicon.m5,.fa-icon-rpad .fa.m5 { padding-right: 5px; } .glyphicon-icon-lpad .glyphicon.m5,.fa-icon-lpad .fa.m5 { padding-left: 5px; } .glyphicon-icon-rpad .glyphicon.m12,.fa-icon-rpad .fa.m12 { padding-right: 12px; } .glyphicon-icon-lpad .glyphicon.m12,.fa-icon-lpad .fa.m12 { padding-left: 12px; } .glyphicon-icon-rpad .glyphicon.m15,.fa-icon-rpad .fa.m15 { padding-right: 15px; } .glyphicon-icon-lpad .glyphicon.m15,.fa-icon-lpad .fa.m15 { padding-left: 15px; } ul.nav-menu-list-style .nav-header .menu-collapsible-icon { position: absolute; right: 3px; top: 16px; font-size: 9px; } ul.nav-menu-list-style { margin: 0; } ul.nav-menu-list-style .nav-header { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #e8e8e8; display: block; margin: 0; line-height: 42px; padding: 0 8px; font-weight: 600; } ul.nav-menu-list-style> li { position: relative; } ul.nav-menu-list-style> li a { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #e8e8e8; padding: 0 10px; line-height: 32px; } ul.nav-menu-list-style> li:first-child a {} ul.nav-menu-list-style { list-style: none; padding: 0px; margin: 0px; } ul.nav-menu-list-style li .badge,ul.nav-menu-list-style li .pull-right,ul.nav-menu-list-style li span.badge,ul.nav-menu-list-style li label.badge { float: right; margin-top: 7px; } ul.bullets { list-style: inside disc } ul.numerics { list-style: inside decimal } .ul.kas-icon-aero {} ul.kas-icon-aero li a:before { font-family: 'Glyphicons Halflings'; font-size: 9px; content: "\e258"; padding-right: 8px; } </style> </head> <body translate="no"> <div class="container"> <div class="row"> <h1>Bootstrap Tree Menu Example</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="well no-padding"> <div> <ul class="nav nav-list nav-menu-list-style"> <li><label class="tree-toggle nav-header glyphicon-icon-rpad"><span class="glyphicon glyphicon-folder-close m5"></span>Bootstrap <span class="menu-collapsible-icon glyphicon glyphicon-chevron-down"></span></label> <ul class="nav nav-list tree bullets"> <li><a href="#">JavaScript</a></li> <li><a href="#">CSS <span class="badge">42</span></a></li> <li><label class="tree-toggle nav-header">Buttons</label> <ul class="nav nav-list tree"> <li><a href="#">C.........完整代码请登录后点击上方下载按钮下载查看
网友评论0