我需要使用less做一个很普通的菜单,需要实现如下效果:
在某版面下面,某个菜单就要高亮。
比如sf菜单
如果我在问答版块下面,问答这个menu就需要高亮。
之前的实现方式是 想在这个菜单外面的一个容器上加一个class 比如 wenda
那么最终实现就是
.wenda .wenda {
background: ...
}
.wenzhang .wenzhang {
background: ...
}
现在想使用less的循环功能实现,请尽量优雅。非常感谢。
@items: wenda wenzhang huodong biaoqian bangdan;
@items-len: length(@items);
.create-menus(@items-len);
.create-menus(@n,@i:1) when (@i=<@n){
@menu: extract(@items,@i);
@{menu} @{menu}{
background: '...'
}
.create-menus(@n,(@i+1))
}
但是你的需求一般来说不这么实现
使用额外的类来标记菜单的高亮是常用的方法
<li class="menu__item active">
<a href="#" >问答</a>
</li>
<li class="menu__item">
<a href="#" >文章</a>
</li>
.active{
background-color: #3F4F49;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。