侧边栏案例

以前

你必须使用sidebar来创建页面布局。

    <div class="page [secondary] with-sidebar">
        <div class="page-header" />
 
        <div class="page-sidebar" />
 
        <div class="page-region" />
    </div>

侧边栏

使用<ul />定义侧边栏。

    <div class="page-sidebar">
        <ul>
            <li><a>Item</a></li>
            ...
            <li><a>Item</a></li>
        </ul>
    </div>

图标

使用icon-*类名给菜单添加图标。

    <div class="page-sidebar">
        <ul>
            <li><a><i class="icon-cube"></i>Item</a></li>
            ...
        </ul>
    </div>

彩色贴纸

你可以给侧边栏的菜单项创建彩色贴纸。要创建彩色贴纸，只需要给菜单项添加类名sticker。

    <div class="page-sidebar">
        <ul>
            <li class="sticker"><a>Item</a></li>
            ...
        </ul>
    </div>

使用前缀sticker-的类名给彩色贴纸设置颜色。例如: sticker-color-blue

    <div class="page-sidebar">
        <ul>
            <li class="sticker sticker-color-blue"><a>Item</a></li>
            ...
        </ul>
    </div>

二级菜单

你可以在侧边栏创建二级菜单。

    <div class="page-sidebar">
        <ul>
            <li>
                <a>菜单名称</a>
                <ul class="sub-menu">
                ...
                </ul>
            </li>
            ...
        </ul>
    </div>

二级下拉菜单

你也可以使用dropdown创建二菜下拉菜单。

    <div class="page-sidebar">
        <ul>
            <li data-role="dropdown">
                <a>菜单标题</a>
                <ul class="sub-menu sidebar-dropdown-menu">
                ...
                </ul>
            </li>
            ...
        </ul>
    </div>

使用下拉菜单需要在你的页面头部添加dropdown.js。

高亮显示二级菜单

你要高亮显示二菜单，需要添加类名light.

    <div class="page-sidebar">
        <ul>
            <li>
                <a>Item</a>
                <ul class="sub-menu light">
                ...
                </ul>
            </li>
            ...
        </ul>
    </div>