導航標簽用于生成前臺導航,相關的有三個標簽`navigation`,`navigationMenu`,`navigationFolder`,三個必須聯合使用
## navigation標簽
| 標簽名 | 作用 | 包含屬性 |
| --- | --- | --- |
| navigation | 導航標簽 | nav-id,root,id,class |
標簽屬性:
| 標簽屬性名 | 含義 |
| --- | --- |
| nav-id |后臺導航 id,非必須 |
| root |生成導航根節點的標簽名,默認為 ul,如果為空字符串表示根節點自己創建 |
| id |生成導航根節點的 dom 屬性 id ,root 不為空時有效 |
| class |生成導航根節點的 dom 屬性 class,root 不為空時有效 |
## navigationMenu標簽
| 標簽名 | 作用 | 包含屬性 |
| --- | --- | --- |
| navigationMenu | 導航菜單標簽 | root,class|
標簽屬性:
| 標簽屬性名 | 含義 |
| --- | --- |
| root |生成導航菜單根節點的標簽名,默認為 li |
| class |生成導航菜單根節點的 dom 屬性 class |
## navigationFolder標簽
| 標簽名 | 作用 | 包含屬性 |
| --- | --- | --- |
| navigationFolder | 導航菜單標簽(包含子菜單) | root,class,dropdown,dropdown-class |
標簽屬性:
| 標簽屬性名 | 含義 |
| --- | --- |
| root |生成導航菜單根節點的標簽名,默認為 li |
| class |生成導航菜單根節點的 dom 屬性 class ,默認為dropdown |
| dropdown |生成導航菜單下拉菜單根節點的標簽名 ,默認為 ul |
| dropdown-class |生成導航菜單下拉菜單根節點的 dom 屬性 class,默認為 dropdown-menu|
* * * * *
## 幾個常見的官方demo
創建一個bootstrap 風格的導航
```
<!--后臺導航 id 為1-->
<navigation nav-id="1" root="ul" id="main-navigation" class="nav navbar-nav navbar-nav-custom">
<navigationMenu root="li" class="menu-item menu-item-level-{$level}">
<a href="{$menu.href|default=''}" target="{$menu.target|default=''}">{$menu.name|default=''}</a>
</navigationMenu>
<navigationFolder root="li" class="dropdown dropdown-custom dropdown-custom-level-{$level}" dropdown="ul"
dropdown-class="dropdown-menu dropdown-menu-level-{$level}">
<a href="#" class="dropdown-toggle dropdown-toggle-{$level}" data-toggle="dropdown">
{$menu.name|default=''}<span class="caret"></span>
</a>
</navigationFolder>
</navigation>
```
完全自己定義導航根節點
```
<ul id="main-navigation" class="nav navbar-nav navbar-nav-custom">
<navigation nav-id="1" root="">
<navigationMenu root="li" class="menu-item menu-item-level-{$level}">
<a href="{$menu.href|default=''}" target="{$menu.target|default=''}">{$menu.name|default=''}</a>
</navigationMenu>
<navigationFolder root="li" class="dropdown dropdown-custom dropdown-custom-level-{$level}" dropdown="ul"
dropdown-class="dropdown-menu dropdown-menu-level-{$level}">
<a href="#" class="dropdown-toggle dropdown-toggle-{$level}" data-toggle="dropdown">
{$menu.name|default=''}<span class="caret"></span>
</a>
</navigationFolder>
</navigation>
</ul>
```
自定義還是默認主要是看navigation標簽的 root 屬性是是否為空的
## 視頻講解
https://chuanke.baidu.com/v4472461-241676-1821401.html