dedecms currentstyle制作当前分类激活样式

dedecms currentstyle制作当前分类激活样式

需要实现dedecms的一个一级分类下的三个小分类,点击其中一个时显示特定的样式,就是当处于该分类下的时候,分类样式添加currentstyle显示想要的效果。

效果如下图所示:我实现的是一级分类资讯下面的3个小分类,当浏览的分类处于某一个分类下时,该分类就显示橙色的背景,这个效果看起来很舒服,对用户体验很好。


dedecms currentstyle演示

实现要点:

一、dedecms调用当前分类下所有子分类,使用dede:channel son来调用。

二、结合bootstrap的ul标签和自定义css实现,因为我的是响应式布局,所以还需要考虑到手机端的显示问题。

01、HTML代码

<div class=”container-xl my-3″><div class=”row”>
<div class=”bg-white shadow-sm col-12 py-3 zx-list bg-22″>
<ul class=”list-ul”>
{dede:channel type=’son’ row=’4′ currentstyle=”
<li><a class=’current’ href=’~typelink~’ ~rel~>~typename~</a></li>”}
<li><a href='[field:typeurl/]’ [field:rel/]>[field:typename/]</a></li>
{/dede:channel} </ul></div></div></div>


代码li上面不能添加class,我加了发现有问题,可能是dedecms默认currentstyle没有格式,如果需要改变li的样式可以自定义一个css来实现。

02、CSS代码部分

.bg-22{background: url(“/images/bj-shan.png”) no-repeat;background-position-x: right;background-position-y: bottom;background-size: contain;}
.list-ul{list-style: none;margin-bottom: 0 !important;padding: 0 0;}
.list-ul li{display: inline}
.list-ul li a{white-space: nowrap;padding: 1.1rem}
.list-ul li a:hover,.list-ul li a:active{color: #fff;background: #c1962f;text-decoration: none}
.current{background: #af8a33;padding: 1.1rem;color: #fff;}


添加完HTML代码之后需要单独写一个名称为“current”的css,对a标签赋予背景等颜色。

其中bootstrap 4.4版本,dedecms5.7 sp2,如果版本相同可以将代码拷贝直接使用,如果不是使用bootstrap只需要修改对应的CSS即可,HTML代码中的type=’son’指的是调用某个子分类下的栏目,如果要调用一级分类,即在导航上使用把son改为top即可。

分享到 :
相关推荐

发表评论

登录... 后才能评论