phpwind9.0 顶部导航实现下拉菜单的方法[原创]

发布者: 龍捲風暴 | 发布时间: 2019-2-22 04:09| 查看数: 5169| 评论数: 1|帖子模式

假期即将结束，开始折腾9.0的主题，下面把顶部导航实现下拉菜单的方法分享给大家。

图片：360截图20130502025715993.png

先要搞清楚怎么在模板中插入php代码，方法很简单

复制代码

在末尾回车后加上下面的代码

复制代码

什么意思？判断：如果含有子菜单，havechild的值为navMore。

第二步：为含有子菜单的一级菜单适配样式，并列出其二级菜单。

依然是在本文件中，找到下面的代码：

复制代码

将其替换为下面的代码：

复制代码

这样一来，一级菜单的“.li”就被定义了样式“#navMore”，下面的代码块，是获取子菜单的，大家自己研究理解吧。

第三步：在样式表中加入样式

找到整站风格中的themes/site/default/css/dev/style.css文件
在最底端加上如下代码：

/***下拉菜单***/
.nav li#navMore{ position:relative;display:inline-block;cursor:default;}
.nav li#navMore:hover{}
.nav li#navMore:hover .navMoreUl{display:block;}
.nav li ul.navMoreUl{position:absolute;left:0;top:45px; height:auto; padding:0; background:#2d2d2d;z-index:10; display:none;}
.nav li ul.navMoreUl li{line-height:34px;width:100px;float:left;}
.nav li ul.navMoreUl li:hover{background:none;}
.nav li ul.navMoreUl a{background:none;float: none; line-height:34px;display:block;white-space:nowrap;color:#cecece;font-weight:normal;font-size:12px;height:34px;padding-left:15px;}
.nav li ul.navMoreUl a:hover{background:#111;color:#85b810;text-decoration:none;}