bootstrap 垂直菜单栏样式

本文介绍如何利用Bootstrap的CSS和JS提高UI页面效率,通过toggle事件实现子类菜单的优雅展开与折叠,优化用户体验。

首先说下子类菜单连的toggle事件,有效率的提高了我们的UI页面效率

在这里引入了bootstrap的CSS和JS就会直接根据样式来调用 通过

  事件调用data-toggle="collapse" class="nav-header collapsed"

 

.secondmenu a {
font-size: 10px;
color: #4A515B;
text-align: center;
}

<ul id="main-nav" class="nav nav-tabs nav-stacked" style="">

<li>

  • <a href="#duijiang" class="nav-header collapsed" data-toggle="collapse">
  1. <i class="glyphicon glyphicon-calendar"></i>
  2. 兑奖充值提款
  • </a>
  • <ul id="duijiang" class="nav nav-list collapse secondmenu(这个自定义的)" style="height: 0px;">
  1. <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
  2. <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
  3. <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
  4. <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
  5. <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
  • </ul>

</li>

</ul>

转载于:https://www.cnblogs.com/msb-/p/6495848.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值