善恶资源网专注优秀技术教程分享网-傅汉松!

网站二级下拉菜单导航制作方法

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是网站二级下拉菜单导航制作方法

傅汉松

网站二级下拉菜单导航制作方法:

1、放以下的代码到标签上方

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2、删除原来的菜单的DIV,放下面的代码:

通过分别调用分类和页面的代码:

<div id="nav1">
<div id="nav">
<div id="MODBLK_225" class="mod_block mb_56YrvV58_block">
<div class="nav_l"></div>
<ul id="nav_sgBhgn" class="navigation">
<li><a href=" <?PHP echo get_option('home'); ?>">首页</a></li>
<?php wp_list_categories('title_li=0&orderby=Name&show_count=0&depth=5'); ?>
<?php wp_list_pages('sort_column=menu_order&title_li=&depth=2&include='); ?>
</ul>
<div class="nav_r"></div></p><p><script type="text/Javascript">
var topMenuNum = 0;
$("#nav_sgBhgn li").hover(
function(){
topMenuNum++;
$(this).attr("id","kindMenuHover"+topMenuNum);
$("#kindMenuHover" + topMenuNum + " > ul").show();
$(this).parent().addClass("hover");
},
function(){
$("#"+$(this).attr("id")+" > ul").hide();
$(this).attr("id","");
$(this).parent().removeClass("hover");
}
);
</script></div></div></div>

使用后台菜单调用:

<nav class="xf_meau">
<?php wp_nav_menu( array( 'container' => '','menu_class' => 'xf_meau_list clearfix','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>
</nav>
<script type="text/javascript">
var topMenuNum = 0;
$("#nav_sgBhgn li").hover(
function(){
topMenuNum++;
$(this).attr("id","kindMenuHover"+topMenuNum);
$("#kindMenuHover" + topMenuNum + " > ul").show();
$(this).parent().addClass("hover");
},
function(){
$("#"+$(this).attr("id")+" > ul").hide();
$(this).attr("id","");
$(this).parent().removeClass("hover");
}
);
</script></div>

3、在style.css中放入以下代码:

.xf_meau{width:100%;height:56px;background:#017ED2}
.xf_meau_list{width:1180px;margin:0 auto;}
.xf_meau_list>li{width:10%;line-height:55px;float:left;text-align:center;position:relative;}
.xf_meau_list a{font-size:1.2em;color:#fff;}
.xf_meau_list li.current-menu-item {background:#0c619a;}
.xf_meau_list li:hover{background:#0c619a;}
.xf_meau_list li:hover a{text-decoration:none;}</p><p>.xf_meau_list li UL {Z-INDEX: 8; POSITION: absolute; display: none; BaCKGROUND: #017ED2; TOP: 55px;width:100%; }
.xf_meau_list li UL UL {Z-INDEX: 200; TOP: 0px; LEFT: 90px}
.xf_meau_list li UL li {height:45px;line-height:45px;border-top:1px solid #017ED2;}
.xf_meau_list li UL li:hover {BaCKGROUND: #0c619a;}
.xf_meau_list li.current-menu-item { BaCKGROUND: #0c619a; }


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 网站二级下拉菜单导航制作方法
网站二级下拉菜单导航制作方法:1、放以下的代码到标签上方<script src="http://apps.bdimg.com/libs...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    74.45ms