织梦导航栏双层带竖1-织梦建站-盈思创科技

一级菜单：水平排列，每个菜单项之间有一个竖线分隔。
二级菜单：当鼠标悬停在一级菜单上时，垂直展开显示子菜单。
交互效果：鼠标悬停时，一级菜单有高亮背景，二级菜单平滑显示。

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

织梦的导航栏通常位于 templets/你的模板目录/ 目录下，文件名可能是 head.htm 或 header.htm，你需要找到并编辑这个文件。

找到导航代码：在 head.htm 文件中，找到类似 {dede:channelartlist typeid='top'} 或 {dede:channel} 的标签，这就是生成导航栏的核心代码。
替换代码：将原有的导航代码替换为下面的优化代码，这段代码结构更清晰，方便我们后续添加样式。

<!-- 开始：双层导航栏 -->
<div class="main-nav">
    <ul class="nav-list">
        {dede:channelartlist typeid='top' row='8'}
        <li class="nav-item">
            <!-- 一级菜单项 -->
            <a href="{dede:field name='typeurl'/}" class="nav-link">
                {dede:field name='typename'/}
            </a>
            <!-- 二级菜单容器 -->
            <ul class="sub-nav">
                {dede:channel type='son' noself='yes'}
                <li>
                    <a href="[field:typeurl/]">[field:typename/]</a>
                </li>
                {/dede:channel}
            </ul>
        </li>
        {/dede:channelartlist}
        <!-- 如果想在最右边添加一个“首页”或“联系我们”等特殊链接，可以这样加 -->
        <li class="nav-item">
            <a href="{dede:global.cfg_cmsurl/}/" class="nav-link">首页</a>
        </li>
    </ul>
</div>
<!-- 结束：双层导航栏 -->

代码解释：

{dede:channelartlist typeid='top'}：获取所有顶级栏目。
class="nav-item"：为每个一级菜单项添加一个类，方便控制样式。
{dede:channel type='son'}：在 channelartlist 循环内部，获取当前顶级栏目的所有子栏目。
class="sub-nav"：为二级菜单容器添加一个类。
noself='yes'：这个参数可以避免在二级菜单中重复显示一级栏目本身，使结构更干净。

第二步：添加CSS样式

我们需要添加CSS来控制导航栏的显示、布局和交互效果，你可以将这些CSS代码放在 templets/你的模板目录/style/dedecms.css 文件中，或者在 <head> 标签内使用 <style> 标签直接嵌入。

/* ====================================== */
/*         织梦双层导航栏样式              */
/* ====================================== */
/* 清除默认样式，防止干扰 */
.main-nav, .nav-list, .nav-item, .sub-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 主导航容器 */
.main-nav {
    height: 45px; /* 根据你的设计调整高度 */
    line-height: 45px;
    background-color: #333; /* 导航栏背景色 */
    font-size: 16px;
}
/* 导航列表（一级菜单的容器） */
.nav-list {
    display: flex; /* 使用 Flexbox 实现水平排列 */
    justify-content: center; /* 居中显示 */
}
/* 一级菜单项 */
.nav-item {
    position: relative; /* 这个属性非常重要，为二级菜单定位提供参考 */
}
/* 一级菜单链接 */
.nav-link {
    display: block; /* 让 a 标签撑满 li */
    padding: 0 20px; /* 左右内边距，控制菜单项宽度 */
    color: #fff; /* 文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
}
/* 鼠标悬停在一级菜单上时的样式 */
.nav-item:hover .nav-link {
    background-color: #555; /* 悬停时的背景色 */
}
/* ====================================== */
/*             竖线效果实现               */
/* ====================================== */
/* 这是实现竖线的关键技巧 */
.nav-item:not(:last-child) .nav-link {
    /* 为除最后一个菜单项外的所有链接添加右边框 */
    border-right: 1px solid #555; /* 竖线颜色和粗细 */
}
/* 当鼠标悬停时，可以改变竖线颜色 */
.nav-item:hover .nav-link {
    border-right-color: #777; /* 悬停时竖线颜色变亮 */
}
/* ====================================== */
/*             二级菜单样式               */
/* ====================================== */
/* 二级菜单容器 - 默认隐藏 */
.sub-nav {
    position: absolute; /* 绝对定位，相对于父级 .nav-item */
    top: 100%; /* 定位在一级菜单的下方 */
    left: 0;
    min-width: 180px; /* 设置一个最小宽度 */
    background-color: #444; /* 二级菜单背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 添加阴影效果 */
    opacity: 0; /* 默认透明度为0，实现隐藏 */
    visibility: hidden; /* 隐藏元素，不占据空间 */
    transform: translateY(-10px); /* 向上偏移一点，配合transition实现动画 */
    transition: all 0.3s ease-in-out; /* 添加平滑过渡效果 */
    z-index: 1000; /* 确保二级菜单显示在最上层 */
}
/* 当鼠标悬停在一级菜单项上时，显示二级菜单 */
.nav-item:hover .sub-nav {
    opacity: 1; /* 完全显示 */
    visibility: visible; /* 显示元素 */
    transform: translateY(0); /* 回到正常位置 */
}
/* 二级菜单中的链接 */
.sub-nav li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #555; /* 二级菜单项之间也可以加横线 */
}
/* 二级菜单链接的悬停效果 */
.sub-nav li a:hover {
    background-color: #555;
}

第三步：完整代码整合

将上面两步的代码整合到你的 head.htm 文件中，一个完整的示例结构如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/}</title>
    <link rel="stylesheet" href="/templets/你的模板目录/style/dedecms.css">
    <style>
        /* 这里直接嵌入上面的CSS代码，或者链接到外部CSS文件 */
        /* ... (将上面第二步的CSS代码粘贴到这里) ... */
    </style>
</head>
<body>
    <!-- 网站头部 -->
    <header>
        <!-- 这里放置Logo、搜索框等 -->
        <!-- 开始：双层导航栏 -->
        <div class="main-nav">
            <ul class="nav-list">
                {dede:channelartlist typeid='top' row='8'}
                <li class="nav-item">
                    <!-- 一级菜单项 -->
                    <a href="{dede:field name='typeurl'/}" class="nav-link">
                        {dede:field name='typename'/}
                    </a>
                    <!-- 二级菜单容器 -->
                    <ul class="sub-nav">
                        {dede:channel type='son' noself='yes'}
                        <li>
                            <a href="[field:typeurl/]">[field:typename/]</a>
                        </li>
                        {/dede:channel}
                    </ul>
                </li>
                {/dede:channelartlist}
                <!-- 特殊链接示例 -->
                <li class="nav-item">
                    <a href="{dede:global.cfg_cmsurl/}/" class="nav-link">首页</a>
                </li>
            </ul>
        </div>
        <!-- 结束：双层导航栏 -->
    </header>
    <main>
        <!-- 网站主要内容 -->
    </main>
    <footer>
        <!-- 网站底部 -->
    </footer>
</body>
</html>

总结与提示

调整颜色和尺寸：请根据你网站的整体设计，修改CSS中的颜色值（如 #333, #555）、高度（45px）、内边距（padding）等值。
清除缓存：修改模板文件后，请务必登录织梦后台，点击“系统” -> “一键更新网站” -> “更新HTML”，并勾选“更新所有文件”，这样才能看到效果。
Flexbox布局：代码中使用了 display: flex 来让一级菜单水平排列并居中，这是现代网页布局的推荐做法，兼容性也很好。
竖线技巧：使用 .nav-item:not(:last-child) .nav-link 选择器是CSS中一个非常优雅的技巧，可以为除最后一个元素外的所有兄弟元素添加样式，完美避免了最后一个菜单项后面出现多余竖线的问题。

按照以上步骤操作,你就可以轻松地在织梦CMS中实现一个美观、功能完善的双层导航栏了。

织梦导航栏双层带竖1

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

第二步：添加CSS样式

第三步：完整代码整合

总结与提示

相关文章

目录[+]