蝉知如何自定义菜单列表

在使用蝉知系统搭建网站时，我们经常遇到在页面侧栏添加菜单列表的需求，比如内容板块、产品种类等。这些需求蝉知都已提供了相应的区块类帮助用户实现。但有时我们可能会碰到个别的需求，比如文章或产品的某一类不想显示，或者我们想自定义一个列表菜单，方便用户跳转。

本文将和大家分享如何自定义一个菜单列表，这里我们是通过添加一个自定义区块，借助ZUI框架来实现。

首先我们新建一个自定义区块，在HTML里填写下面代码：

<ul class="nav nav-primary">  
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单1</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单2</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单3</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单4</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单5</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单6</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单7</a></li>
<li><a href="#"><i class="icon icon-caret-right"></i>&nbsp;&nbsp;&nbsp;列表菜单8</a></li>
</ul>

#blockID li{
    width:100%;
    border:0px;
}
.nav-primary li a{
    border-bottom: 1px solid #ddd!important;
    border-top: 0px solid #ddd!important;
    border-left: 0px solid #ddd!important;
    border-right: 0px solid #ddd!important;
}
.nav-primary li:last-child a {
    border-bottom: 0px solid #ddd!important;
}

图标大家可以自行选择，大家可以参考 ZUI框架。

代码实现非常简单，本文主要是帮助那些没有代码基础的童鞋，实现侧栏自定义菜单列表。

最后看下效果：