PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > ThinkCMF

导航标签制作

管理员 2024-12-15
ThinkCMF
90

导航标签用于生成前台导航,相关的有三个标签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 属性是是否为空的



希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部