导航标签 · 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