最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
WordPress利用jquery实现动态下拉菜单
时间：2022-06-25 19:10:20 编辑：袖梨 来源：一聚教程网
首先你要为你的站点建立一个菜单，可以通过WordPress的管理后台 – 外观 – 菜单栏目实现。为了让你建立的菜单在页面上显示，还需要做以下几步
打开你主题的FUNCTION.PHP文件在其中加入以下代码，
| 代码如下 | 复制代码 |
|
register_nav_menus(); |
|
通过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 { |
|
到这里就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下均能动态显示