模板结构

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

代码片段

头部(.site-navbar)

<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>
<div class="page-loading vertical-align text-center">
<div class="page-loader loader-default loader vertical-align-middle" data-type="default"></div>
</div>
</main>

菜单(.site-menubar)

如果您使用不同的主题,.site-menubar的内容可能会有所不同

<nav class="site-menubar">
<div class="site-menubar-body">
<div class="tab-content h-full" id="admui-navTabs">
<div class="tab-pane animation-fade h-full active" id="admui-navTabsItem-2" role="tabpanel">
<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>
</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>

使用标签页

如果需要使用标签页,请在<body>标签上添加class="site-contabs-open"。示例代码如下:

<body class="site-contabs-open">
......
</body>