WordPress教程

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

阿里云

有些网站的栏目比较多,单行的网站导航很难全部显示这些栏目,这时可以通过制作二级下拉菜单的方法来显示更多的导航栏目。下面给广大学习建网站的学员介绍一下 WordPress 网站导航制作二级下拉菜单的简单方法。

将下载的压缩包解压出来,将里面的 jquery1.42.min.js 和 jquery.SuperSlide.2.1.3.js 二个文件通过 FTP 工具上传到自己模板的 js 文件夹里;

在头部模板 header.php 里找到 标签,将下的代码放到 标签上面;(注意文件路径)

  1. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
  2. <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
也想出现在这里?联系我们
创客主机

使用以下的代码替换原来的网站导航菜单代码。(一般在 header.php)

  1. <div id="menuun">
  2.         <?php wp_nav_menu( array( 'theme_location' =>'topmenu','container' => '','menu_class' => 'topnav clearfix','menu_id' => 'topmeau','depth' => 2, ) ); ?>
  3. <script id="jsID" type="text/javascript">
  4.  
  5.             jQuery("#menuun").slide({
  6.                 type:"menu",
  7.                 titCell:"#topmeau>li",
  8.                 targetCell:".sub-menu",
  9.                 effect:"slideDown",
  10.                 delayTime:300 ,
  11.                 triggerTime:0,
  12.                 returnDefault:true
  13.             });
  14.         </script>        
  15.     </div>

将以下的 CSS 样式代码粘贴到 style.css 文件最下面。

  1. #menuun{width:1000px;margin:0 auto;background:#A03128;}
  2.         .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  3.         .topnav{ height:40px;line-height:40px;padding:0 20px; position:relative; z-index:1;  }
  4.         .topnav a{ color:#fff; font-weight:400; }
  5.         .topnav ul,.topnav ol,.topnav li{list-style:none;}
  6.         .topnav>li{ float:left;  position:relative; }
  7.         .topnav>li a{ display:block;padding:0 20px; font-size:14px;  }
  8.         .topnav .sub-menu{ display:none; width:100%; left:0; top:40px;  position:absolute; background:#1B120B;/*修改下拉框背景颜色*/  line-height:26px; padding:5px;  }
  9.         .topnav .sub-menu li{text-align:center; overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;zoom:1; }
  10.         .topnav .sub-menu a{ display:block; padding:5px 10px; }
  11.         .topnav .sub-menu a:hover{ color:#fff;  }
  12.         .topnav .current-menu-item a{ color:#F00 !important; /*修改选中的文字颜色*/  }

在网站后台--外观---菜单,进行导航菜单的添加。(如果没有开启后台菜单,先要开启菜单功能。)

这样就可以制作出二级下拉菜单导航了。

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

已有 332 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!