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

想给自己的博客加上动态显示菜单,或者叫高亮当前菜单的样式,其实这实现起来并不难,因为 WordPress 3.0之后的版本开始支持自定义动态菜单,只要你会基本的HTML和CSS知识.

首先你要为你的站点建立一个菜单,可以通过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样式就行了,很简单吧,呵呵,代码如下:

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

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

二级下拉菜单

原来css显示二级菜单部分,代码如下:

#access ul li:hover > ul {display: block;}

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

1. jQuery(document).ready(function($) { 
2. $(‘#access ul li’).hover(function() { 
3. $(‘ul’, this).slideDown(300) 
4. }, 
5. function() { 
6. $(‘ul’, this).slideUp(300) 
7. }) 
8. }); 

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