模板结构

一般情况下，模板的结构如下(具体代码见/html/index.html)。

代码片段

<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="navbar-header">
        ......
    </div>
    <div class="navbar-container container-fluid">
        ......
    </div>
</nav>

内容(.site-page)

<main class="site-page">
    <div class="page-container" id="admui-pageContent">
        ......
    </div>
</main>

菜单(.site-menubar)

<nav class="site-menubar">
    <div class="site-menubar-body">
        <div class="tab-content height-full" id="admui-navTabs">
            <div class="tab-pane animation-fade height-full active" id="admui-navTabsItem-1" role="tabpanel">
                <div>
                    <ul class="site-menu">
                        <li class="site-menu-category">二级菜单</li>
                        <li class="site-menu-item has-sub">
                            <a href="javascript:;">
                                <i class="site-menu-icon fa-bars" aria-hidden="true"></i><span class="site-menu-title">三级菜单</span><span class="site-menu-arrow"></span>
                            </a>
                            <ul class="site-menu-sub">
                                <li class="site-menu-item">
                                    <a class="animsition-link" href="/examples/menu.html">
                                        <span class="site-menu-title">四级菜单</span>
                                    </a>
                                </li>
                                <li class="site-menu-item has-sub">
                                    <a href="javascript:;">
                                        <span class="site-menu-title">四级菜单</span><span class="site-menu-arrow"></span>
                                    </a>
                                    <ul class="site-menu-sub">
                                        <li class="site-menu-item">
                                            <a class="animsition-link" href="/examples/menu.html">
                                                <span class="site-menu-title">五级菜单</span>
                                            </a>
                                        </li>
                                        ......
                                    </ul>
                                </li>
                                ......
                            </ul>
                        </li>
                        ......
                    </ul>
                </div>
            </div>
            ......
        </div>
        ......
    </div>
</nav>

如果算上导航条，Admui 共支持5级菜单。

布局相关

Admui包含了几种可选布局：

默认布局

默认布局提供快速响应的菜单栏，在页面 js 未加载完成时，您可以在<html>标签上添加class="css-menubar"来调用菜单样式。

<html class="no-js css-menubar" lang="zh-cn">
    ......
</html>

菜单折叠

如果您需要菜单默认是折叠的，您需要移除<html>标签上的class="css-menubar"，同时在<body>标签上添加class="site-menubar-fold site-menubar-keep"。示例代码如下：

<body class="site-menubar-fold site-menubar-keep" data-auto-menubar="false">
    ......
</body>

菜单展开

如果您需要菜单默认是展开的，您需要移除<html>标签上的class="css-menubar"，同时在<body>标签上添加class="site-menubar-unfold site-menubar-keep"。示例代码如下：

<body class="site-menubar-unfold site-menubar-keep">
    ......
</body>

⟨ 上一页：入口文件下一页：Hello world ⟩