如何制作网站带图的二级下拉菜单

通常我们制作网站的二级菜单都是使用普通的下拉展开的方式，但也有网站的下拉二级菜单是带有图片的布局。如下图：

怎么制作这样的带图的二级下拉菜单呢？下面学做网站论坛就来介绍一下制作方法和方法。

方法/步骤

• 第一步：将网站菜单开启二级菜单功能。即在导航代码里添加'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可以根据自己需要调整。