乌徒帮技术范WEB开发jQuery › 基于jquery的wordpress经典下拉菜单

基于jquery的wordpress经典下拉菜单

分类:jQuery,WordPress开发

一直在研究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;
}

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

已有5条评论 快速评论
  1. 管理员 #2567楼 回复给@2560楼 2012/12/04 18:50:50 回复

    这段时间稍忙,重做演示后再通知你

  2. 撸啊撸 #2560楼 2012/12/04 12:22:17 回复

    过期了博主··求演示

  3. themes #1510楼 2012/08/15 16:43:32 回复

    正需要这个菜单,谢谢了

  4. frustigor #446楼 回复给@445楼 2011/09/24 22:19:54 回复

    不客气,多多交流哈

  5. 优美图搜 #445楼 2011/09/24 17:56:59 回复

    学习了,谢谢博主啊

填写个人信息,赶快回复吧!