填写您的邮件地址,订阅我们的精彩内容:

基于jquery的wordpress经典下拉菜单

562

一直在研究wordpress后台菜单设置后前台如何显示出合适的效果,经过很长时间的探索,也没有找到好的方法,这里只是提供一个参考,希望朋友们可以完善并反馈给我。

1、下拉菜单代码部分

<?php wp_nav_menu(‘menu=主导航&theme_location=mainmenu&depth=0&container=&container_class=&menu_id=menu-main&menu_class=top-menu’); ?>

这个菜单代码出来的效果大致如下:

<ul id=”menu-main” class=”top-menu”><li id=”menu-item-345″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-345″><a href=”http://utubon.sinaapp.com/“>首页</a></li>
<li id=”menu-item-344″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-344″><a href=”#“>虚拟机</a>
<ul class=”sub-menu”> <li id=”menu-item-346″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-346″><a href=”http://utubon.sinaapp.com/?page_id=204“>业务合作</a></li> <li id=”menu-item-347″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-347″><a href=”http://utubon.sinaapp.com/?page_id=202“>主题制定</a></li> <li id=”menu-item-348″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-348″><a href=”http://utubon.sinaapp.com/?page_id=168“>关于本站</a></li> <li id=”menu-item-349″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-349″><a href=”http://utubon.sinaapp.com/?page_id=199“>友情链接</a></li> <li id=”menu-item-350″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-350″><a href=”http://utubon.sinaapp.com/?page_id=104“>标签云</a></li> <li id=”menu-item-351″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-351″><a href=”http://utubon.sinaapp.com/?page_id=187“>留言板</a></li>
<li id=”menu-item-352″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-352″><a href=”http://utubon.sinaapp.com/?page_id=2“>示例页面</a></li> <li id=”menu-item-353″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-353″><a href=”http://utubon.sinaapp.com/?page_id=106“>网站地图</a></li> <li id=”menu-item-354″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-354″><a href=”http://utubon.sinaapp.com/?page_id=178“>网站搜索</a></li> <li id=”menu-item-355″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-355″><a href=”http://utubon.sinaapp.com/?page_id=203“>网站搭建</a></li> </ul> </li> <li id=”menu-item-333″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-333″><a href=”#“>云计算</a> <ul class=”sub-menu”>
<li id=”menu-item-334″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-334″><a href=”http://utubon.sinaapp.com/?cat=6“>乌徒帮杂言</a></li> <li id=”menu-item-335″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-335″><a href=”http://utubon.sinaapp.com/?cat=14“>系统核心</a></li> <li id=”menu-item-336″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-336″><a href=”http://utubon.sinaapp.com/?cat=9“>功能函数</a> <ul class=”sub-menu”> <li id=”menu-item-376″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-376″><a href=”http://utubon.sinaapp.com/?cat=7“>二次开发</a></li> <li id=”menu-item-377″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-377″><a href=”http://utubon.sinaapp.com/?cat=5“>WP插件</a></li>
<li id=”menu-item-378″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-378″><a href=”http://utubon.sinaapp.com/?cat=8“>入门操作</a></li> <li id=”menu-item-379″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379″><a href=”http://utubon.sinaapp.com/?cat=4“>WP主题</a></li> <li id=”menu-item-380″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-380″><a href=”http://utubon.sinaapp.com/?cat=13“>空间域名</a></li> </ul> </li> <li id=”menu-item-337″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-337″><a href=”http://utubon.sinaapp.com/?cat=7“>二次开发</a></li> <li id=”menu-item-338″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-338″><a href=”http://utubon.sinaapp.com/?cat=5“>WP插件</a></li>
<li id=”menu-item-339″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-339″><a href=”http://utubon.sinaapp.com/?cat=8“>入门操作</a></li> <li id=”menu-item-340″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-340″><a href=”http://utubon.sinaapp.com/?cat=4“>WP主题</a></li> <li id=”menu-item-341″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-341″><a href=”http://utubon.sinaapp.com/?cat=13“>空间域名</a></li> <li id=”menu-item-342″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-342″><a href=”http://utubon.sinaapp.com/?cat=27“>业界资讯</a></li> <li id=”menu-item-343″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-343″><a href=”http://utubon.sinaapp.com/?cat=28“>代码块</a></li> </ul> </li><li id=”menu-item-382″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-382″><a href=”http://utubon.sinaapp.com/?page_id=187“>留言板</a></li>
<li id=”menu-item-383″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-383″><a href=”http://www.utubon.com“>文档下载</a></li>
</ul>

至于后台菜单的启用,你可以参考这篇文章(请用浏览器搜索功能)。

2、javascript部分

引入jquery:<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script>

写下面这段js代码:

$(document).ready(function(){
$(‘ul.top-menu li’).hover(function(){
$(this).find(‘ul:first’).slideDown(400);
$(this).addClass(“hover”);
},function(){
$(this).find(‘ul’).css(‘display’,’none’);
$(this).removeClass(“hover”);
});
function hide_submenu(){
$(‘ul.top-menu li’).find(‘ul’).css(‘display’,’none’);
}
$(‘ul.top-menu li li:has(ul)’).find(“a:first”).append(” &raquo; “);
document.onclick = hide_submenu;
});

3、CSS部分

.menunav ul,.menunav li{
list-style:none;
}
ul.top-menu{
position:relative;
}
ul.top-menu li{
float:left;
}
ul.top-menu li.hover,
ul.top-menu li:hover{
position: relative;
}
ul.top-menu li a{
width:60px;
height:60px;
display:block;
background:#009AD9;
margin:5px;
text-align:center;
line-height:60px;
color:#ffffff;
text-decoration:none;
}
ul.top-menu li a:hover,
ul.top-menu li.hover a{
background:#FF6600;
}
ul.sub-menu{
display:none;
position:absolute;
top:100%;
right:0;
width:180px;
margin:0;
padding:0;
}
ul.sub-menu li{
width:100%;
clear:both;
}
ul.sub-menu li a{
width:100%;
height:30px;
line-height:30px;
margin:0;
text-align:left;
text-indent:10px;
}
ul.sub-menu li a:hover,
ul.sub-menu li.hover a{
background:#FA4602;
}

ul.sub-menu ul{
right:100%;
top:0;
}
ul.sub-menu ul a:hover{
background:#B50000;
}

演示请看这里,如果网址无效或过期,请下面留言哦。

下面我简单说几句