公告:123目录网为广大站长提供免费收录网站服务,我们将免费进行到底,如需快审服务(10元/站)请联系站长QQ,可自助充值发布。

点击这里在线咨询客服
新站提交
  • 网站:315
  • 待审:0
  • 小程序:12
  • 文章:35791
  • 会员:69

 

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

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

方法/步骤

下载网站特效功能万能JS插件包

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

在头部模板header.php里找到</head> 标签,将下的代码放到</head> 标签上面;(注意文件路径)
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
使用以下的代码替换原来的网站导航菜单代码。(一般在header.php)
        <?php wp_nav_menu( array( container => ,menu_class => topnav clearfix,menu_id => "topmeau",depth => 2, ) ); ?>

            jQuery("#menuun").slide({

                type:"menu",

titCell:"#topmeau>li",

                targetCell:".sub-menu",

                effect:"slideDown",

                delayTime:300 ,

                triggerTime:0,

returnDefault:true

            });

    </div>
将以下的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; /*修改选中的文字颜色*/  }

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

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

标签:

下一篇:wordpress登录入口(wordpress登录密码忘了咋办)(wordpress密码错误)

上一篇:WordPress网站制作banner轮播图的通用方法(网页设计轮播图怎么制作)

相关文章

  admin95360564zxm

注册时间:

网站:1 个   小程序:3 个  文章:12 篇

  • 315

    网站

  • 12

    小程序

  • 35791

    文章

  • 69

    会员

赶快注册账号,推广您的网站吧!
最新入驻小程序

数独大挑战2018-06-03

数独一种数学游戏,玩家需要根据9

答题星2018-06-03

您可以通过答题星轻松地创建试卷

全阶人生考试2018-06-03

各种考试题,题库,初中,高中,大学四六

运动步数有氧达人2018-06-03

记录运动步数,积累氧气值。还可偷

每日养生app2018-06-03

每日养生,天天健康

体育训练成绩评定2018-06-03

通用课目体育训练成绩评定