bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)





  
  
  
  
  侧边菜单test
  
  
  
  
  



  

Hello,Bootstrap!



bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)_第1张图片

上面是一级菜单激活

bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)_第2张图片

上面是二级菜单激活

 

bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)_第3张图片

上面是二级菜单被折叠

bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)_第4张图片

上面是菜单收缩

bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)_第5张图片

上面是菜单收缩和二级菜单折叠

bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单)_第6张图片

上面是菜单收缩后隐藏一级菜单折叠图标

 

该菜单是我参照AdminLTE的菜单效果自己模仿写的,本来自己用的AdminLTE但是发现菜单和页面交互不好,一点菜单就刷新整个页面的,自己想改的话太麻烦了,要看它底层,而且引用的组件比较多,都给我绕晕了。后来工作中用到layui,又采用layui的菜单,但是发现layui的样式和bootstrap有些会互相影响覆盖,但是又想用bootstrap就弃用了layui准备自己写菜单的效果。

 

代码里有个aHref这个是我一开始使用AdminLTE结合springboot、thymeleaf的时候发现的一个bug(adminLTE里一级菜单如果存在treeview属性a链接的功能会失效),于是就给了一个aHref属性用来存菜单链接,后面请求的时候再取出来用,你们可以忽略不计

 

只写了两级菜单,太多的不想考虑了,自己慢慢写断断续续写了好久,对自己前端的积累挺有帮助的,写的不好大家海涵

 

20180822对代码进行了改进:

1)jquery的初始化方法297行变量hsfoldIcon

hsfoldIcon=false; 收缩菜单会隐藏一级菜单折叠图标

hsfoldIcon=true; 收缩菜单会显示一级菜单折叠图标

 

2)添加了鼠标经过和离开自动触发收缩菜单事件,不想要的可以注释掉298行后面的代码和两个绑定事件

 

如果有bug请留言

你可能感兴趣的:(bootstrap+jquery+css折叠菜单 收缩菜单 效果(只有两级菜单))