前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >PHPCMS v9实现二级下拉菜单的方法

PHPCMS v9实现二级下拉菜单的方法

作者头像
用户2135432
发布2023-10-18 19:02:03
1800
发布2023-10-18 19:02:03
举报
文章被收录于专栏:猛牛哥的博客

1、将.phpcmstemplatesdefaultcontent目录下的header.html打开,把里面

代码语言:javascript
复制
<map>........</map>

  之间的代码用如下代码代替;

代码语言:javascript
复制
<map>
     <ul class="nav-site">
         {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
        <li><a href="{siteurl($siteid)}"><span>首页</span></a></li>
        <li class="line">|</li>
        {loop $data $k $v}
             <li><a href="{$v[url]}">{$v[catname]}
             <!--[if IE 7]><!--></a><!--<![endif]-->
             <!--[if lte IE 6]><table><tr><td><![endif]-->
             <ul>
            {pc:content action="category" catid="$k" num="10" siteid="$siteid" order="listorder ASC"}
                 {loop $data $r}  <li><a href="{$r[url]}">{$r[catname]}</a></li> {/loop}
            {/pc}
             </ul>
           <!--[if lte IE 6]></td></tr></table></a><![endif]-->
           </li>
           <li class="line">|</li>
       {/loop}
   {/pc}
   </ul>
</map>

  2、找到.staticscss目录下的default_blue.css文件(要是换过主题的,自己找主css样式表),打开,找到/* 导航 */的css样式,在其后加上如下css样式;

代码语言:javascript
复制
/*zkadd*/
.nav-site{
list-style:none;}
.nav-site li {position:relative; z-index:200;}
.nav-site ul {visibility:hidden;position:absolute;left:3px;top:30px;}
.nav-site table {position:absolute; top:0; left:0;}
.nav-site li:hover ul,
.nav-site a:hover ul{visibility:visible;}
.nav-site a:hover{background:#3a6ea5;}
.nav-site ul{  }
.nav-site ul a{
background-color:#6184a9;
color:#ffffff;
border-top:1px solid #7aa5d2;
border-bottom:1px solid #4e6a87;
text-decoration:none;}
.nav-site ul li {clear:both;height:28px !important; line-height:28px !important; text-align:center;font-

size:13px;list-style: none; }
.nav-site ul li a{display:block;width:138px;}
.nav-site ul li a:hover{ border-top:1px solid #7aa5d2;
border-bottom:1px solid #4e6a87;
background:#6d93bc;}
/*zkadd-end*/

  ps:Hack过了,能完美支持ie等各个版本,至于颜色样式,有能力的童鞋可以自己改。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-04-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档