位置：首页 > CMS教程 > WordPress

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

发布时间：2023-04-10 08:18:43

文章来源：快乐收录网

访问次数：

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

WuM快乐收录网

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

方法/步骤

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

。将下载的压缩包解压出来，将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的js文件夹里；WuM快乐收录网

在头部模板header.php里找到</head> 标签，将下的代码放到</head> 标签上面；（注意文件路径）

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

<?php wp_nav_menu( array( container => ,menu_class => topnav clearfix,menu_id => "topmeau",depth => 2, ) ); ?>

jQuery("#menuun").slide({ WuM快乐收录网

type:"menu",WuM快乐收录网

titCell:"#topmeau>li",WuM快乐收录网

targetCell:".sub-menu",WuM快乐收录网

effect:"slideDown", WuM快乐收录网

delayTime:300 , WuM快乐收录网

triggerTime:0, WuM快乐收录网

returnDefault:trueWuM快乐收录网

});WuM快乐收录网

</div>

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

#menuun{width:1000px;margin:0 auto;background:#A03128;}WuM快乐收录网

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}WuM快乐收录网

.topnav{ height:40px;line-height:40px;padding:0 20px; position:relative; z-index:1; }WuM快乐收录网

.topnav a{ color:#fff; font-weight:400; }WuM快乐收录网

.topnav ul,.topnav ol,.topnav li{list-style:none;}WuM快乐收录网

.topnav>li{ float:left; position:relative; }WuM快乐收录网

.topnav>li a{ display:block;padding:0 20px; font-size:14px; }WuM快乐收录网

.topnav .sub-menu{ display:none; width:100%; left:0; top:40px; position:absolute; background:#1B120B;/*修改下拉框背景颜色*/ line-height:26px; padding:5px; }WuM快乐收录网

.topnav .sub-menu li{text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;zoom:1; }WuM快乐收录网

.topnav .sub-menu a{ display:block; padding:5px 10px; }WuM快乐收录网

.topnav .sub-menu a:hover{ color:#fff; }WuM快乐收录网

.topnav .current-menu-item a{ color:#F00 !important; /*修改选中的文字颜色*/ }

在网站后台--外观---菜单，进行导航菜单的添加。（如果没有开启后台菜单，先要开启菜单功能。）WuM快乐收录网

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

　　《WordPress网站导航制作二级下拉菜单通用方法（css二级下拉菜单）》更新于时间：2023-04-10 08:18:43；由本站小编进行发布，目前浏览的小伙伴达到，感谢你们的支持，后期快乐收录网小编会继续为大家更新更多相关的文章，希望广大网友多多关注快乐收录网工作心得栏目，如果觉得本站不错，那就给我们一个分享的支持吧！

WordPress网站导航制作二级下拉菜单通用方法（css二级下拉菜单）特别声明

本站快乐收录网提供的WordPress网站导航制作二级下拉菜单通用方法（css二级下拉菜单）都来源于网络，不保证文章的准确性和真实性，同时，对于该文章所造成的影响，不由快乐收录网实际控制，在2023-04-10 08:18:43收录时，该网页上的内容，都属于合规合法，如有侵权违规，可以直接联系网站管理员进行整改或删除，快乐收录网不承担任何责任。

快乐收录网：致力于优质、实用的网络站点资源收集与分享！本文地址：https://nav.klxjz.cn/CMS/WordPress/93237.html转载请注明

标签：

资讯分类