免费织梦二级导航模板怎么用？-织梦建站-盈思创科技

由于织梦DedeCMS是一款比较老旧的系统,直接提供“一键安装”的二级导航模板包已经非常少见了，最好的方法是学习如何自己动手修改或集成，下面我将为您提供几种最常用、最可靠的实现方法，从简单到复杂，并附上资源获取渠道。

（图片来源网络，侵删）

使用织梦自带的“栏目导航”标签（最简单）

这是织梦最基础、最原生的方式，适合栏目层级不深、样式要求不高的网站。

实现步骤：

在后台添加栏目：
- 登录织梦后台,进入「栏目管理」->「添加顶级栏目」。
- 为您的“一级导航”栏目（如“关于我们”、“产品中心”、“新闻动态”）创建顶级栏目。
- 在对应的顶级栏目下,添加“二级栏目”（如“公司简介”、“发展历程”是“关于我们”下的二级栏目）。
在模板文件中调用标签：
（图片来源网络，侵删）
- 打开您网站模板的头部文件 head.htm 或主导航模板文件 header.htm。
- 找到您希望放置导航栏的位置,使用织梦的官方标签 channel。
基础代码示例：
```
<ul id="nav">
  <li><a href="{dede:global.cfg_cmsurl/}/">首页</a></li>
  {dede:channel type='top' row='8'}
  <li>
    <a href="[field:typelink/]">[field:typename/]</a>
    
    {dede:son typeid='self' row='10'}
    <ul class="subnav">
      <li><a href="[field:typelink/]">[field:typename/]</a></li>
    </ul>
    {/dede:son}
  </li>
  {/dede:channel}
</ul>
```
代码解释：
- {dede:channel type='top' row='8'}：调用顶级栏目，最多显示8个。
- [field:typelink/] 和 [field:typename/]：分别输出栏目的链接和名称。
- {dede:son typeid='self' row='10'}：这是关键，它会自动判断当前顶级栏目下是否有子栏目，如果有，则循环输出。typeid='self' 表示调用当前栏目的子栏目。

添加CSS样式：

您需要自己编写CSS来控制二级菜单的显示和隐藏,以及样式布局。
让子菜单默认隐藏 (display: none;)，当鼠标移到父级菜单时显示 (display: block;)。

CSS示例：

#nav li {
  position: relative;
  float: left;
}
#nav .subnav {
  position: absolute;
  top: 30px; /* 导航栏高度 */
  left: 0;
  background-color: #f5f5f5;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* 默认隐藏 */
  width: 150px;
}
#nav li:hover .subnav {
  display: block; /* 鼠标悬停时显示 */
}
#nav .subnav li {
  width: 100%;
  float: none;
}

使用成熟的第三方织梦模板（最推荐）

这是最省时省力、效果最好的方法，许多织梦模板开发者已经制作好了带有精美二级导航的完整模板。

操作步骤：

寻找模板资源：
- 织梦之家：最老牌、最全的织梦模板资源站。
- 模板王：提供大量免费和付费的织梦模板。
- 站长素材：也有专门的织梦模板板块。
- 百度搜索：关键词如 织梦cms免费模板、dedecms导航菜单模板、织梦响应式模板。
下载并安装模板：
- 下载一个您喜欢的、包含完整HTML、CSS、JS和织梦标签的模板包。
- 登录织梦后台,进入「系统」->「SQL命令行工具」。
- 执行模板包中的 dede_sql.sql 文件（如果有的话），这会导入默认的栏目和内容数据。
- 上传模板文件到 /templets/ 目录。
- 在后台「系统」->「系统基本参数」->「核心设置」中，修改 默认模板目录 为您上传的模板文件夹名。
- 更新网站缓存。
修改和适配：
- 打开新模板的 header.htm 文件，查看它实现的导航方式，通常这些模板会使用更高级的jQuery或CSS3动画来实现二级菜单效果，代码会比方法一复杂，但效果更好。
- 您只需要按照模板的栏目结构,在后台创建好您的栏目即可，导航会自动生成。

手动修改现有模板，集成第三方菜单组件（最灵活）

如果您对现有模板的导航不满意,但又不想换整个模板，可以采用这种方法，集成一个流行的jQuery下拉菜单插件。

以 Superfish 插件为例：

下载插件：
- 访问 Superfish 官方网站或通过 GitHub 下载插件包，里面包含 CSS 和 JS 文件。

引入插件文件：

在您的 head.htm 文件中，引入 jQuery 库（如果模板没有的话）和 Superfish 的 CSS、JS 文件。

<!-- 在 <head> 标签内添加 -->
<link rel="stylesheet" href="/static/css/superfish.css" type="text/css" media="screen" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/static/js/superfish.js"></script>

修改HTML结构：

修改 header.htm 中的导航HTML，使其符合 Superfish 插件的要求，通常是为一级菜单项添加 class="sf-menu"，为二级菜单添加 class="sf-menu"。

<ul class="sf-menu">
  <li><a href="#">首页</a></li>
  <li class="current">
    <a href="#">关于我们</a>
    <ul>
      <li><a href="#">公司简介</a></li>
      <li><a href="#">发展历程</a></li>
      <li><a href="#">企业文化</a></li>
    </ul>
  </li>
  <li>
    <a href="#">产品中心</a>
    <ul>
      <li><a href="#">产品分类A</a></li>
      <li><a href="#">产品分类B</a></li>
    </ul>
  </li>
  ...
</ul>

调用织梦标签替换静态链接：

将上面的静态HTML替换为织梦的 channel 标签，并添加必要的 class。

<ul class="sf-menu">
  <li><a href="{dede:global.cfg_cmsurl/}/">首页</a></li>
  {dede:channel type='top' row='8'}
  <li>
    <a href="[field:typelink/]">[field:typename/]</a>
    {dede:son typeid='self' row='10'}
    <ul>
      {dede:field name='typeid' function='GetSonIds(@me)'/} <!-- 这个标签可以获取所有子栏目ID，但更简单的是直接用son标签循环 -->
      {dede:son typeid='self' row='10'}
      <li><a href="[field:typelink/]">[field:typename/]</a></li>
      {/dede:son}
    </ul>
  </li>
  {/dede:channel}
</ul>

初始化插件：
- 在页面底部（footer.htm 或 head.htm 的最后）添加一小段JavaScript来初始化Superfish。
```
<script>
jQuery(document).ready(function(){
  jQuery('.sf-menu').superfish();
});
</script>
```

免费资源获取渠道汇总

模板下载站：
- 织梦之家：www.dede58.com (老牌，资源多)
- 模板王：www.mobanwang.com (质量较高，有免费专区)
- 站长素材：sc.chinaz.com/dedecms/ (综合性素材站)
代码/插件库：
- jQuery插件库：www.jq22.com/ (搜索 "dropdown menu", "megamenu" 可以找到大量免费组件)
- GitHub：搜索 superfish, bootstrap dropdown 等关键词，可以找到开源的导航组件。

总结与建议

新手或追求快速：直接使用方法二，下载一个现成的、带有二级导航的免费织梦模板，这是最稳妥、效果最好的选择。
功能简单，不想折腾：使用方法一，织梦自带标签完全够用，只需自己写一点CSS样式即可。
有前端基础，追求个性化：使用方法三，集成第三方菜单组件，可以实现非常炫酷和复杂的效果，灵活性最高。

希望这份详细的指南能帮助您顺利实现织梦网站的二级导航！

免费织梦二级导航模板怎么用？

使用织梦自带的“栏目导航”标签（最简单）

使用成熟的第三方织梦模板（最推荐）

手动修改现有模板，集成第三方菜单组件（最灵活）

免费资源获取渠道汇总

总结与建议

相关文章

目录[+]