WordPress 3.0+菜单功能支持二级和N级菜单实现步骤

2019-02-19 17:20:14刘景俊

一个二级菜单的 的模型已经展现出来了,剩下的就是配上 CSS 和 jQuery,使其产生下拉菜单的效果。
执行的脚本也非常简单,如下:


<script type="text/javascript">
jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(300)
},
function() {
$('ul', this).slideUp(300)
});
});
</script>

然后加上相应的css样式:


<style type="text/css">
ul,li{padding:0;margin:0;list-style:none;}
a{text-decoration:none;}
#nav li{width:100px;line-height:30px;float:left;}
#nav li a{text-align:center;display:block;width:100px;background:#ccc;}
#nav li a:hover{background:#000;color:#fff;}
.sub-menu{display:none;}
</style>

大功告成,上面样式是一些基本的东西,你可以根据自己的主题来设计。
你可以继续阅读相关【WordPress技巧】的文章。