導航標簽 · ThinkCMF5開發手冊

導航標簽用于生成前臺導航,相關的有三個標簽`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 |生成導航菜單根節點的標簽名 | | class |生成導航菜單根節點的 dom 屬性 class | > 5.0.180123版本后root 不設置表示完全自定義導航菜單根節點 ## navigationFolder標簽 | 標簽名 | 作用 | 包含屬性 | | --- | --- | --- | | navigationFolder | 導航菜單標簽(包含子菜單) | root,class,dropdown,dropdown-class | 標簽屬性: | 標簽屬性名 | 含義 | | --- | --- | | root |生成導航菜單根節點的標簽名,默認為 li | | class |生成導航菜單根節點的 dom 屬性 class ,默認為dropdown | | dropdown |生成導航菜單下拉菜單根節點的標簽名 ,默認為 ul | | dropdown-class |生成導航菜單下拉菜單根節點的 dom 屬性 class,默認為 dropdown-menu| * * * * * ## 幾個常見的官方demo > 創建一個bootstrap 風格的導航 ```  <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 屬性是是否為空的 ## 視頻講解 http://study.163.com/course/courseLearn.htm?courseId=1005213008&utm_campaign=commission&utm_source=cp-400000000187021&utm_medium=share#/learn/video?lessonId=1051910616&courseId=1005213008