layui本身是個非常棒的前段框架，自帶的也有側邊欄功能，不過不 支援多級，子選單也沒有縮排，因此，我做了些調整。

樹形選單是通過Django的自定義標籤渲染的。自定義標籤程式碼如下：

def is_ancestor(current, menu):
    """
    menu是否current的祖先
    :param current: 當前選單
    :param menu:
    :return: bool
    """
    parent_id = current.parent_id
    while parent_id != 0:
        if parent_id == menu.unique_id:
            return True
        try:
            parent_id = Menu.objects.get(pk=parent_id).parent_id
        except Menu.DoesNotExist:
            return False
    return current.unique_id == menu.unique_id


@register.simple_tag(takes_context=True)
def side_bar(context):
    root_menus = context["root_menus"]
    current_menu = context["current_menu"]
    request = context["request"]
    html = '<ul class=" layui-nav layui-nav-tree">'
    lists = []
    for menu in root_menus:
        # menu為根選單，也就是一級選單
        menu = ObjectDict(menu)
        # 確保右對齊，每個字的預設寬度為12px
        arrow_distance = 120 - len(menu.name) * 12
        url = menu.url or "javascript:;"
        if url == request.path or is_ancestor(current_menu, menu):
            extra_cls = "layui-nav-itemed"
            arrow_icon = ""  # 摺疊的箭頭
        else:
            extra_cls = ""
            arrow_icon = ""  # 展開的箭頭
        if menu.sub_menus:  # 有子選單才會有箭頭
            arrow = '<i class="layui-icon" style="font-size:15px;margin-left:{distance}px;">{code}</i>'.format(
                distance=arrow_distance, code=arrow_icon)
        else:
            arrow = ''
        # 一級選單有兩個圖示，最左側的圖示代表的是選單的含義，最右側的圖示代表的是箭頭
        # 二級及以下菜單隻有箭頭圖示
        li = '''<li class="layui-nav-item {extra_cls}">
        <a href="{url}">
        <i class="layui-icon" style="font-size:20px; margin-right:10px;">{icon}</i>
        {name}{arrow}</a>
        {sub_menus}
        </li>'''.format(extra_cls=extra_cls, name=menu.name,
                        icon=menu.icon_code, url=url, arrow=arrow,
                        sub_menus=render_sub_menus(current_menu, request, menu))
        lists.append(li)
    html += "\n".join(lists) + '</ul>'
    # mark_safe確保html能被正確渲染
    return mark_safe(html)


def render_sub_menus(current_menu, request, menu, level=1):
    """
    此函式遞迴渲染子選單
    :param current_menu: 當前選單
    :param request:
    :param menu: 渲染menu的子選單
    :param level: 為了縮排
    :return: 返回子選單渲染結果
    """
    if not menu.sub_menus:  # 遞迴終止
        return ""
    if not is_ancestor(current_menu, menu):  # 控制選單是否展開
        display = "none"
    else:
        display = "block"
    html = '<dl class="layui-nav-child" style="display:{}">\n'.format(display)
    for m in menu.sub_menus:
        m = ObjectDict(m)
        url = m.url or "javascript:;"
        arrow_distance = 120 - len(m.name)*12
        if url == request.path:
            extra_cls = "layui-this"  # 此樣式加亮當前選單背景色
            arrow_icon = ""
        elif is_ancestor(current_menu, m):
            extra_cls = "layui-nav-itemed"  # 此樣式開啟選單
            arrow_icon = ""
        else:
            extra_cls = ""
            arrow_icon = ""
        if m.sub_menus:
            arrow = '<i class="layui-icon" style="font-size:15px;margin-left:{distance}px;">{code}</i>'.format(
                distance=arrow_distance, code=arrow_icon)
        else:
            arrow = ''
        cls = 'class="active"' if m.unique_id == current_menu.unique_id else ''
        li = '''\t<dd class="layui-nav-item {extra_cls}"><a href="{url}" style="text-indent:{indent}px;" {cls}>
        {name}{arrow}</a>
        {sub_menus}</dd>\n'''.format(url=url, indent=level*30, cls=cls, name=m.name,
                                     extra_cls=extra_cls, arrow=arrow,
                                     sub_menus=render_sub_menus(current_menu, request, m, level+1))
        html += li
    html += "</dl>\n"
    return html
 

不過此時還沒有點選選單開啟、收起選單的功能。使用如下JavaScript程式碼即可實現此功能。

$(".layui-nav-item a").click(function () {
            var uncles = $(this).parent().siblings();
            $.each(uncles, function (i, uncle) {
                var brothers = $(uncle).children();
                if (brothers.length >= 2){
                    $(brothers[1]).css("display", "none");
                    var b_icons = $(brothers[0]).children();
                    var b_arrow;
                    if (b_icons.length >= 2){
                        b_arrow = $(b_icons[1]);
                    }else {
                        b_arrow = $(b_icons[0]);
                    }
                    b_arrow.html("")
                }
            });
            var children = $(this).parent().children();
            if (children.length >= 2){
                var icons = $(children[0]).children();
                var arrow;
                if (icons.length >= 2){
                    arrow = $(icons[1]);
                }else{
                    arrow = $(icons[0]);
                }
                children = $(children[1]);
                if (children.css("display") == "none"){
                    children.css("display", "block");
                    arrow.html("")
                }else {
                    children.css("display", "none");
                    arrow.html("")
                }
            }
        });
 

layui提供的圖示很有限，擴充套件圖示功能參見：http://fly.layui.com/jie/5122/