全兼容可高亮二级缓冲折叠菜单[附DEMO演示]
|
最近一段时刻一向较量忙，已经有好几个月没有打理博客了。现将一个最近在项目中建造的一个菜单实例清算出来，共享一下。 在靠山或OA体系中最常用到的机关每每是一个全屏机关，一样平常都是上中下三行两列机关，页头、页脚、左侧菜单加一个右侧ifame框架页。以是那种带折叠的二级菜单是会常常行使到的，本例即是实现这样一种较量通用的全兼容可高亮二级缓冲折叠菜单。 特点：
弱点：
照旧先看看结果截图：
图一 简朴说一下建造这样的菜单的一些简朴的思绪和会碰着的题目。 一样平常建造一个结果，我的建造流程一样平常是先画出HTML布局层内容，再写样式，之后是搞一些锦上添花的结果，如JS殊效等等。不知列位大牛们是奈何一个流程模式。 布局层： 布局层的构想一样平常是成立在一个感性熟悉上的，一样平常是有一个结果图，按照这个结果图构建最简捷的HTML布局。如上图所示，映入眼帘的第一印象，起首是想到用一个UL的无序列表，可是…这是一个二级嵌套的列表，这是我们起首必要思量的题目。 因此布局应该是下面这样子： <li><a href="#none">一级菜单项</a> 在有二级菜单时是一个嵌套的UL布局，无二级菜单时则是如下： <ul class="menu"> 虽然，你也可以回收dl-dt-dd有序列表的方法来建设这种嵌套的布局，视你的现实环境而定。 有了最原始的布局层，你就必要添加一些须要的钩子，用于CSS和JS节制样式和结果，我一向阻挡那种添加许多类名的写法，这会增进页面的体积，以是最精简的作法是应用一两个须要的类名给父容器即可，然后在样式表顶用子（群）选择符配置各类本性的配置。在上面的布局，你会想到用几个类名来界说全部的样式呢？ 我的做法是只用三个类名即可以节制所有的样式表现了。一个是最顶级UL，界说为class=”menu”，一个是二级菜单的容器，也就是嵌套的UL界说一个class=”level2”，最后是一级菜单项li界说一个class=”level1”，有了这三个钩子，你就可以哄骗整个布局的样式了。 示意层： 样式表的配置都很简朴，独一要留意的是，为了便于JS节制二级菜单的显隐和记录当前选中项的高亮状态，以是我不消hover伪类来实现鼠标的滑入滑出结果，而回收JS来模仿它。用JS节制样式的要害代码如下： 一级菜单样式 /*一级菜单三态样式,供JS挪用*/ 二级菜单样式 /*二级菜单三态样式,供JS挪用*/ 举动层： 由于前面已经提到，我们在样式表并没有界说菜单的三态结果，以是我们必要给每个菜单项绑定onmouseover、onmouseout和onclick变乱模仿出这种结果来。在布局层中我们并没有界嗣魅这个总容器的ID，而只界说了一个class类名，以是在JS添加了一个扩展的getElementsByClassName()要领（感激挚友司徒正美），按照类名来得到这个工具。用轮回闭包来绑定这三个变乱。 具体代码就纷歧一讲解了，Demo中注释得很是清晰，请下载到本机赏识。 有什么题目请在本博客中跟贴接头，祝你用得开心！ Demo演示：全兼容可高亮二级缓冲折叠菜单 原文：http://www.cnblogs.com/binyong/archive/2010/05/28/1745918.html （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
![全兼容可高亮二级缓冲折叠菜单[附DEMO演示]](http://img22.aspzz.cn/uploads/allimg/c180912/153C36332b550-13119.gif "veryhuo.com")
