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来定义类的规范小结
Nov 19 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
JS自定义滚动条效果
Mar 13 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
JavaScript流程控制(循环)
Dec 06 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
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
几个学习PHP的网址
2006/11/25 PHP
php文件操作实例代码
2012/05/10 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
JS求平均值的小例子
2013/11/29 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
《姥姥的剪纸》教学反思
2014/02/25 职场文书
任命书模板
2014/06/04 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
英语教师求职信范文
2015/03/20 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
入党申请书格式
2019/06/20 职场文书