WordPress利用jquery实现动态下拉菜单

作者：袖梨 2022-06-25

首先你要为你的站点建立一个菜单，可以通过WordPress的管理后台 – 外观 – 菜单栏目实现。为了让你建立的菜单在页面上显示，还需要做以下几步

打开你主题的FUNCTION.PHP文件在其中加入以下代码，

代码如下 复制代码

register_nav_menus();
wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );

通过register_nav_menus()这个函数注册一个菜单，它还支持多个菜单的注册

之后你就可以在页面中有菜单的显示，类似于这样的HTML

WORDPRESS
它为菜单中的LI分配了相应的class，不难发现 为当前页面分配的是 .current-menu-item,当前文章所在分类为.current-post-ancestor ..
所以我们就可以直接给这些Class加上你想要的CSS样式就行了，很简单吧.呵呵..

代码如下 复制代码

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
color: green;
}

到这里就OK啦，效果见本网站菜单,好像是废话...

二级下拉菜单

原来css显示二级菜单部分：

代码如下 复制代码
#access ul li:hover > ul {display: block;}

偶的博客因为已经添加了jQuery库，所以很容易实现动态下拉菜单效果，添加代码：

代码如下 复制代码
jQuery(document).ready(function($) {
$(‘#access ul li’).hover(function() {
$(‘ul’, this).slideDown(300)
},
function() {
$(‘ul’, this).slideUp(300)
})
});

使用Jquery后二级菜单在ie6、ie7、ie8、firefox下均能动态显示

相关文章

精彩推荐