本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

在PbootCMS开发中，导航栏是网站的核心组件，而{pboot:nav}标签是实现导航菜单最核心、最高效的标签——无需手动编写循环代码，即可快速输出一级、二级甚至多级导航菜单，同时支持当前页面菜单高亮、hover样式控制，适配各类网站的导航需求。本文全程实战，从基础用法到高级样式控制，手把手教你玩转{pboot:nav}标签，新手也能快速上手，所有代码可直接复制到模板中使用。

适用场景：PbootCMS网站导航栏开发（PC端/移动端通用）、多级菜单（一级导航+二级子菜单）开发、导航高亮样式定制；适配PbootCMS所有稳定版本，兼容官方默认模板及自定义模板，无需二次开发核心代码，仅需修改标签参数和CSS样式。

一、{pboot:nav}标签基础认知（必学）

{pboot:nav}是PbootCMS内置的导航专用标签，核心作用是“自动读取后台栏目数据，生成导航菜单”，支持多级菜单输出、样式自定义、高亮控制，无需手动拼接HTML代码，大幅提升开发效率。

1.1 标签核心特性

• 自动关联后台栏目：导航菜单数据直接来自【栏目管理】，添加、修改、删除栏目后，导航会自动同步更新，无需手动修改模板。

• 支持多级菜单：默认支持一级、二级菜单，通过参数配置可实现三级菜单输出，适配企业站、门户站等多栏目场景。

• 自带高亮逻辑：无需额外编写JS，标签可自动识别当前访问栏目，为当前栏目菜单添加高亮类，实现“当前页导航高亮”效果。

• 样式完全可控：可通过标签参数自定义HTML结构，配合CSS样式，实现任意风格的导航（如横向导航、纵向导航、下拉导航）。

1.2 标签基础语法

{pboot:nav}标签为闭合标签，核心语法格式如下，所有参数均为可选，新手可先使用默认参数，再逐步自定义：

{pboot:nav 
    type=1<!-- 菜单类型：1=横向导航，2=纵向导航，默认1 -->
    level=2<!-- 显示级数：1=仅一级，2=一级+二级，3=三级，默认2 -->
    cid=0    <!-- 起始栏目ID：0=所有顶级栏目，指定cid则从该栏目开始输出，默认0 -->
    class=nav  <!-- 导航外层容器class，用于CSS样式控制，默认nav -->
    current=current  <!-- 当前页高亮class，默认current -->
    subClass=subnav  <!-- 二级菜单外层容器class，默认subnav -->
}
<!-- 菜单内容模板（可自定义HTML结构） -->
<a href="[nav:url]" class="[nav:current]"&gt;[nav:name]&lt;/a&gt;
<!-- 二级菜单模板（若level≥2，需添加该模板） -->
{if [nav:haschild]}  <!-- 判断当前栏目是否有子栏目 -->
&lt;div class="[nav:subClass]"&gt;
    {nav:child}  <!-- 循环输出二级子栏目 -->
    <a href="[nav:child:url]" class="[nav:child:current]">[nav:child:name]</a>
    {/nav:child}
</div>
{/if}
{/pboot:nav}

注意1：标签内的参数需用空格分隔，参数值无需加引号（如level=2，而非level="2"），否则会导致标签失效。

注意2：菜单内容模板中的【[nav:url]】【[nav:name]】是内置变量，分别对应栏目路径和栏目名称，不可拼写错误，否则无法正常输出数据。

注意3：[nav:current]变量会自动判断当前栏目，若为当前访问栏目，输出标签参数中“current”的值（默认current），否则为空，用于高亮样式控制。

二、实战1：多级菜单输出（一级+二级，最常用）

最常见的导航场景是“一级导航+二级下拉菜单”，比如企业站的“首页、关于我们、产品中心、新闻动态、联系我们”，其中“产品中心”“新闻动态”包含二级子栏目。下面通过实战案例，实现该场景的菜单输出，步骤清晰可直接复用。

2.1 步骤1：后台栏目准备（必做）

导航菜单数据来自后台栏目，需先在后台创建对应栏目及子栏目，确保数据正确，步骤如下：

1. 登录PbootCMS后台，进入【栏目管理】→【添加栏目】，创建顶级栏目（一级导航），如“首页、关于我们、产品中心、新闻动态、联系我们”，栏目类型选择“栏目”，状态设置为“启用”。

2. 为需要二级子栏目的顶级栏目（如“产品中心”“新闻动态”）添加子栏目：选中“产品中心”，点击【添加子栏目】，创建“产品1、产品2、产品3”等二级栏目，状态同样设置为“启用”。

3. 排序：通过栏目列表的“排序”字段，调整一级、二级栏目的显示顺序（数字越小，显示越靠前），保存后，导航菜单会按排序顺序输出。

注意：若二级菜单无法显示，先检查二级栏目是否“启用”，且父栏目ID是否正确（子栏目父ID需对应顶级栏目ID），同时确保标签中level参数设置为2（默认即为2）。

2.2 步骤2：编写{pboot:nav}标签代码

打开PbootCMS模板文件（通常是header.html，导航栏一般在头部），找到导航栏对应的位置，删除原有默认导航代码，粘贴以下代码（已优化HTML结构，适配下拉菜单）：

<!-- 导航栏外层容器 -->
<nav class="header-nav">
    {pboot:nav 
        type=1 
        level=2 
        class="nav-list" 
        current="active" 
        subClass="subnav-list"
    }
    <li class="nav-item">
        <a href="[nav:url]" class="[nav:current] nav-link"&gt;[nav:name]&lt;/a&gt;
        <!-- 二级菜单 -->
        {if [nav:haschild]}
        <ul class="[nav:subClass]">
            {nav:child}
            <li class="subnav-item">
                <a href="[nav:child:url]" class="[nav:child:current] subnav-link">[nav:child:name]</a>
            </li>
            {/nav:child}
        </ul>
        {/if}
    </li>
    {/pboot:nav}
</nav>

2.3 代码说明（新手必看）

• 外层<nav class="header-nav">：导航栏整体容器，用于控制导航的整体位置、宽度等样式。

• type=1：设置为横向导航，适合PC端顶部导航；若需要纵向导航（如侧边栏），改为type=2。

• level=2：显示一级+二级菜单，若仅需一级菜单，改为level=1。

• current="active"：当前页高亮class设置为active，后续通过CSS控制高亮样式（可自定义class名称，如current、on等）。

• {if [nav:haschild]}：判断当前一级栏目是否有子栏目，有则显示二级菜单，无则不显示，避免空菜单。

• [nav:child:url]、[nav:child:name]：二级子栏目的路径和名称变量，与一级菜单的变量对应。

三、实战2：高亮样式控制（当前页+hover效果）

导航菜单的核心体验的是“当前页高亮”和“hover下拉”，通过CSS样式配合{pboot:nav}标签的高亮变量，即可实现，无需编写JS代码，下面是实战样式代码，可直接复制到模板的CSS文件中（如css/style.css）。

3.1 基础样式（横向导航，适配PC端）

/* 导航整体样式 */
.header-nav {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 一级菜单列表 */
.nav-list {
    display: flex; /* 横向排列 */
    justify-content: center; /* 水平居中 */
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 一级菜单项 */
.nav-item {
    position: relative; /* 为二级菜单定位做准备 */
    margin: 0 20px;
}
/* 一级菜单链接 */
.nav-link {
    display: block;
    height: 60px;
    line-height: 60px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    padding: 0 10px;
    transition: all 0.3s;
}
/* 当前页高亮样式（对应标签中current="active"） */
.nav-link.active {
    color: #2f80ed; /* 高亮颜色，可自定义 */
    border-bottom: 2px solid #2f80ed; /* 底部高亮线 */
}
/* 一级菜单hover效果 */
.nav-item:hover .nav-link {
    color: #2f80ed;
}
/* 二级菜单样式（下拉效果） */
.subnav-list {
    position: absolute;
    top: 60px; /* 与一级菜单高度一致，避免间隙 */
    left: 0;
    width: 180px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 0;
    padding: 10px 0;
    list-style: none;
    display: none; /* 默认隐藏 */
    z-index: 999; /* 确保下拉菜单在最上层，不被其他元素遮挡 */
}
/* 一级菜单hover时，显示二级菜单 */
.nav-item:hover .subnav-list {
    display: block;
}
/* 二级菜单项 */
.subnav-item {
    padding: 0 15px;
}
/* 二级菜单链接 */
.subnav-link {
    display: block;
    height: 40px;
    line-height: 40px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}
/* 二级菜单hover效果 */
.subnav-item:hover .subnav-link {
    color: #2f80ed;
    padding-left: 5px; /* 轻微偏移，提升交互体验 */
}
/* 二级菜单当前页高亮 */
.subnav-link.active {
    color: #2f80ed;
    font-weight: 600;
}

3.2 样式说明与自定义

• 当前页高亮：通过.nav-link.active和.subnav-link.active控制，可修改color（文字颜色）、border-bottom（底部线条）、background（背景色）等，适配自己的网站风格。

• 下拉效果：通过position: absolute定位二级菜单，默认隐藏（display: none），一级菜单hover时显示（display: block），z-index: 999确保下拉菜单不被其他元素遮挡。

• 响应式适配：若需要适配移动端，可添加媒体查询（@media），将横向导航改为纵向导航，二级菜单改为展开式，后续可补充移动端适配代码。

注意1：CSS样式中的class名称，需与{pboot:nav}标签中的class、subClass参数一致（如标签中subClass="subnav-list"，CSS中对应.subnav-list），否则样式无法生效。

注意2：若当前页高亮不生效，检查标签中current参数是否正确，且页面是否为栏目页（首页需单独设置，下文会讲解）。

四、进阶技巧（解决新手常见问题）

4.1 首页导航高亮设置

默认情况下，{pboot:nav}标签的高亮逻辑仅对“栏目页”生效，首页（index.html）的“首页”菜单不会自动高亮，需通过以下方法解决：

<!-- 首页导航单独处理，添加判断 -->
<nav class="header-nav">
    {pboot:nav 
        type=1 
        level=2 
        class="nav-list" 
        current="active" 
        subClass="subnav-list"
    }
    <li class="nav-item"&gt;
        <!-- 首页判断：若为首页，手动添加active类 -->
        {if $page == 'index'}
        <a href="[nav:url]" class="nav-link active">[nav:name]</a>
        {else}
        <a href="[nav:url]" class="[nav:current] nav-link">[nav:name]</a>
        {/if}
        <!-- 二级菜单（不变） -->
        {if [nav:haschild]}
        <ul class="[nav:subClass]">
            {nav:child}
            <li class="subnav-item">
                <a href="[nav:child:url]" class="[nav:child:current] subnav-link">[nav:child:name]</a>
            </li>
            {/nav:child}
        </ul>
        {/if}
    </li>
    {/pboot:nav}
</nav>

说明：{$page == 'index'}是PbootCMS内置判断，用于识别当前页面是否为首页，若是，则手动为“首页”菜单添加active类，实现首页高亮。

4.2 三级菜单输出（进阶需求）

若网站需要三级菜单（如“产品中心→产品分类→具体产品”），只需修改标签level参数为3，并添加三级菜单模板，代码示例如下：

{pboot:nav 
    type=1 
    level=3  <!-- 改为3，显示三级菜单 -->
    class="nav-list" 
    current="active" 
    subClass="subnav-list"
    subSubClass="subsubnav-list"  <!-- 三级菜单class，新增参数 -->
}
<li class="nav-item">
    <a href="[nav:url]" class="[nav:current] nav-link"&gt;[nav:name]&lt;/a&gt;
    <!-- 二级菜单 -->
    {if [nav:haschild]}
    <ul class="[nav:subClass]">
        {nav:child}
        <li class="subnav-item">
            <a href="[nav:child:url]" class="[nav:child:current] subnav-link">[nav:child:name]</a>
            <!-- 三级菜单 -->
            {if [nav:child:haschild]}  <!-- 判断二级栏目是否有子栏目 -->
            <ul class="[nav:subSubClass]">
                {nav:child:child}  <!-- 循环输出三级子栏目 -->
                <li class="subsubnav-item">
                    <a href="[nav:child:child:url]" class="[nav:child:child:current] subsubnav-link">[nav:child:child:name]</a>
                </li>
                {/nav:child:child}
            </ul>
            {/if}
        </li>
        {/nav:child}
    </ul>
    {/if}
</li>
{/pboot:nav}

说明：新增subSubClass参数，用于定义三级菜单的class，同时通过{nav:child:haschild}判断二级栏目是否有子栏目，{nav:child:child}循环输出三级菜单，配合对应的CSS样式即可实现三级下拉效果。

4.3 隐藏指定栏目（无需删除后台栏目）

若后台某些栏目不需要在导航中显示（如“测试栏目”），无需删除栏目，可通过标签参数cid排除，或在模板中添加判断隐藏，示例如下：

// 方法1：通过cid参数排除（推荐，直接不输出该栏目）
{pboot:nav cid="1,2,3" level=2}  // 仅输出cid为1、2、3的栏目，其他栏目不显示
// 方法2：模板中添加判断，隐藏指定cid的栏目
{pboot:nav level=2}
<li class="nav-item">
    {if [nav:cid] != 5}  // 隐藏cid为5的栏目
    <a href="[nav:url]" class="[nav:current] nav-link"&gt;[nav:name]&lt;/a&gt;
    {/if}
    <!-- 二级菜单 -->
    {if [nav:haschild] && [nav:cid] != 5}
    <ul class="[nav:subClass]">
        {nav:child}
        <li class="subnav-item">
            <a href="[nav:child:url]" class="[nav:child:current] subnav-link">[nav:child:name]</a>
        </li>
        {/nav:child}
    </ul>
    {/if}
</li>
{/pboot:nav}

五、常见问题汇总（避坑指南）

问题1：{pboot:nav}标签不输出菜单，页面显示空白？

解决方法：1. 检查后台栏目是否“启用”，且父栏目ID设置正确；2. 检查标签语法，确保参数无引号、变量拼写正确（如[nav:url]不可写成[nav:Url]，区分大小写）；3. 检查标签是否闭合（{pboot:nav}和{/pboot:nav}必须成对出现）；4. 清除网站缓存（后台【系统设置】→【清除缓存】）后重试。

问题2：二级菜单无法显示，仅显示一级菜单？

解决方法：1. 检查标签level参数是否为2（默认2，若改为1则不显示二级菜单）；2. 检查二级栏目是否“启用”，且父栏目ID对应正确；3. 检查{if [nav:haschild]}判断是否存在，且模板结构正确（二级菜单模板需放在该判断内）。

问题3：当前页导航不高亮，active类未添加？

解决方法：1. 检查标签current参数是否正确（如current="active"），且CSS中对应class样式存在；2. 首页需添加{$page == 'index'}判断，手动添加active类；3. 检查当前页面是否为栏目页（若为自定义页面，需手动设置高亮，可通过URL参数判断）。

问题4：二级菜单被其他元素遮挡，显示不全？

解决方法：为二级菜单添加z-index: 999（确保在最上层），同时检查父元素（.nav-item）是否设置position: relative（二级菜单position: absolute需要依赖父元素定位）。

问题5：导航菜单横向排列错乱，换行显示？

解决方法：检查.nav-list的display: flex是否生效，若不生效，可能是浏览器兼容问题，可添加兼容代码（如display: -webkit-box; display: -ms-flexbox;），同时调整.nav-item的margin（减少间距），确保所有一级菜单能在一行显示。

六、总结

{pboot:nav}标签是PbootCMS导航开发的核心工具，核心优势是“自动同步后台栏目、无需手动循环、自带高亮逻辑”，实战中只需掌握3个关键点：一是正确配置标签参数（type、level、current等），二是编写合理的HTML模板结构，三是配合CSS样式实现高亮和下拉效果。

本文的代码可直接复制复用，新手可先按教程完成一级+二级菜单的输出和高亮控制，再根据自身需求，调整样式、添加三级菜单或隐藏指定栏目。后续开发中，无论栏目如何修改，只需在后台调整，导航菜单会自动同步，大幅提升开发和维护效率。

若需要适配移动端导航（如汉堡菜单），可在本文代码基础上添加媒体查询和简单JS，实现移动端下拉展开效果，后续可补充相关实操。