WordPress利用jquery实现动态下拉菜单
发布:smiling 来源: PHP粉丝网 添加日期:2014-03-19 21:37:50 浏览: 评论:0
想给自己的博客加上动态显示菜单,或者叫高亮当前菜单的样式,其实这实现起来并不难,因为 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样式就行了,很简单吧,呵呵,代码如下:
- .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下均能动态显示.
Tags: WordPress 菜单 动态
相关文章
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
- ·WordPress怎么修改新用户注册邮件内容(2014-03-18)
- ·WordPress怎么添加前台注册功能(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)