如果你要自制一个WordPress模板,发现多级下拉菜单让你头大,那么这里有一个最简单的制作多级WordPress下拉菜单的方法,完全基于CSS,不需要js脚本。

多级下拉菜单的原理

其实,理解多级下拉菜单的原理,做起来就没那么复杂了。

1.明白菜单的结构, WordPress用wp_nav_menu()函数输出菜单,无非就是多级的无序列表(ul)。

2. 当鼠标滑过菜单项时,使该菜单项的子元素显示出来,这个动作可以只用css表达,也可以借助js的力量。

制作一个多级下拉菜单

1. 先简单了解一下WordPress通过wp_nav_menu()函数输出的菜单的基本结构





<div class="menu-header">是包围菜单的div,可有可无,具体的class或者id都是由wp_nav_menu()控制的,它包围的嵌套无序列表ul才是菜单的主体。

从代码中看出,每一个菜单项都是li元素包含a标签构成的,菜单的层级关系由无序列表的嵌套关系反应,如果你熟悉嵌套的无序列表,理解这个结构应该很容易。

2. 如何实现鼠标滑过顶级菜单项时显示次级菜单项

核心技巧就是css的后代选择器,例如

ul li > ul

该选择器选择li元素(顶级菜单项)的子元素中的ul(不包括子元素后代元素中的ul),如下图所示

CSS后代选择器

了解这个原理后,让我们开始吧。

3. 打开你主题的header.php,在适当的位置输出menu


4. 在WordPress默认主题twentyten文件夹下找到style.css文件,在大约371行,将Menu的CSS拷贝到自己的style.css中,如果你使用第二步的代码输出menu,那么到后台创建好menu,刷新前台,就可以看到一个twentyten样式的下拉菜单,这个菜单是支持层级的。

下面的代码已经注释了修改哪些地方可以改变菜单的哪些属性,你可以给菜单的container加一张背景图片,修改二级菜单的背景色或者加背景图片,修改文字颜色等,完全可以做出一个定制化的菜单来。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;/*修改菜单的背景色(顶级菜单)*/
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;/*包围菜单的div的宽度*/
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {
	color: #aaa;
	display: block;
	line-height: 38px;
	padding: 0 10px; /*修改顶级菜单项的间距*/
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none; /*将none改为block,可以强制所有次级菜单显示出来,方便修改样式*/
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;/*修改次级菜单的宽度*/
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #333;/*修改次级菜单的背景色*/
	line-height: 1em;
	padding: 10px;
	width: 160px;/*修改次级菜单的宽度*/
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #333;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff; /*修改所有菜单项的字体颜色*/
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;/*修改所有菜单项的字体颜色,兼容低版本浏览器*/
}

 

 

12条留言

  1. 菜单展示的位置不对啊?!!博主有遇到过吗?
    一级菜单 li 设置是relative,sub-menu 是设置是absolute
    但是二级菜单在 一直首页下面?

    1. 这得具体看你主题,我没遇到过,你让sub-menu display:block,然后用firebug看下究竟这家伙被应用了哪些样式。既然这是不正常的情况,必有不该有的样式

  2. 再一次又回到这里,记得第一次通过搜索引擎访问到这里就是为了给自定义菜单添加二级下拉效果,昨天又在纠结这个问题,又在网上搜了一通都未果,今勉强用jquery实现了效果。后来又重新用这个css的方法,居然可以了,但是昨天分明显示有问题,折腾呐。第一次用的时候差不多也是照搬代码,貌似还意外的多出了貌似玻璃边缘的菜单效果。也特地到twentyten主题看看了源代码……

    1. 不会是缓存闹的吧? CSS方法在IE6下不行,要是需要兼容IE6就得用js的菜单了。我现在觉得二级菜单麻烦,主题支持我也懒得用了。

  3. 按照你的方法试了但是不管用。。。

    1. 正常,每个主题都不同,自己要懂CSS才行

    1. 为啥用不到,有的主题只支持一级菜单呢,当然不鼓捣主题的人确实用不到

      1. 好东西啊,终于找到你这里来了来才解决这个问题,还是纯css的
        有用有用~~

        2012年7月21日18:27:08

        1. 不过 ul:hover > ul这种用法不适用ie6哦

评论功能已关闭