织梦产品列表页二级菜单-织梦建站-盈思创科技

这个二级菜单通常用于产品分类,产品中心”是一级菜单，下面的“手机”、“电脑”、“平板”等是二级菜单，点击二级菜单后，页面会跳转到对应的产品列表页。

（图片来源网络，侵删）

我们将分步完成这个过程,从准备工作到最终效果，并提供多种实现方案以适应不同需求。

最推荐、最规范的织梦原生方法（使用顶级栏目和二级栏目）

这是最符合织梦CMS设计思想的方法,优点是SEO友好、操作简单、数据调用方便。

第一步：准备工作（后台设置栏目）

创建一级栏目（父栏目）
- 登录织梦后台,进入「栏目管理 -> 添加栏目」。
- 栏目名称：填写 产品中心 (或你想要的名称)。
- 栏目类型：选择 顶级栏目。
- 栏目目录：填写 products (或你想要的英文名称，建议用英文)。
- 列表模板：选择一个产品列表模板，list_product.htm。
- 其他选项根据需要填写,然后点击「确定」。
创建二级栏目（子栏目）
（图片来源网络，侵删）
- 再次进入「栏目管理 -> 添加栏目」。
- 栏目名称：填写 手机。
- 栏目类型：选择 普通栏目。
- 所属栏目：点击下拉框，选择刚刚创建的 产品中心，这是关键一步！
- 栏目目录：填写 phone。
- 列表模板：同样选择 list_product.htm。
- 点击「确定」。
- 重复此步骤,创建其他二级栏目，如 电脑 (目录 computer)、平板 (目录 tablet) 等。

完成这一步后,你的栏目结构就变成了：

产品中心 (/products/)
- 手机 (/products/phone/)
- 电脑 (/products/computer/)
- 平板 (/products/tablet/)

第二步：修改模板文件（调用栏目）

我们需要在 产品中心 这个一级栏目的列表模板 list_product.htm 中，添加二级菜单的代码。

找到模板文件
- 进入「模板管理 -> 默认模板管理」。
- 找到并编辑 产品中心 对应的列表模板，也就是你刚才设置的 list_product.htm。

添加调用代码

（图片来源网络，侵删）

在你希望显示二级菜单的位置（产品列表的上方），添加以下织梦标签代码。

<div class="sub-category-menu">
    <h3>产品分类</h3>
    <ul>
        {dede:channel type='son' noself='yes'}
        <li><a href="[field:typeurl/]">[field:typename/]</a></li>
        {/dede:channel}
    </ul>
</div>

代码解析
- {dede:channel type='son' noself='yes'}：这是核心标签。
  - type='son'：表示调用当前栏目的所有子栏目，因为我们在 产品中心 模板里使用，所以它会调用 手机、电脑、平板 这些二级栏目。
  - noself='yes'：表示不显示栏目本身（即不显示“产品中心”这个链接）。
- [field:typeurl/]：调用子栏目的链接地址。
- [field:typename/]：调用子栏目的名称。

添加CSS样式（可选） 为了让菜单看起来更美观，可以在模板的<head>标签内或外部的CSS文件中添加一些样式。

<style>
.sub-category-menu {
    width: 200px;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}
.sub-category-menu h3 {
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.sub-category-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sub-category-menu li {
    margin: 5px 0;
}
.sub-category-menu a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 5px 10px;
}
.sub-category-menu a:hover {
    background-color: #e0e0e0;
    color: #0066cc;
}
/* 高亮当前选中的分类 */
.sub-category-menu .current > a {
    background-color: #0066cc;
    color: #fff;
}
</style>

第三步：实现高亮效果（让当前选中的分类项高亮显示）

用户点击“手机”后，我们希望“手机”这一项能高亮显示，提示用户当前所在位置。

修改模板代码 在 {dede:channel} 标签中，我们需要给当前栏目的<li>添加一个 class="current"。

<div class="sub-category-menu">
    <h3>产品分类</h3>
    <ul>
        {dede:channel type='son' noself='yes'}
        <li [field:typenowrunphp='yes']if(@me == GetTopidtype(@me)) @me = "class='current'"; else @me = '';[/field:typenowrunphp]>
            <a href="[field:typeurl/]">[field:typename/]</a>
        </li>
        {/dede:channel}
    </ul>
</div>

代码解析
- [field:typenowrunphp='yes']...[/field:typenowrunphp]：这是一个字段值判断，用于给<li>标签动态添加class。
- if(@me == GetTopidtype(@me))：这句代码的意思是，如果当前循环到的栏目ID（@me）与当前页面所在的顶级栏目ID（GetTopidtype()函数获取）相同，则执行后面的语句。
- @me = "class='current'"：如果条件成立，就将<li>的class设置为'current'。
- else @me = ''：如果不成立，就不设置class。

当用户访问 /products/phone/ 时，手机 这一项就会自动带上 class="current"，然后我们通过CSS .current > a 样式就能实现高亮效果。

使用自定义菜单（适用于非栏目结构的菜单）**

如果你的二级菜单并不是严格的栏目结构,或者你希望从其他地方获取菜单数据，可以使用自定义菜单。

后台添加菜单
- 进入「后台菜单管理 -> 添加顶级菜单」。
- 菜单名称：产品中心。
- 链接地址：javascript:void(0); 或留空。
- 点击「确定」。
- 选中 产品中心，点击「添加子菜单」。
- 菜单名称：手机。
- 链接地址：填写你想要跳转的产品列表页URL，/products/phone/。
- 重复添加其他子菜单。
在前端调用 织梦系统会自动将后台菜单生成到 {dede:global name='cfg_cmspath'/}/data/enums/menu.php 文件中，但直接调用比较麻烦。

更简单的方法是直接在模板中手动写HTML,然后通过CSS和JS实现下拉效果，这种方式灵活性高，但不如方案一自动化。

总结与建议

特性	方案一（原生栏目）	方案二（自定义菜单）
实现难度	简单，只需后台设置和模板修改	较简单，需要手动编写HTML/CSS/JS
SEO友好度	极高，完全基于织梦的栏目结构，URL规范，利于搜索引擎抓取。	较低，链接是固定的，与栏目数据分离。
维护性	好，新增分类只需在后台添加栏目，菜单自动更新。	差，每次修改菜单都需要手动编辑模板代码。
适用场景	绝大多数产品分类导航，强烈推荐。	适用于导航栏与网站栏目结构无关的场景，如“关于我们”、“联系我们”等。

最终结论：

对于织梦产品列表页的二级菜单,强烈推荐使用方案一，它完美契合了织梦CMS的建站逻辑，操作最简单，SEO效果最好，也最容易维护，请按照第一步和第二步的详细步骤进行操作，你就能轻松实现一个功能完善、样式美观的二级分类菜单。

织梦产品列表页二级菜单