WordPress 二级菜单简易教程

因为想要简洁一点、有逻辑一点,所以把文章分类归到同一个父栏目中,就像你现在看到的一样。每次折腾都有所收获,无容置疑,是的。

其实并不复杂…其实是很简单。因为本淫使用的 3.0 赠送的导航菜单,所以操作非常方便,如果你没用上请马上围观五木的 WordPress 3.0 导航菜单简易添加,不过,手动修改模板也行,结构参看本文末尾~

使用二级菜单很简单,看图:
WordPress二级菜单

只要把需要做成二级栏目的栏目移动到父栏目下方,并向右拖一下,你就成功了,试试看吧,你能行的。最后别忘了保存。

好了,菜单出来的,接下来就要用 CSS 和 jQuery 搞一搞了,这一步很关键,样子问题啊。

定位

首先是二级菜单的定位问题,由于其包含在父菜单的 li 标签下,所以很自然就继承了父元素的 CSS ,宽度啊什么的,而且位置不太好控制。所以要使用 position:absolute ,将此添加到子菜单 CSS 中,(查看网页源码你会找到全部元素的 id 和 class),用 top 和 left 或者 top 和 right 或者…总之定好位。

鼠标控制

虽然二级菜单出来了,位置也好了,但并不是要它一直显示,对吧,我们只需要让鼠标放在父栏目上才显示子菜单,离开即消失,为此,我们借助 jQuery ,因为可以通杀所有支持 JavaScript 的浏览器。

首先将二级菜单隐藏,添加 display:none 属性。接着,添加以下 jQuery 代码:

$('.menu-item').hover(
	function(){
		$(this).find('ul:first').slideDown("fast").css({visibility:"visible",display:"block"});
	},
	function(){
		$(this).find('ul:first').slideUp("fast").css({visibility:"hidden"});
	}
);

总结:其实我想说的是:1.子目录包含在父栏目的 li 标签内;2.子目录使用绝对定位。