建站帮助

诚信合作, 高质专业!

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

2012-12-12 23:49:00 浏览 我要评论

最近忙于给客户定制了几套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>

具体效果抓图:

SDCMS菜单高亮当然,你要在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;}

演示地址:http://www.cmsyou.com/demo/tech/sdcms/menu/

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

我要收藏
点个赞吧

相关阅读

本月热门

精选推荐

在线客服

扫一扫,关注我们

扫一扫,关注我们