WordPress 淡出淡入导航菜单

WordPress 淡出淡入导航菜单

有前两篇关于导航菜单的基础, 这个淡入淡出效果会显得比较简单. 菜单我们已经做出来了, 下拉效果我们已经出来了, 说白了就是要在这些基础上加一个渐变效果而已, 或呈现, 或褪去.

本文只对渐变处理作展开讨论, 其他请参考前两篇关于导航菜单的文章, 文章链接你可以在本文相关话题中找到.

这是效果演示

相关话题:

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