简单的菜单 一

图标参考 :

　　https://www.runoob.com/font-awesome/fontawesome-tutorial.html

侧边栏html:

    <#-- 侧边栏 -->
    <div data-options="region:'west',noheader:true,split:false,bodyCls:'west_body'" style="width:250px;">
        <ul>
            <li>
                <i class="fa fa-folder-open-o"></i>
                <a class="menu_item_text">业务</a>
                <ul>
                    <li><i class="fa fa-camera"></i><a class="menu_item_text">视频录制</a></li>
                    <li><i class="fa fa-film"></i><a class="menu_item_text">视频回放</a></li>
                </ul>
            </li>
            <li>
                <i class="fa fa-folder-open-o"></i>
                <a class="menu_item_text">管理</a>
                <ul>
                    <li><i class="fa fa-code-fork"></i><a class="menu_item_text">节点管理</a></li>
                    <li><i class="fa fa-qrcode"></i><a class="menu_item_text">产品管理</a></li>
                </ul>
            </li>
        </ul>
    </div>

(备注:外层div使用的是easyui,仅作参考)

CSS样式:

.west_body ul, 
.west_body li {
    list-style: none;
}

 图例:

 

posted on 2021-01-05 09:50  hi-gdl  阅读(71)  评论(0)  编辑  收藏  举报

导航