dedecms currentstyle当前导航激活时样式实现方法

时间:2020-05-30 22:35:49 来源:巅峰霸主网 作者:烈火大地 点击:
摘要:dedecms currentstyle实现导航处于激活状态即在该分类下时,该分类的导航显示成一个有背景颜色或特殊的样式,使用dedecms系统自动添加current这个clas即可实现……

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

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

实现要点:

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

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

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,不然可能会出错,如果是一级分类把上面代码中type='son'改为type='top'即可。

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;}

重点是current这个标签,一定要写,不然出不来效果哦。

(责任编辑:陆柏熺)
相关分类: dedecms
评价:
用户名: 验证码: 看不清?点击更换

相关内容推荐

关注站长自媒体 获取更多优质内容

2019-2020 ©巅峰霸主网 京ICP备12023415号-2
返回顶部