dede导航栏下拉菜单如何制作？-DEDE建站-盈思创科技

DedeCMS 本身默认的导航菜单（{dede:channelartlist} 和 {dede:channel}）是不支持下拉菜单的，要实现这个功能，我们需要结合 CSS 样式 和 少量的 JavaScript 交互 来完成。

（图片来源网络，侵删）

下面我将提供一个非常详细、通用的教程，适用于大多数 DedeCMS 的默认模板，这个教程分为三个核心部分：

HTML 结构修改：在模板文件中构建出下拉菜单的层级结构。
CSS 样式美化：编写 CSS 代码，让菜单看起来像下拉菜单，并控制其显示/隐藏。
JavaScript 交互实现：添加 JS 代码，让菜单能响应用户的鼠标悬停操作。

第一步：修改模板文件，构建 HTML 结构

我们需要修改 DedeCMS 的头部模板文件 head.htm，这个文件通常位于 /templets/default/ 目录下。

打开文件：使用 FTP 或文件管理器，登录你的网站服务器，找到并打开 /templets/default/head.htm 文件。

找到导航代码：在文件中找到调用顶级栏目（导航栏）的代码，它通常是这样的：

（图片来源网络，侵删）

<div id="navMenu">
  <ul>
    <li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
    <li><a href='{dede:channelartlist typeid='top' row='8'}'>
         {dede:field name='typename'/}
         </a></li>
    <!-- 更多栏目... -->
  </ul>
</div>

重构代码，支持下拉菜单：我们需要将这段代码修改成支持多级嵌套的结构，核心思路是：如果某个栏目有子栏目，就在它对应的 <li> 标签内再嵌套一个 <ul> 来放置子菜单。

下面是一个完整且常用的修改后的 head.htm 导航栏代码示例，请用下面的代码替换掉你原来的导航部分。
```

<div id="navMenu">
  <ul>
    <li><a href='{dede:global.cfg_cmsurl/}/'>首页</a></li>
    {dede:channelartlist typeid='top' row='8'}
    <li>
      <a href="{dede:field name='typeurl'/}">
        {dede:field name='typename'/}
      </a>
      
      {dede:channel type='son' noself='yes'}
      <ul class="subnav">
        <li><a href="[field:typeurl/]">[field:typename/]</a></li>
      </ul>
      {/dede:channel}
    </li>
    {/dede:channelartlist}
    
    <li><a href="http://www.example.com/about.html">关于我们</a></li>
    <li><a href="http://www.example.com/contact.html">联系我们</a></li>
  </ul>
</div>

```
代码解释：
- {dede:channelartlist typeid='top' row='8'}：循环输出顶级栏目。
- 每个顶级栏目都被一个 <li> 包裹。
- {dede:channel type='son' noself='yes'}：这是核心！它会循环输出当前顶级栏目的所有子栏目。
- <ul class="subnav">：我们为子菜单创建了一个带有 subnav 类的 <ul> 列表，方便我们后面用 CSS 来定位和样式化它。
- [field:typeurl/] 和 [field:typename/]：这是子栏目的链接和名称。

第二步：添加 CSS 样式

CSS 负责菜单的外观和下拉的“静态”效果，你需要将以下 CSS 代码添加到你的模板样式文件中，通常是 /templets/default/style/dedecms.css 文件里。

（图片来源网络，侵删）

打开 CSS 文件：找到并打开 dedecms.css。

添加以下 CSS 代码：

/* 导航栏容器样式 */
#navMenu {
  background: #333; /* 导航栏背景色 */
  height: 40px;     /* 导航栏高度 */
  clear: both;
}
#navMenu ul {
  list-style: none; /* 去掉列表前的点 */
  margin: 0;
  padding: 0;
  height: 40px;
}
#navMenu li {
  float: left; /* 让菜单项横向排列 */
  position: relative; /* 关键！为下拉菜单定位提供参考 */
}
#navMenu li a {
  display: block; /* 让 a 标签可以设置宽高 */
  padding: 0 15px;
  line-height: 40px; /* 行高等于高度，实现垂直居中 */
  color: #fff;       /* 文字颜色 */
  text-decoration: none;
  font-size: 14px;
}
/* 鼠标悬停在主菜单上时的样式 */
#navMenu li a:hover {
  background: #555; /* 鼠标悬停时的背景色 */
}
/* 下拉子菜单的容器样式 */
#navMenu li ul.subnav {
  position: absolute; /* 关键！将子菜单绝对定位 */
  left: 0;
  top: 40px;          /* top 值等于父级 li 的高度 */
  display: none;      /* 默认隐藏 */
  background: #333;    /* 子菜单背景色 */
  padding: 5px 0;
  min-width: 150px;   /* 子菜单最小宽度 */
  border-radius: 0 0 5px 5px; /* 圆角 */
}
/* 子菜单项的样式 */
#navMenu li ul.subnav li {
  width: 100%;       /* 子菜单项宽度撑满 */
  float: none;       /* 取消浮动，恢复纵向排列 */
}
/* 子菜单链接的样式 */
#navMenu li ul.subnav li a {
  display: block;
  line-height: 30px; /* 子菜单项高度 */
  padding: 0 15px;
  border-bottom: 1px solid #444; /* 添加分隔线 */
}
/* 鼠标悬停在子菜单项上时的样式 */
#navMenu li ul.subnav li a:hover {
  background: #555;
}

CSS 效果说明：

如果你刷新网站,鼠标移动到有子栏目的菜单上，会发现子菜单是“一直显示”的，我们还需要用 JS 来控制它的显示和隐藏。
position: relative 和 position: absolute 的配合是实现下拉菜单定位的关键。

第三步：添加 JavaScript 交互

最后一步,我们用 JS 来实现鼠标移入时显示下拉菜单，移出时隐藏菜单。

打开 head.htm 文件：再次回到 /templets/default/head.htm 文件。

在文件末尾的 </head> 标签之前，添加以下 <script> 代码：

<script type="text/javascript">
// 等待整个文档加载完毕后执行
window.onload = function() {
  // 获取所有 class 为 "subnav" 的元素（即所有下拉菜单）
  var subnavs = document.getElementsByClassName('subnav');
  // 遍历这些下拉菜单
  for (var i = 0; i < subnavs.length; i++) {
    var subnav = subnavs[i];
    // 获取包含这个下拉菜单的父级 li 元素
    var parentLi = subnav.parentElement;
    // 为父级 li 添加鼠标移入事件
    parentLi.onmouseenter = function() {
      // 找到这个 li 下的子菜单并显示
      var thisSubnav = this.querySelector('.subnav');
      if (thisSubnav) {
        thisSubnav.style.display = 'block';
      }
    };
    // 为父级 li 添加鼠标移出事件
    parentLi.onmouseleave = function() {
      // 找到这个 li 下的子菜单并隐藏
      var thisSubnav = this.querySelector('.subnav');
      if (thisSubnav) {
        thisSubnav.style.display = 'none';
      }
    };
  }
};
</script>

JS 代码解释：

这段 JS 代码会在页面加载完成后自动执行。
它找到所有带有 subnav 类的 <ul> 元素（也就是我们的下拉菜单）。
然后找到每个下拉菜单的“父级 <li>”。
为这个父级 <li> 添加了 onmouseenter（鼠标进入）和 onmouseleave（鼠标离开）事件。
当鼠标进入时,对应的子菜单的 display 样式被设置为 block，从而显示出来。
当鼠标离开时,display 样式被设置为 none，从而隐藏起来。

总结与最终检查

完成以上三步后,你的 DedeCMS 导航栏下拉菜单功能就基本实现了。

刷新你的网站，查看效果。
测试不同栏目：确保有子栏目的菜单能正常下拉，没有子栏目的菜单不受影响。
检查样式：如果下拉菜单的位置、颜色等不符合你的网站风格，回到第二步的 CSS 代码中调整相应的值。
移动端适配：这个纯 CSS+JS 的下拉菜单在移动端上可能体验不佳，如果你的网站需要适配移动端，你可能需要考虑使用更复杂的响应式菜单方案，比如在移动端将下拉菜单转换为点击展开/收起的“手风琴”菜单。

这个方法是最基础也是最通用的,适用于绝大多数 DedeCMS 5.7 和 5.8 的默认模板，如果你的模板是高度定制过的，可能需要根据实际情况微调 HTML 结构和 CSS 选择器。

dede导航栏下拉菜单如何制作？

第一步：修改模板文件，构建 HTML 结构

第二步：添加 CSS 样式

第三步：添加 JavaScript 交互

总结与最终检查

相关文章

目录[+]