当前位置: 秋叶网络博客 WP教程 ◊ 纯代码给wordpress制作二级多级菜单特效

纯代码给wordpress制作二级多级菜单特效

作者:秋了秋 发表时间:2014年09月16日

为了改进博客体验,最近对本站样式进行了整顿,除了换配色以外,还增添了新功能,比如说二级下拉菜单的实现。二级或者多级菜单的实现不仅改进了用户体验,同时能在最小的范围内展示更多菜单选项,杜绝铺张浪费,弘扬充分利用。具体效果可以把鼠标移到本站的菜单选项上,包含二级菜单的选项会自动下拉出二级菜单。

二级菜单

现在来说说制作方法: 首先在自己的wordpress主题的functions文件中删掉原有的菜单功能代码或者直接加入这段代码; <?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?> 注:一定要要在<?php ?>外面加。 然后找到主题调用菜单的php代码,如果是原始的一般为 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> 把它删掉,换成: <div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div> 注意:确保所加这段代码外围没有其它div包围,否则会被外围div限制。 接下来就是添加下拉js功能代码,把以下代码加入主题js文件中: jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});}); 最后,就是css样式美化了。具体要什么样的效果,充分发挥自己的想象力,css可以做到的。 #menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");} #menu li{border-right:0px #ace solid;} #nav{margin-left:30px;width:900px;height:36px;} #nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid} #nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;} #nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;} .sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;} .sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px;  text-align:center; padding:0 20px; display:block; _width:48px;} 注:其中sub-menu就是二级菜单的样式

1
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/111.html
目录: WP教程 | 标签: 下拉菜单, 二级菜单特效 | 10390次阅读