本文只对渐变处理作展开讨论, 其他请参考前两篇关于导航菜单的文章, 文章链接你可以在本文相关话题中找到.
这是效果演示
相关话题:
WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
多级导航菜单
jQuery 导航菜单
点选式导航菜单 (待定话题)
作业分析:
整个菜单的结构和样式在二级导航菜单一文已经确定下来了, 我们不需要对它们再进行修改. 所以本次只需在菜单的 JavaScript 特效上进行加强.
淡入淡出是个什么玩意儿? 鼠标徘徊, 则渐显菜单; 鼠标撤离, 则渐褪菜单. 也就是 mouseover 的时候, 不断地调用某个方法令菜单的不透明度逐渐变大; mouseout 的时候, 不断地调用另一个方法令菜单逐渐变小.
这个处理过程中有两点是需要注意的. 在显示菜单之前需要进行一些前期处理 (比如: 获取菜单位置), 但这必须在渐变之前处理. 同样, 在不透明度渐变为 0 时要隐藏菜单.
实施操作:
前面的分析说得有点啰嗦了, 还是看看代码吧. 
为了突出改动的部分, 我在代码中加入了一些 Log.
初始化
初始不透明度为 0, 而最大不透明度为被设定值或者 1.
// 定义透明度, 默认透明this.opacity = 0;this.maxopacity = opacity || 1;
激活
先进行前期处理, 再对菜单的透明度进行处理.
/** * 激活方法 * 当鼠标移动到菜单标题是激活 */activate: function() {// 获取当前菜单体的位置var pos = this.util.cumulativeOffset(this.title);var left = pos[0];var top = pos[1] + this.util.getHeight(this.title); // 定义激活时样式this.util.setStyle(this.body, 'left', left + 'px');this.util.setStyle(this.body, 'top', top + 'px');this.util.setStyle(this.body, 'visibility', 'visible');this.util.setStyle(this.body, 'opacity', this.opacity);this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')'); if(this.tid) {clearTimeout(this.tid);}// 不断加强菜单的不透明度this.tid = setInterval(this.util.bind(this, this.appear), 30);}加强菜单的不透明度, 直到透明度到达最大不透明度.
/** * 加强不透明度, 直到最大不透明度 */appear: function() {this.opacity += 0.1;if(this.opacity >= this.maxopacity) {this.opacity = this.maxopacity;// 取消循环调用clearTimeout(this.tid);}// 重新设定透明度this.util.setStyle(this.body, 'opacity', this.opacity);this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');}解除
对菜单的透明度进行处理.
/** * 解除方法 * 当鼠标移动出菜单标题是激活 */deactivate: function(){if(this.tid) {clearTimeout(this.tid);}// 不断减弱菜单的不透明度this.tid = setInterval(this.util.bind(this, this.fade), 30);}减弱菜单的不透明度, 直到透明度为 0 并隐藏菜单.
/** * 减小不透明度, 直到完全透明隐藏菜单 */fade:function() {this.opacity -= 0.1;if(this.opacity <= 0) {this.opacity = 0;// 隐藏菜单this.util.setStyle(this.body, 'visibility', 'hidden');// 取消循环调用clearTimeout(this.tid);}// 重新设定透明度this.util.setStyle(this.body, 'opacity', this.opacity);this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');}演示主题:
以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css, 添加了文件js/menu.js
下载主题: default_with_menubar_3.zip
