网站建设
苏州SEO关键词优化一站式服务

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

有些网站的栏目比较多,单行的网站导航很难全部显示这些栏目,这时可以通过制作二级下拉菜单的方法来显示更多的导航栏目。

网站二级下拉菜单

下面学做网站论坛给广大学习建网站的学员介绍一下Wordpress网站导航制作二级下拉菜单的简单方法。

方法/步骤

  1. 下载导航下拉菜单jquery特效基础包。点击下载 提取码: cme9;
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的js文件夹里;
  3. 在头部模板header.php里找到 标签,将下的代码放到 标签上面;(注意文件路径)
    
    <script type="text/javascript" src="/static/js/jquery1.42.min.js">
    <script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.3.js">
    
    
  4. 使用以下的代码替换原来的网站导航菜单代码。(一般在header.php)
    
    
    
    
  5. 将以下的CSS样式代码粘贴到style.css文件最下面。
    
    #menuun{width:1000px;margin:0 auto;background:#A03128;}
         .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
         .topnav{ height:40px;line-height:40px;padding:0 20px; position:relative; z-index:1; }
         .topnav a{ color:#fff; font-weight:400; }
         .topnav ul,.topnav ol,.topnav li{list-style:none;}
         .topnav>li{ float:left; position:relative; }
         .topnav>li a{ display:block;padding:0 20px; font-size:14px; }
         .topnav .sub-menu{ display:none; width:100%; left:0; top:40px; position:absolute; background:#1B120B;/*修改下拉框背景颜色*/ line-height:26px; padding:5px; }
         .topnav .sub-menu li{text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;zoom:1; }
         .topnav .sub-menu a{ display:block; padding:5px 10px; }
         .topnav .sub-menu a:hover{ color:#fff; }
         .topnav .current-menu-item a{ color:#F00 !important; /*修改选中的文字颜色*/ }
    
    
  6. 在网站后台–外观—菜单,进行导航菜单的添加。(如果没有开启后台菜单,先要开启菜单功能。)
    导航菜单
  7. 这样就可以制作出二级下拉菜单导航了。
历史上的今天
十二月
17
    哇哦~~~,历史上的今天没发表过文章哦
赞(0) 打赏
未经允许不得转载:苏州SEO优化 » WordPress网站导航制作二级下拉菜单通用方法
分享到: 更多 (0)
标签:

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • Q Q(选填)

网站建设与SEO关键词优化一站式服务

SEO咨询建站咨询

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
订阅图标按钮