js 全兼容可高亮二级缓冲折叠菜单


Posted in Javascript onJune 04, 2010

在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头、页脚、左侧菜单加一个右侧ifame框架页。所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单。

特点:

全兼容,浏览器测试:IE5.5、IE6、IE7、IE8、FF3.0、谷歌、Safari 4.0、Opera9.0。
Html结构优雅简洁,无多余标签,利于程序循环输出。
样式与结构分离,你可以在样式表中修改不同的风格。
当前选中项高亮状态,一级菜单和二级菜单都可以高亮显示。
折叠层优雅缓冲动画。
最适用于后台和一些OA系统界面。

缺点:

不支持防刷新,这个功能在后台应用系统中应该用途不大,没有加入这个功能。
在IE6中缓冲效果没有出来,对于IE6,就弱化一下效果。
还是先看看效果截图:
js 全兼容可高亮二级缓冲折叠菜单
简单说一下制作这样的菜单的一些简单的思路和会遇到的问题。

一般制作一个效果,我的制作流程一般是先画出HTML结构层内容,再写样式,之后是搞一些锦上添花的效果,如JS特效等等。不知各位大牛们是怎样一个流程模式。

结构层:

结构层的构思一般是建立在一个感性认识上的,一般是有一个效果图,根据这个效果图构建最简洁的HTML结构。如上图所示,映入眼帘的第一印象,首先是想到用一个UL的无序列表,但是…这是一个二级嵌套的列表,这是我们首先需要考虑的问题。

因此结构应该是下面这样子:

<li><a href="#none">一级菜单项</a> 
<ul> 
<li><a href="#none">二级菜单项</a></li> 
</ul> 
</li>

在有二级菜单时是一个嵌套的UL结构,无二级菜单时则是如下:
<ul class="menu"> 
<li><a href="#none">一级菜单项</a></li> 
</ul>

当然,你也可以采用dl-dt-dd有序列表的方式来创建这种嵌套的结构,视你的实际情况而定。

有了最原始的结构层,你就需要添加一些必要的钩子,用于CSS和JS控制样式和效果,我一直反对那种添加很多类名的写法,这会增加页面的体积,所以最精简的作法是应用一两个必要的类名给父容器即可,然后在样式表中用子(群)选择符设置各种个性的设置。在上面的结构,你会想到用几个类名来定义所有的样式呢?

我的做法是只用三个类名即可以控制全部的样式显示了。一个是最顶级UL,定义为class=”menu”,一个是二级菜单的容器,也就是嵌套的UL定义一个class=”level2”,最后是一级菜单项li定义一个class=”level1”,有了这三个钩子,你就可以操纵整个结构的样式了。

表现层:

样式表的设置都很简单,唯一要注意的是,为了便于JS控制二级菜单的显隐和记录当前选中项的高亮状态,所以我不用hover伪类来实现鼠标的滑入滑出效果,而采用JS来模拟它。用JS控制样式的关键代码如下:

一级菜单样式

/*一级菜单三态样式,供JS调用*/ 
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;} 
.menu li.level1 a.hove{background-position:left -31px;} 
.menu li.level1 a.cur{background-position:left -62px;}

二级菜单样式
/*二级菜单三态样式,供JS调用*/ 
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;} 
.menu li.level1 a.hove{background-position:left -31px;} 
.menu li.level1 a.cur{background-position:left -62px;}

行为层:

因为前面已经提到,我们在样式表并没有定义菜单的三态效果,所以我们需要给每个菜单项绑定onmouseover、onmouseout和onclick事件模拟出这种效果来。在结构层中我们并没有定义这个总容器的ID,而只定义了一个class类名,所以在JS添加了一个扩展的getElementsByClassName()方法(感谢好友司徒正美),根据类名来获得这个对象。用循环闭包来绑定这三个事件。

详细代码就不一一解说了,Demo中注释得非常清楚,请下载到本机浏览。

有什么问题请在本博客中跟贴讨论,祝你用得开心!
在线演示地址 http://demo.3water.com/js/caidan_js/demo.html
打包下载地址 https://3water.com/jiaoben/27308.html

Javascript 相关文章推荐
Javascript实现网络监测的方法
Jul 31 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 #Javascript
利用jquery操作select下拉列表框的代码
Jun 04 #Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 #Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 #Javascript
js操作select控件的几种方法
Jun 02 #Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 #Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 #Javascript
You might like
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
限制文本字节数js代码
2007/03/06 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python图像处理之反色实现方法
2015/05/30 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python实现代码统计工具
2019/09/19 Python
python能做什么 python的含义
2019/10/12 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
工会2014法制宣传日活动总结
2014/11/01 职场文书
表扬稿格式范文
2015/01/16 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
公安机关起诉意见书
2015/05/20 职场文书
九不准学习心得体会
2016/01/23 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android