php制作二级导航栏,wordpress导航栏下拉二级菜单的制作

关于二级菜单下拉效果的问题，网上我没有找到。我所参考的是我之前的主题。

反复试验研究了一下午，终于研究出一套简单可行的方案。利用jquery的强大功能进行制作。

以下为详细过程：

1、下拉菜单代码部分

这个代码可以放到header.php里面，你也可以为他加一个div容器用来设置位置。

2、javascript部分

新建一个js文件或者主题原有的js文件中填写以下代码作为jquery库，显示时间我按照原来的主题添加为200，但是实际测试时候有点慢，还有残留不能快速弹回，我强烈建议各位括号里填0，因为我就是这样成功了。

$(document).ready(function(){

$('ul.top-menu li').hover(function(){

$(this).find('ul:first').slideDown(200);//显示二级菜单，括号中的数字表示下拉菜单完全显示出来需要200毫秒。

$(this).addClass("hover");

},function(){

$(this).find('ul').css('display','none');

$(this).removeClass("hover");

});

function hide_submenu(){

$('ul.top-menu li').find('ul').css('display','none');

}

$('ul.top-menu li li:has(ul)').find("a:first").append(" » ");

document.onclick = hide_submenu;

});

这一部分就是所谓的jquery，你实现要加载jquery库。加载方法如下：

引入:

将以上代码放到header.php的

...之间，用来加载js

3、CSS部分

.menunav ul,.menunav li{

list-style:none;

}

ul.top-menu{

position:relative;

}

ul.top-menu li{

float:left;

}

ul.top-menu li.hover,

ul.top-menu li:hover{

position: relative;

}

ul.top-menu li a{

width:80px;

height:35px;

display:block;

margin:0;

text-align:center;

color:#ffffff;

text-decoration:none;

font: 14px Verdana;

line-height: 35px;

}

ul.top-menu li a:hover,

ul.top-menu li.hover a{

background:#F69;

}

ul.sub-menu{

display:none;

position:absolute;

}

ul.sub-menu li{

width:100%;

clear:both

}

ul.sub-menu li a{

width: 150px;

height:35px;

margin:0;

text-align:left;

text-indent:12px;

font: 14px/35px Verdana;

}

ul.sub-menu li a:hover,

ul.sub-menu li.hover a{

background:#F7437F;

}

ul.sub-menu ul{

rightright:100%;

top:0;

}

ul.sub-menu ul a:hover{

background:#F7437F;

}

以上代码添加到你的style.css中作为样式，我这个样式一定不适合你，但是给了你一个模板，你可以自行修改，尤其是颜色。如果出现错位情况你可以用谷歌浏览器的强大审查元素的功能进行一个个调试。

写完了，这个功能耽误了我整整一个下午加中午不吃饭的时间，我现在还没吃中午饭，但是要去吃晚饭了。

希望给你一点启发，网上也有类似代码，你可以对照有什么不同，但是请按照我的建议进行设置，因为我都是千百次实践得出来的经验。

如果我的文章对你有启发，请点一下侧边的或者文章页面的广告赞助一下。谢谢。欢迎常来。