dede导航如何正确链接到二级导航？

1. 最推荐的方式：使用“顶级栏目”作为一级导航，其“子栏目”作为二级导航。 这是最符合DedeCMS设计逻辑、最稳定且最易于维护的方式。
2. 特定场景：使用“外部链接”作为一级导航，点击后跳转到一个专门展示其二级导航的页面。 这种方式适用于一些特殊情况，产品中心”需要跳转到自定义的介绍页面。

下面我将详细讲解第一种最常用、最推荐的方法。

使用“顶级栏目”和“子栏目”实现（强烈推荐）

这种方式的逻辑是：你的导航栏上的每一个菜单项，都是DedeCMS里的一个“顶级栏目”，当这个顶级栏目有“子栏目”时，鼠标悬停在上面,就会自动显示出它的所有子栏目。

第1步：在后台创建栏目结构

1. 登录DedeCMS后台，进入【核心】 -> 【栏目管理】。

2. 创建一级导航（顶级栏目）：

   • 点击左上角的【增加顶级栏目】。
   • 栏目名称：填写你想要显示在导航栏上的文字，关于我们”。
   • 栏目类型：选择“内部栏目”。
   • 栏目目录：填写一个英文名称，用于生成URL，about_us。
   • 选择上级栏目：务必保持默认的“无”（或“主站点”），这样才能成为“顶级栏目”。
   • 其他选项（如栏目内容、模板等）可以根据需要填写。
   • 点击【确定】。

3. 创建二级导航（子栏目）：

   
   （图片来源网络，侵删）
   • 现在在栏目列表中，你应该能看到你刚创建的“关于我们”。
   • 将鼠标移动到“关于我们”这一行，点击右侧的【增加子栏目】。
   • 栏目名称：填写子栏目的名称，公司简介”。
   • 栏目类型：选择“内部栏目”。
   • 栏目目录：填写一个英文名称，profile。
   • 选择上级栏目：此时系统会自动选择“关于我们”,确保它被正确设置为子栏目。
   • 点击【确定】。
   • 用同样的方法，为“关于我们”再添加“发展历程”、“企业文化”等其他子栏目。

重复以上步骤，为你的导航栏（如“产品中心”、“新闻中心”、“联系我们”等）都创建好对应的顶级栏目和它们的子栏目。

第2步：修改导航栏模板文件

DedeCMS的导航栏通常由一个模板文件控制，这个文件一般是 templets/default/header.htm（如果你的模板是default）。

1. 找到并打开模板文件： 使用FTP工具或DedeCMS后台的【模板】->【模板管理】功能，打开 templets/你的模板文件夹名称/header.htm 文件。

2. 找到调用导航的代码： 在 header.htm 文件中，找到类似 {dede:channel} 的标签，这通常是一个无序列表（<ul>）的结构,用来生成导航菜单。

   
   （图片来源网络，侵删）

3. 修改代码以支持二级下拉菜单： 你需要修改 {dede:channel} 的标签，并为其添加HTML和CSS样式,来实现下拉效果。

修改前的代码示例（通常是这样）：

<div id="nav">
    <ul>
        <li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
        {dede:channel type='top' row='8'}
        <li><a href='[field:typelink/]'>[field:typename/]</a></li>
        {/dede:channel}
    </ul>
</div>

修改后的代码示例（支持二级下拉）：

<div id="nav">
    <ul>
        <li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
        {dede:channel type='top' row='8'}
        <li>
            <!-- 如果有子栏目，则添加一个on类名，并显示子栏目列表 -->
            <a href="[field:typelink/]">[field:typename/]</a>
            [field:sonlist]
            <ul class="sub-nav">
                {dede:sonlist}
                <li><a href="[field:typelink/]">[field:typename/]</a></li>
                {/dede:sonlist}
            </ul>
            [/field:sonlist]
        </li>
        {/dede:channel}
    </ul>
</div>

代码解释：

• {dede:channel type='top' row='8'}: 调用最多8个顶级栏目。
• [field:sonlist]...[/field:sonlist]: 这是一个关键的条件标签。只有当当前栏目有子栏目时，[field:sonlist] 和 [/field:sonlist] 之间的内容才会被输出。
• {dede:sonlist}: 在 [field:sonlist] 标签内部使用,用于循环输出当前顶级栏目的所有子栏目。
• class="sub-nav": 我们给子栏目的 <ul> 添加了一个CSS类名,方便我们用CSS来控制它的样式。

第3步：添加CSS样式

为了让下拉菜单能够正确显示（隐藏、悬停时显示、定位等）,你需要添加CSS样式。

在你的模板的CSS文件（通常是 templets/你的模板文件夹名称/style.css）中,添加以下样式：

/* 导航栏主样式 */
#nav ul li {
    float: left; /* 让导航项横向排列 */
    position: relative; /* 设置为相对定位，这是下拉菜单定位的关键 */
    list-style: none;
    margin: 0 10px;
}
#nav ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}
/* 默认隐藏二级导航菜单 */
#nav ul li .sub-nav {
    position: absolute; /* 绝对定位，相对于其父元素 li */
    top: 100%; /* 将子菜单放在父元素的下方 */
    left: 0;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    display: none; /* 默认隐藏 */
    z-index: 1000; /* 确保下拉菜单显示在其他内容之上 */
    min-width: 150px; /* 设置一个最小宽度 */
}
/* 当鼠标悬停在一级导航上时，显示二级菜单 */
#nav ul li:hover .sub-nav {
    display: block; /* 鼠标悬停时显示 */
}
/* 子菜单中列表项的样式 */
#nav ul li .sub-nav li {
    float: none; /* 子菜单项不需要再横向浮动 */
    width: 100%; /* 子菜单项宽度占满 */
    border-bottom: 1px solid #e0e0e0;
}
#nav ul li .sub-nav li:last-child {
    border-bottom: none;
}
#nav ul li .sub-nav li a {
    padding: 8px 15px;
    white-space: nowrap; /* 防止文字换行 */
}

第4步：更新缓存和生成

1. 更新网站缓存：在DedeCMS后台，点击【系统】-> 【一键更新网站】 -> 勾选“更新网站缓存”，然后点击“开始更新”。
2. 更新主页：在同一个页面，勾选“更新主页”，点击“开始更新”。

清空浏览器缓存，刷新你的网站首页，你应该就能看到一级导航在鼠标悬停时,平滑地显示出其二级子菜单了。

使用“外部链接”实现（特定场景）

如果你的需求是，点击一级导航（如“产品中心”）后，不是直接跳转到某个子栏目，而是跳转到一个自定义的介绍页面,而这个介绍页面上又包含了所有产品分类的链接。

第1步：创建一个外部链接栏目

1. 进入【核心】 -> 【栏目管理】。
2. 点击【增加顶级栏目】。
3. 栏目名称：填写“产品中心”。
4. 栏目类型：选择“外部链接”。
5. 链接地址：填写你自定义的产品中心页面的URL，/products.html（这个页面需要你另外创建）。
6. 选择上级栏目：保持“无”。
7. 点击【确定】。

第2步：创建子栏目

和第一种方法一样，为这个“产品中心”栏目增加子栏目（如“产品A”、“产品B”），这些子栏目是“内部栏目”。

第3步：在自定义页面中调用子栏目

你需要创建一个名为 products.html 的静态页面，并在这个页面上用DedeCMS的标签调用出“产品中心”这个栏目的所有子栏目。

1. 在DedeCMS后台，通过【生成】-> 【HTML更新】 -> 【添加HTML】，创建一个名为 products.html 的页面。
2. 编辑这个页面内容，在需要显示子栏目列表的地方,放入以下代码：

<h2>产品分类</h2>
<ul>
    {dede:channel type='son' typeid='产品中心的栏目ID'}
    <li><a href="[field:typelink/]">[field:typename/]</a></li>
    {/dede:channel}
</ul>

注意：你需要将 typeid='产品中心的栏目ID' 中的 产品中心的栏目ID 替换成你在后台“产品中心”栏目实际看到的ID数字。

第4步：修改导航栏模板

你的 header.htm 文件中的导航调用代码可以保持不变，因为 {dede:channel} 会自动识别“外部链接”类型的栏目，并将其链接地址作为 href 属性。

{dede:channel type='top' row='8'}
<li><a href='[field:typelink/]'>[field:typename/]</a></li>
{/dede:channel}

对于“产品中心”这个栏目，[field:typelink/] 会输出你在第1步设置的 /products.html。

对于绝大多数情况，请直接使用方法一，它是DedeCMS最核心、最强大的功能之一。