SDCMS采用IF判断做到菜单高亮效果的具体方法

最近忙于给客户定制了几套SDcms，于是对SDCMS程序有所熟悉，今天在这里先分享下载SDCMS中导航栏菜单调用中如果让当前栏目菜单高亮，之后CMSYOU将陆续与大家分享一些SDCMS的细节技巧！

在SDCMS1.3版本中，导航菜单栏的调用代码是：

<div id="menu" class="c">
<ul class="menu">
  <dt class="l"></dt>
  <dt><a href="{sdcms:root}" onfocus="this.blur()">网站首页</a></dt>
  {sdcms:loop top="10" field="id,title,ClassUrl" table="sd_class" where="followid=0" order="ordnum,id"}
  <dt class="m"></dt>
  <dt><a href="{link}" onfocus="this.blur()">{title}</a></dt>
  {/sdcms:loop}
  <dt class="r"></dt>
</ul>
</div>

如果用UL、LI标签，那么是：

<div id="menu">
    <ul class="fl">
        <li><a href="{sdcms:root}">首 页</a></li>
{sdcms:loop top="10" field="id,title,ClassUrl" table="sd_class" where="followid=0" order="ordnum,id"}
        <li><a href="{link}">{title}</a></li>
{/sdcms:loop}
    </ul>
</div>

可以看出，我们可以定制li或者a标签的class，做到当前栏目高亮。在这里，就用到IF判断语句：

 [if {sdcms:class_id}={id}]style="font-weight:bold;"[end if]

加上之后，代码变为下面的代码就好了！

<div id="menu">
    <ul class="fl">
        <li><a href="{sdcms:root}">首 页</a></li>
{sdcms:loop top="10" field="id,title,ClassUrl" table="sd_class" where="followid=0" order="ordnum,id"}
        <li[if {sdcms:class_id}={id}] class="selected"[end if]><a href="{link}">{title}</a></li>
{/sdcms:loop}
    </ul>
</div>

具体效果抓图：

当然，你要在css中间定义好class="selected"的CSS样式。在这里，CMSYOU分享具体的CSS代码：

#menu{ width:100%; padding:0px; margin:0 auto; font-size:14px; height:37px; background:url(images/menu_bg.jpg) no-repeat center 0; margin-top:0px; }

#menu a{ color:#FFFFFF; font-weight:600; text-decoration:none;}

#menu a:hover{ text-decoration:none;}

#menu li{ height:33px; line-height:33px; display:inline; float:left; text-align:center; padding-left:15px; padding-right:15px;}

#menu ul.fl{ width:960px;padding:0px; margin:0 auto; }

#menu ul.fl span{ position:absolute; top:-5px; left: 374px; }

#menu ul.fl li{ background:url(images/menu_bg_xian.jpg) no-repeat right center;}

#menu ul.fl li:hover{ background:url(images/menu_bg_yell.jpg) repeat-x; height:33px; color:#000000; display:block;}

#menu ul.fl li.selected{ background:url(images/menu_bg_yell.jpg) repeat-x; height:33px; color:#fff; display:block;}

演示地址：https://demo.hkradar.cn/demo/tech/sdcms/menu/。

欢迎大家尝试探讨！如需具体的图片文件，请加入CMS探讨交流QQ群“346494585”，在群分享里边有可下载！