dede导航样式代码如何自定义修改？-DEDE建站-盈思创科技

第一步：获取PHP导航代码

这部分代码负责从数据库中读取栏目数据，并生成HTML结构，通常放在网站头部模板文件 head.htm 或专门的导航模板文件中。
（图片来源网络，侵删）
最常用的方法是使用 channel
`基础导航代码（带下拉菜单）`


这个代码会生成一个主导航，如果某个栏目有子栏目,会自动生成下拉菜单。
{dede:channel type='top' row='8'}
    <li>
        <a href="[field:typeurl/]">[field:typename/]</a>
        {dede:son typeid='[field:id/]'}
            <div class="sub-menu">
                <ul>
                    {dede:channel type='son' noself='yes'}
                    <li><a href="[field:typeurl/]">[field:typename/]</a></li>
                    {/dede:channel}
                </ul>
            </div>
        {/dede:son}
    </li>
{/dede:channel}
代码解释：


{dede:channel type='top' row='8'}:

type='top': 表示只调用顶级栏目。
row='8': 表示调用8个顶级栏目。
[field:typeurl/]: 栏目链接地址。
[field:typename/]: 栏目名称。
[field:id/]: 当前栏目的ID,用于查找其子栏目。



{dede:son typeid='[field:id/]'} ... {/dede:son}:
（图片来源网络，侵删）

这是一个条件标签，如果当前顶级栏目有子栏目,就会执行其中的内容。
typeid='[field:id/]': 将当前顶级栏目的ID传进去,用来获取它的子栏目。



{dede:channel type='son' noself='yes'}:

type='son': 表示调用子栏目。
noself='yes': 表示不显示父栏目本身,只显示子栏目。




第二步：编写CSS样式代码
这部分代码负责控制导航的显示样式，如颜色、布局、悬停效果、下拉菜单动画等。
将以下CSS代码放入你的网站主样式文件 style.css 中。
/* 1. 基础样式重置和导航容器样式 */
.nav-container {
    width: 100%; /* 或固定宽度，如 1200px */
    margin: 0 auto;
    background-color: #333; /* 导航背景色 */
}
/* 2. 导航列表样式 */
.main-nav {
    list-style: none; /* 移除列表默认的圆点 */
    margin: 0;
    padding: 0;
    display: flex; /* 使用 Flexbox 布局，让菜单项水平排列 */
    justify-content: center; /* 居中对齐 */
}
/* 3. 导航菜单项样式 */
.main-nav > li {
    position: relative; /* 这个属性是下拉菜单定位的关键 */
}
.main-nav > li > a {
    display: block; /* 让a标签可以设置宽高和内边距 */
    padding: 15px 20px;
    color: #fff; /* 文字颜色 */
    text-decoration: none; /* 移除下划线 */
    font-size: 16px;
    transition: background-color 0.3s; /* 背景色过渡效果 */
}
/* 4. 鼠标悬停效果 */
.main-nav > li > a:hover {
    background-color: #555; /* 鼠标悬停时的背景色 */
}
/* 5. 下拉菜单样式 */
.sub-menu {
    position: absolute; /* 绝对定位，相对于其父元素 li */
    top: 100%; /* 位于父菜单项的下方 */
    left: 0;
    background-color: #444;
    min-width: 200px; /* 下拉菜单的宽度 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 阴影效果 */
    z-index: 1000;
    /* 默认隐藏下拉菜单 */
    display: none;
}
/* 6. 鼠标悬停在父菜单项时，显示下拉菜单 */
.main-nav > li:hover > .sub-menu {
    display: block; /* 当鼠标悬停在 li 上时，显示下拉菜单 */
}
/* 7. 下拉菜单列表样式 */
.sub-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 8. 下拉菜单中的链接样式 */
.sub-menu li a {
    display: block;
    padding: 12px 15px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #555;
}
.sub-menu li a:hover {
    background-color: #555;
}

第三步：整合与使用
将PHP和CSS代码整合起来。
（图片来源网络，侵删）


修改PHP模板:
在你的 head.htm 文件中，找到导航的位置,用上面的PHP代码替换掉旧的导航代码。


引入CSS:
确保你的 head.htm 文件中已经正确引入了 style.css 文件。
<link rel="stylesheet" href="/templets/你的模板目录/style.css">


完整HTML结构示例:
一个完整的导航栏HTML结构可能如下：
<div class="nav-container">
    <ul class="main-nav">
        {dede:channel type='top' row='8'}
            <li>
                <a href="[field:typeurl/]">[field:typename/]</a>
                {dede:son typeid='[field:id/]'}
                    <div class="sub-menu">
                        <ul>
                            {dede:channel type='son' noself='yes'}
                            <li><a href="[field:typeurl/]">[field:typename/]</a></li>
                            {/dede:channel}
                        </ul>
                    </div>
                {/dede:son}
            </li>
        {/dede:channel}
        <!-- 可以手动添加一个“首页”链接 -->
        <li><a href="/">首页</a></li>
    </ul>
</div>



高级与自定义
高亮当前栏目
为了让用户知道当前在哪个栏目下，我们需要给当前栏目的链接添加一个特殊样式（.active）。
修改PHP代码:
在 channel 标签中添加 currentstyle 属性。
{dede:channel type='top' row='8' currentstyle="<li class='active'><a href='~typelink~'>~typename~</a></li>"}
    <li>
        <a href="[field:typeurl/]">[field:typename/]</a>
        {dede:son typeid='[field:id/]'}
            <div class="sub-menu">
                <ul>
                    {dede:channel type='son' noself='yes'}
                    <li><a href="[field:typeurl/]">[field:typename/]</a></li>
                    {/dede:channel}
                </ul>
            </div>
        {/dede:son}
    </li>
{/dede:channel}
CSS代码:
添加 .active 样式。
.main-nav > li.active > a {
    background-color: #007bff; /* 高亮颜色，例如蓝色 */
    color: #fff;
}
响应式导航（移动端适配）
在移动设备上，水平排列的导航会变得很窄，通常的做法是将其转换为一个“汉堡”菜单。
HTML结构:
添加一个用于切换的按钮。
<div class="nav-container">
    <div class="menu-toggle">☰</div> <!-- 汉堡菜单图标 -->
    <ul class="main-nav">
        <!-- 原有的导航代码放在这里 -->
        {dede:channel type='top' row='8'}
            <li>...</li>
        {/dede:channel}
    </ul>
</div>
CSS代码:
添加媒体查询，在小屏幕上隐藏主菜单,并显示切换按钮。
/* 汉堡菜单按钮样式 */
.menu-toggle {
    display: none; /* 默认隐藏 */
    font-size: 24px;
    padding: 15px;
    color: #fff;
    cursor: pointer;
}
/* 媒体查询，针对移动设备 */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* 在小屏幕上显示 */
    }
    .main-nav {
        display: none; /* 默认隐藏主菜单 */
        flex-direction: column; /* 改为垂直排列 */
        position: absolute;
        top: 50px; /* 放在按钮下方 */
        left: 0;
        width: 100%;
        background-color: #333;
    }
    .main-nav.active { /* 当菜单被激活时显示 */
        display: flex;
    }
    /* 可选：让下拉菜单在小屏幕上以块状显示 */
    .main-nav > li:hover > .sub-menu {
        display: none;
    }
    .sub-menu {
        position: static;
        box-shadow: none;
    }
}
JavaScript (jQuery) 代码:
为了实现点击按钮切换菜单的功能,需要添加一点JS代码。
jQuery(document).ready(function($) {
    $('.menu-toggle').on('click', function() {
        $('.main-nav').toggleClass('active');
    });
});
将这段JS代码放在页面底部,并确保你的模板已经加载了jQuery库。
通过以上步骤，你就可以从零开始，创建一个功能完善、样式美观且响应式的DedeCMS导航栏了，你可以根据自己网站的设计需求，自由修改CSS中的颜色、字体、间距等属性。