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 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
如何基于js判断浏览器版本
Feb 20 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伪造referer实例代码
2008/09/20 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
python插入数据到列表的方法
2015/04/30 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
百度吧主申请感言
2014/01/12 职场文书
十一酒店活动方案
2014/02/20 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
升职自荐信范文
2015/03/27 职场文书
就业证明函
2015/06/17 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
JS实现简单九宫格抽奖
2022/06/28 Javascript