首页 > 使用less做一个菜单

使用less做一个菜单

我需要使用less做一个很普通的菜单,需要实现如下效果:

在某版面下面,某个菜单就要高亮。

比如sf菜单

如果我在问答版块下面,问答这个menu就需要高亮。

之前的实现方式是 想在这个菜单外面的一个容器上加一个class 比如 wenda
那么最终实现就是

css.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;
}
【热门文章】
【热门文章】