- 模板文件：在模板文件中编写HTML结构和DedeCMS的循环标签。
- CSS样式：为这个HTML结构编写CSS样式,以达到你想要的视觉效果。
下面我将为你提供一个从基础到高级的完整示例,包括多种常见导航样式的实现方法。
准备工作：确保栏目数据正确
在开始之前，请确保你的网站后台“栏目管理”中的顶级栏目已经设置好，并且它们的“类型”都是“栏目频道”,DedeCMS会根据这些栏目来生成导航。
第一步：编写模板HTML与DedeCMS循环标签
这是核心部分，我们需要使用DedeCMS的 {dede:channel} 标签来循环输出顶级栏目。
打开你的模板文件（通常是 templets/default/ 目录下的文件，如 head.htm 或 index.htm）,在导航位置插入以下代码。
基础循环代码（无样式）
这是最原始的循环，只会输出 代码解释： 我们给上面的HTML结构添加样式，让它变得美观，CSS可以写在 这里提供几种非常流行的导航样式示例。 这是最经典、最常用的导航样式。 HTML模板代码 (带类名) 为了让CSS能够精准地控制,我们给每个元素添加一些类名和分隔符。 CSS 样式代码 这是一个非常实用的功能,让用户知道自己当前在哪个页面。 修改HTML模板代码 在 代码解释： 如果你的栏目有二级栏目，并且希望在鼠标悬停时显示出来，可以使用 HTML模板代码 (带下拉菜单) CSS 样式代码 (用于下拉菜单) 注意：为了让 创建一个带样式的DedeCMS导航,核心流程如下： 通过以上步骤,你就可以灵活地创建出符合你网站设计的各种导航菜单了。<a>
{dede:channel type='top' row='8'}
<a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}
{dede:channel type='top' row='8'}:
type='top'：表示只调用顶级栏目。row='8'：表示调用的栏目数量，可以根据你的需要修改，或者不写（不写则调用所有顶级栏目）。[field:typelink/]：输出栏目的链接地址。[field:typename/]：输出栏目的名称。
第二步：添加CSS样式
<head> 标签内的 <style> 块中,或者链接一个外部CSS文件。示例1：水平横向导航条（最常用）
<!-- 顶部导航开始 -->
<div class="nav">
<ul class="nav-list">
{dede:channel type='top' row='8'}
<li><a href="[field:typelink/]" title="[field:typename/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
<!-- 顶部导航结束 -->
/* 导航容器 */
.nav {
background-color: #333; /* 导航背景色 */
height: 50px; /* 导航高度 */
line-height: 50px; /* 行高，用于垂直居中文字 */
}
/* 导航列表 */
.nav-list {
list-style: none; /* 去掉列表默认的小圆点 */
margin: 0; /* 去掉默认外边距 */
padding: 0; /* 去掉默认内边距 */
text-align: center; /* 文字居中 */
}
/* 导航列表中的每一项 */
.nav-list li {
display: inline-block; /* 让列表项横向排列 */
margin: 0 15px; /* 控制每个菜单项之间的间距 */
}
/* 导航链接 */
.nav-list li a {
color: #fff; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
font-size: 16px; /* 字体大小 */
display: block; /* 让a标签充满整个li，方便添加悬停效果 */
}
/* 鼠标悬停效果 */
.nav-list li a:hover {
color: #ffcc00; /* 鼠标悬停时文字颜色变黄 */
}
/* 当前页面对应的栏目高亮效果 */
/* 这部分需要配合DedeCMS的 currentstyle 属性使用，下面会讲到 */
.nav-list li a.current {
color: #ffcc00;
font-weight: bold;
}
高级技巧与常用功能
高亮当前栏目
{dede:channel} 标签中使用 currentstyle 属性来定义当前栏目的HTML样式。<div class="nav">
<ul class="nav-list">
{dede:channel type='top' row='8' currentstyle="<li class='active'><a href='~typelink~' class='current'>~typename~</a></li>"}
<li><a href="[field:typelink/]" title="[field:typename/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</div>
currentstyle="..."：当循环的栏目正好是当前页面所在的栏目时，DedeCMS会使用这里的代码替换默认的 <li>...</li> 代码。~typelink~ 和 ~typename~：是 currentstyle 属性中的特殊占位符，分别代表 [field:typelink/] 和 [field:typename/]。<a> 标签添加了 class="current"，这样我们就可以在CSS中为它写特殊样式（比如上面CSS中的 .nav-list li a.current）。带下拉子菜单的导航
{dede:sonchannel}
<div class="nav">
<ul class="nav-list">
{dede:channel type='top' row='8'}
<li>
<a href="[field:typelink/]" title="[field:typename/]">[field:typename/]</a>
<!-- 检查是否有子栏目，有则显示下拉菜单 -->
[field:sonchannel runphp='yes']
global $dsql;
$sql = "SELECT id,typename,typedir FROM `#@__arctype` WHERE reid='@me' AND ishidden<>1 ORDER BY sortrank";
$sonids = '';
$dsql->SetQuery($sql);
$dsql->Execute('s');
while($row = $dsql->GetArray('s')) {
$sonids .= "<a href='{$row['typedir']}'>{$row['typename']}</a> ";
}
if(empty($sonids)) @me = '';
else @me = "<div class='sub-nav'>".$sonids."</div>";
[/field:sonchannel]
</li>
{/dede:channel}
</ul>
</div>
/* ... 之前的样式保持不变 ... */
/* 子导航容器 */
.sub-nav {
display: none; /* 默认隐藏 */
position: absolute; /* 绝对定位，相对于 li */
top: 50px; /* 放在主菜单的下方 */
left: 0;
background-color: #444;
padding: 10px 0;
min-width: 150px; /* 设置一个最小宽度 */
z-index: 1000;
}
/* 当鼠标悬停在 li 上时，显示子导航 */
.nav-list li:hover .sub-nav {
display: block; /* 显示下拉菜单 */
}
.sub-nav a {
display: block; /* 让每个链接占一行 */
padding: 8px 15px;
color: #fff;
text-decoration: none;
white-space: nowrap; /* 防止文字换行 */
}
.sub-nav a:hover {
background-color: #555;
}
position: absolute 正常工作，需要给包含下拉菜单的 <li> 标签添加 position: relative;。.nav-list li {
display: inline-block;
margin: 0 15px;
position: relative; /* 添加这一行 */
}
{dede:channel} (顶级栏目) 或 {dede:sonchannel} (子栏目)。<ul> 和 <li> 搭建好列表框架，给元素添加有意义的 class 名。currentstyle 实现高亮，或结合 position: absolute 和 hover 实现下拉菜单。
