通常我们制作网站的二级菜单都是使用普通的下拉展开的方式，但也有网站的下拉二级菜单是带有图片的布局。如下图：
怎么制作这样的带图的二级下拉菜单呢？下面学做网站论坛就来介绍一下制作方法和方法。
方法/步骤
- 第一步：将网站菜单开启二级菜单功能。即在导航代码里添加’depth’ => 2;
<?php wp_nav_menu( array( ‘theme_location’ =>’topmenu’,’container’ => ”,’menu_class’ => ‘topnav’,’menu_id’ => ‘topmeau’,’depth’ => 2, ) ); ?>
- 第二步：在网站头部模板底部写一个带图的下拉菜单版块；
<div class=”savnav”>
<div class=”container savnav_m”>
<div class=”row”>
<div class=”col-xs-12 col-md-2″></div>
<div class=”col-xs-12 col-md-5 savnav1″>
<h3></h3>
<ul class=”zili”>
</ul>
</div>
<div class=”col-xs-12 col-md-1″></div>
<div class=”col-xs-12 col-md-3 savnav2″>
</div>
<div class=”col-xs-12 col-md-1″></div>
</div>
</div>
</div> - 第三步：写书JS，实现当光标移动某个菜单项时，在下拉版块显示对应的下拉项目；
<script>
$(“#topmeau>li.menu-item-has-children”).hover(function () {
var h3wz=$(this).children(“a”).text();
var imgurl=$(this).children(“a”).attr(‘rel’);
var ulwz=$(this).children(“ul”).html();
$(‘.savnav’).show();
$(“.savnav .savnav1 h3”).text(h3wz);
$(“.savnav .savnav1 .zili”).html(ulwz);
$(“.savnav .savnav2″).html(‘<img src=”<?php echo get_template_directory_uri(); ?>/static/picture/nav/’+imgurl+’.jpg”> ‘);
},function(){
$(‘.savnav’).hide();
});
$(“#topmeau>li:not(.menu-item-has-children),div:not(.savnav)”).hover(function () {
$(‘.savnav’).hide();
});
$(“#topmeau>li.menu-item-has-children,.savnav,.savnav *”).hover(function () {
$(‘.savnav’).show();
});
</script> - 第四步：添加CSS样式，控制下拉菜单的样式；
.savnav{width:100%;background:#0c89e5;padding:40px;position: fixed;z-index:9999;}
.savnav1 h3{color:#fff;font-size:1.8rem;margin-bottom:10px;margin-left:1%;padding-left:30px}
.savnav1 ul{list-style:none;}
.savnav1 ul li{float:left;padding:10px 30px;width:48%;margin:10px 1% 5px;background:#fff;text-align:center;border-radius:6px}
.savnav1 ul li a{color:#333;font-size:1.6rem;}
.savnav1 ul li:hover{background:#f5f5f5}
.savnav2 img{width:100%;}
.savnav{display:none}
/*将原来的下拉隐藏*/
.sub-meau{display:none!important} - 第五步：因为下拉菜单里有图片，为了实现不同的图片，需要在后台菜单添加一个rel值；
-
- 第六步：根据设置的rel值上传图片即可。图片上传路径为：/static/picture/nav/
到此，网站带图的二级下拉菜单功能就制作好了，代码中的css可以根据自己需要调整。
免责声明：网所有文字、图片、视频、音频等资料均来自互联网，不代表本站赞同其观点，内容仅提供用户参考，若因此产生任何纠纷，本站概不负责，如有侵权联系本站删除！邮箱:207985384@qq.com https://www.ainiseo.com/jianzhan/60362.html
