网站下拉菜单怎么制作?二级下拉菜单的制作方法

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

网站下拉菜单

1、放以下的代码到</head>标签上方
<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; }

本站整理分享,如若转载请注明出处,本文地址:https://www.jaluoseo.com/wzjs/1582.html

发表评论

登录后才能评论
网站建设
网站建设
青岛seo
青岛seo
网站优化
网站优化
分享本页
返回顶部
承接青岛网站建设,青岛seo,青岛网站优化以及北京、上海、深圳等各个地区和城市的企业、个人网站搭建和网站seo优化服务,咨询VX:jaluo2021