蓝盟诗人[LUC]蓝客联盟

忘记密码

WordPress 滚动导航菜单

2010-09-15 23:02 作者: 来源: 本站 浏览: 1,416 views 我要评论 字号:

难度: ★★★☆

滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.

这里只列出与淡入淡出菜单实现有所不同的地方, 对于以前说过的问题不再重复. 如有疑惑请先查看之前几篇相关的文章, 也欢迎在此留言交流.

这是效果演示

相关话题:

WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
多级导航菜单
jQuery 导航菜单
点选式导航菜单 (待定话题)

作业分析:

正如前面所说, 滚动菜单的关键是对菜单高度的操作. 主要操作如下:
1. 菜单的初期化处理.
2. 展开和折叠菜单的处理方法.
3. 激活菜单的瞬间, 对菜单高度的处理.

实施操作:

初期化处理
为了处理更加灵活, 我们需要为它定义一个作为参数的滑动速度, 也就是每一个单位时间间隔, 菜单高度的改变幅度. 另外, 我们需要将菜单的初始高度定为 0.

展开和折叠
展开和折叠的方法对应淡入淡出菜单的加强和减小不透明度, 只是处理对象不一样, 原理是一样的. 要注意将获取的高度转为整型再进行计算.

激活菜单的瞬间
十分十分十分重要, 滚动菜单中最具技巧, 也最有意思的一部分.
本程序中, 我对获取高度的方法进行了封装, 获取高度其实是返回元素的 offsetHeight. 按我的理解 (不知道是否正确), offsetHeight 会优先去获取 CSS 样式中的高度并返回, 当样式为空时才会去获取元素的实际高度. 所以有以下代码:

演示主题:

以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.phpstyle.css, 添加了文件 js/menu.js

下载主题: default_with_menubar_4.zip

下回预告:

下回继续讲讲点选式导航菜单, 也就是类似 Windows 窗体的菜单, 点下菜单即显示相应的菜单项, 直到菜单失去焦点. 只修改 JavaScript 代码实现, 可能会用到三个监听器: onclick, onmouseover 和 onblur.

(转自: WordPress 滚动导航菜单

发表评论

*

* (保密)

Ctrl+Enter 快捷回复

会员登录关闭

记住我 忘记密码

注册会员关闭

小提示: 您的密码会通过填写的"电子邮箱"发送给您.

**/