最近写了个pc后台的一个可折叠/关闭的导航条,和写代码的编辑器有点像,先来看看效果:

css pc后台可折叠/关闭导航面板 gif css pc后台可折叠/关闭导航面板

主要功能&使用

现在很多后台模版都是左边菜单栏,右边内容栏,但是点击多个菜单后内容无法快速切换,这个功能主要是为了解决这个痛点。

该导航条可以增加/删除,移动,折叠/展开,右键(刷新/关闭所有),设置默认页,自动适配等功能。

使用的话很简单,这里已经给你写好了js和css,在页面上引用这两个就好了,不过这个js需要jquery的支持,因此你要先引用jquery:

因为这里的拖动效果引用了jquery-ui,因此你还要引用jquery-ui.js。

具体的使用也很简单,下面的代码基本上包括了创建和方法的调用:

主要逻辑&难点

整个功能还算比较简单,稍微复杂一点的就是折叠/展开的算法,就是当宽度不够的时候,隐藏哪个比较好?

当然我这里实现的比较简单,就是给每个导航条增加一个open属性,表示打开的时间,open越大,表示最近打开,open越小,表示打开的时间比较小。当要隐藏导航条的时候,优先隐藏open小的,恢复导航条的时候则是优先恢复open大的。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字