phpcms二级导航菜单修改设置全攻略

你是不是也被导航栏搞晕了？

做网站的朋友都知道。

导航栏是网站的脸面。

老板总喜欢提要求。

“我要加个下拉菜单。”

“这个栏目要放到里面去。”

你点进后台一看。

PHPCMS的设置有点绕。

一级菜单好弄。

二级菜单怎么都不出来。

要么是点了没反应。

要么是排版乱七八糟。

别急，别急着改代码。

很多时候是逻辑没通。

今天咱就掰开了揉碎了讲。

手把手教你改这个设置。

不管你是新手还是老手。

看完这篇就能上手。

保证不让你走弯路。

第一步：先把后台栏目理顺

很多人第一步就走偏。

后台没设好，前台咋显示？

这就像盖房子打地基。

地基歪了，房子肯定塌。

所以，先别乱写代码。

进后台把栏目理清楚。

1. 建好父子关系

打开你的后台管理。

找到“内容”那块。

点进“管理栏目”。

这里就是你的战场。

先建一个父栏目。

比如叫“产品中心”。

这个是一级菜单。

建完了别停。

接着建子栏目。

比如叫“手机”、“电脑”。

关键点来了。

建子栏目的时候。

有个选项叫“上级栏目”。

你得选对。

选“产品中心”。

这样它们就是父子了。

千万别选成“作为顶级栏目”。

选错了，前台就乱了。

结构一定要清晰。

一级套一级，别搞混。

2. 勾选“显示在导航”

这一步是个大坑。

我见过无数人栽在这。

栏目建好了。

刷新前台一看。

啥也没有，空荡荡。

为什么？

因为你没告诉系统。

你要让它显示出来。

回到栏目修改页面。

仔细看每一个选项。

有个复选框。

写着“显示在导航”。

把这俩小框框勾上。

父栏目要勾。

子栏目也要勾。

不勾它，它就隐身。

系统默认是不显示的。

这点一定要记住。

很多找半天Bug的。

最后发现是没勾这个。

这就很搞心态了。

第二步：修改模板标签代码

后台搞定了。

现在该动真格的了。

也就是改模板代码。

别听到代码就头大。

PHPCMS的标签很傻瓜。

复制粘贴就能用。

关键在于改对参数。

1. 找到导航文件

先找到文件在哪。

打开你的FTP工具。

连到服务器。

找到模板文件夹。

一般在 `phpcms/templates` 下。

看你用的是哪个风格。

默认是 `default`。

进去找 `header.html`。

导航栏通常都在这。

把它下载下来。

用编辑器打开。

推荐用 Dreamweaver 或者 VS Code。

别用记事本，会乱码。

改之前先备份一份。

这是个好习惯。

改坏了还能还原。

2. 写上双层循环标签

PHPCMS调导航用 `pc` 标签。

一级菜单要调一次。

二级菜单要再调一次。

这就是所谓的“嵌套”。

外层循环大栏目。

里层循环小栏目。

我给你写个标准代码。

你直接拿去用。

```html {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}

{loop $data $r}
• {$r[catname]} // 这里开始是二级菜单 {pc:content action="category" catid="$r[catid]" num="10" siteid="$siteid" order="listorder ASC"} {if $data}
  {loop $data $v}
  • {$v[catname]}
  {/loop}
  {/if} {/pc} // 二级菜单结束
{/loop}

{/pc} ```

看着有点晕？

我给你解释一下。

第一个 `catid="0"`。

意思是从根目录开始找。

也就是找一级菜单。

第二个 `catid="$r[catid]"`。

这个是关键。

意思是根据当前一级菜单的ID。

去找它下面的儿子。

这样就关联上了。

那个 `{if $data}` 是干嘛的？

这是为了避坑。

如果这个一级菜单没子栏目。

就不显示二级的 `ul` 标签。

不然页面会多出空壳子。

影响布局，不好看。

第三步：CSS样式搞定显示

代码写好了。

传上去刷新看看。

是不是全展开了？

乱七八糟一大片？

别慌，这是正常的。

因为你还没写样式。

HTML只管结构。

好看不好看全靠CSS。

1. 鼠标悬停才显示

二级菜单默认得藏起来。

鼠标放上去再出来。

这才叫下拉菜单。

写个简单的样式。

先把二级菜单隐藏。

```css .sub-nav { display: none; / 默认隐藏 / position: absolute; / 绝对定位 / background: fff; / 给个背景色 / } ```

然后写鼠标滑过的效果。

```css .nav li:hover .sub-nav { display: block; / 滑过显示 / } ```

这样就能交互了。

鼠标放上去。

二级菜单就蹦出来。

移开就消失。

很听话。

2. 解决定位和遮挡问题

这里有个常见的坑。

你会发现二级菜单。

可能位置不对。

或者被别的元素挡住了。

这时候要检查父级。

给父级 `li` 加个定位。

```css .nav li { position: relative; / 相对定位 / float: left; / 让它横着排 / } ```

为什么要加 `relative`？

因为二级的 `absolute`。

是相对于父级定位的。

父级没定位。

它就去找爷爷级。

最后可能跑到屏幕左上角去了。

还有一个坑叫 `z-index`。

如果你的二级菜单。

被底下的图片盖住了。

就是层级太低。

给二级菜单加个层级。

```css .sub-nav { z-index: 999; / 放到最上层 / } ```

这样它就浮在所有东西上面了。

不会被挡住。

这些都是细节。

但细节决定成败。

最后唠叨两句

看完这三点。

你应该心里有数了。

其实没那么难。

就是后台加栏目。

模板套标签。

CSS写样式。

这三步走下来。

导航栏基本就搞定了。

千万别死磕代码。

有时候显示不出来。

不是代码写错了。

是后台数据没填对。

多检查一下后台。

多检查一下标签闭合。

问题一般都能解决。

别光看不动手。

赶紧打开你的测试站。

照着这篇教程试一遍。

做一次就学会了。

遇到问题别着急。

回头再看看步骤。

祝你早点搞定。

早点下班！