织梦如何调用二级栏目导航？

这里为您提供两种最主流、最实用的方法：

1. 使用 {dede:channelartlist} 标签（推荐，功能强大）
2. **使用 {dede:channel} 标签配合 typeid 属性（更简单,适合特定场景）

使用 {dede:channelartlist} 标签（最推荐）

channelartlist 是专门用于栏目列表的标签，非常适合制作带有子栏目的导航，它会循环输出顶级栏目，并且在每个顶级栏目循环体内,你可以再次调用其子栏目。

场景：做一个标准的顶部主导航，鼠标悬停在“关于我们”上，展开显示“公司简介”、“发展历程”等子栏目。

模板代码示例：

<ul id="mainNav">
  {dede:channelartlist typeid='0' cacheid='channeltop'}
    <li>
      <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
      <!-- 判断当前顶级栏目是否有子栏目，如果有则输出子栏目列表 -->
      {dede:field name='sonlist' isarray='yes'}
        <ul class="subNav">
          {dede:sonlist}
            <li><a href="[field:typelink/]">[field:typename/]</a></li>
          {/dede:sonlist}
        </ul>
      {/dede:field}
    </li>
  {/dede:channelartlist}
</ul>

代码详解：

1. {dede:channelartlist typeid='0' cacheid='channeltop'}

   • typeid='0'：表示调用所有顶级栏目（顶级栏目的ID为0）。
   • cacheid='channeltop'：为这个导航设置一个缓存ID，可以提升页面加载速度,避免重复查询数据库。
   • 这个标签会循环遍历所有的顶级栏目。

2. <a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>

   
   （图片来源网络，侵删）
   • 在 channelartlist 循环体内，{dede:field} 标签默认指向的是当前循环的顶级栏目。
   • typeurl：当前顶级栏目的链接地址。
   • typename：当前顶级栏目的名称。

3. {dede:field name='sonlist' isarray='yes'}

   • 这是实现二级导航的核心。sonlist 用于获取当前顶级栏目的所有子栏目。
   • isarray='yes'：这是一个非常重要的属性，它告诉织梦将子栏目作为数组处理，这样你才能在 {dede:sonlist} 中再次循环。

4. {dede:sonlist}

   • 这个标签必须在 {dede:field name='sonlist'} 标签内部使用,它会循环输出当前顶级栏目的所有子栏目。
   • [field:typelink/] 和 [field:typename/]：在 sonlist 循环体内，使用 [field:] 语法来获取子栏目的链接和名称。

CSS 样式（实现悬停效果）

为了让子栏目在鼠标悬停时显示,你需要添加一些CSS样式。

/* 主导航样式 */
#mainNav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 使用flex布局让导航项水平排列 */
}
#mainNav li {
  position: relative; /* 关键：为子菜单定位提供参考 */
}
#mainNav a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}
/* 默认隐藏子导航 */
#mainNav .subNav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute; /* 关键：将子菜单脱离文档流，相对于父li定位 */
  top: 100%; /* 放在主菜单的下方 */
  left: 0;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: none; /* 默认隐藏 */
}
/* 当鼠标悬停在父级li上时，显示子导航 */
#mainNav li:hover .subNav {
  display: block;
}
/* 子导航项样式 */
#mainNav .subNav li {
  width: 150px; /* 设置子菜单宽度 */
}
#mainNav .subNav a {
  padding: 8px 15px;
  width: 100%;
}

使用 {dede:channel} 标签（简单直接）

如果你只是想在某个特定位置（比如页脚）显示某个栏目的所有子栏目，而不需要循环所有顶级栏目，{dede:channel} 会更简单。

场景：在页脚显示“产品中心”栏目的所有子栏目。

模板代码示例：

<div class="footer-links">
  <h3>产品中心</h3>
  <ul>
    {dede:channel type='son' typeid='5'}
      <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
  </ul>
</div>

代码详解：

1. {dede:channel type='son' typeid='5'}

   • typeid='5'：这是关键！你需要指定你想获取子栏目的那个顶级栏目的ID。“产品中心”这个栏目的ID是5。
   • type='son'：表示只调用指定栏目（ID为5的栏目）的直接子栏目。

2. [field:typelink/] 和 [field:typename/]

   • 在 {dede:channel} 循环体内，使用 [field:] 语法来获取每个子栏目的链接和名称。

总结与对比

推荐选择：

• 如果你正在制作网站的主导航菜单，请毫不犹豫地选择方法一 ({dede:channelartlist}),它是处理这类问题的标准且最强大的方式。
• 如果你只需要在页脚或某个特定区块里展示“关于我们”或“产品中心”的子栏目列表，那么方法二 ({dede:channel}) 就足够了,代码更简洁。

希望这个详细的解释能帮助你成功实现织梦的二级栏目导航！