网页html5嵌入侧边分类导航-网页设计-锦华智联科技

HTML5: 用于构建导航的基本结构。
CSS3: 用于样式设计、布局和动画效果。
JavaScript (原生): 用于实现交互功能，如点击展开/收起、高亮当前项等。

基础静态导航

这是最简单的形式,适合分类层级较少、不需要交互的情况。

（图片来源网络，侵删）

HTML 结构

我们使用语义化的HTML5标签,如 <nav>、<ul>、<li>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">基础侧边导航</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 侧边导航栏 -->
        <nav class="sidebar">
            <h3>产品分类</h3>
            <ul>
                <li><a href="#">电子产品</a></li>
                <li><a href="#">服装鞋帽</a></li>
                <li><a href="#">家居生活</a></li>
                <li><a href="#">图书音像</a></li>
                <li><a href="#">运动户外</a></li>
            </ul>
        </nav>
        <!-- 主要内容区域 -->
        <main class="main-content">
            <h1>欢迎访问</h1>
            <p>这里是网站的主要内容区域。</p>
        </main>
    </div>
</body>
</html>

CSS 样式

使用Flexbox或Grid来轻松实现侧边栏和主内容的并排布局。

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}
.container {
    display: flex; /* 使用Flexbox布局 */
    min-height: 100vh;
}
/* 侧边导航栏样式 */
.sidebar {
    width: 250px;
    background-color: #333;
    padding: 20px;
    color: white;
}
.sidebar h3 {
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.sidebar ul {
    list-style: none; /* 移除列表前的点 */
}
.sidebar li {
    margin-bottom: 10px;
}
.sidebar a {
    color: #ccc;
    text-decoration: none;
    display: block; /* 让链接块状化，可以设置宽高和padding */
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}
.sidebar a:hover {
    background-color: #555;
}
区域样式 */
.main-content {
    flex: 1; /* 占据剩余所有空间 */
    padding: 20px;
    background-color: #fff;
}

带有多级折叠菜单的导航

这是电商网站最常用的形式,可以展示分类的层级关系。

HTML 结构

我们需要为有子分类的 <li> 添加一个可点击的按钮。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">多级折叠导航</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <nav class="sidebar">
            <h3>全部商品分类</h3>
            <ul class="category-list">
                <!-- 一级分类 -->
                <li class="category-item">
                    <a href="#" class="category-link">
                        <span>电子产品</span>
                        <span class="toggle-icon">▼</span>
                    </a>
                    <!-- 二级分类 -->
                    <ul class="sub-category-list">
                        <li><a href="#">手机通讯</a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li><a href="#">家用电器</a></li>
                    </ul>
                </li>
                <li class="category-item">
                    <a href="#" class="category-link">
                        <span>服装鞋帽</span>
                        <span class="toggle-icon">▶</span>
                    </a>
                    <ul class="sub-category-list">
                        <li><a href="#">男装</a></li>
                        <li><a href="#">女装</a></li>
                        <li><a href="#">童装</a></li>
                    </ul>
                </li>
                <li class="category-item">
                    <a href="#" class="category-link">
                        <span>图书音像</span>
                        <span class="toggle-icon">▶</span>
                    </a>
                    <ul class="sub-category-list">
                        <li><a href="#">文学小说</a></li>
                        <li><a href="#">经管励志</a></li>
                        <li><a href="#">音乐</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <main class="main-content">
            <h1>欢迎访问</h1>
            <p>点击左侧分类查看更多内容。</p>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

为子列表添加默认隐藏样式,并为展开/收起状态准备样式。

/* style.css (在方案一的基础上添加) */
.category-list, .sub-category-list {
    list-style: none;
}
.sub-category-list {
    display: none; /* 默认隐藏子列表 */
    padding-left: 20px; /* 子列表向右缩进 */
    margin-top: 5px;
}
/* 当父级有 'active' 类时，显示子列表 */
.category-item.active .sub-category-list {
    display: block;
}
.category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}
/* 当父级有 'active' 类时，旋转图标 */
.category-item.active .toggle-icon {
    transform: rotate(90deg);
}

JavaScript 交互

实现点击父级分类展开/收起子列表的功能。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    // 获取所有的分类项
    const categoryItems = document.querySelectorAll('.category-item');
    categoryItems.forEach(item => {
        const link = item.querySelector('.category-link');
        link.addEventListener('click', (event) => {
            // 阻止链接的默认跳转行为
            event.preventDefault();
            // 切换当前项的 'active' 类
            // 如果当前项已经是激活状态，则移除；否则添加。
            item.classList.toggle('active');
        });
    });
});

响应式侧边导航（移动端友好）

在移动设备上,侧边导航通常会变成一个可以滑入滑出的菜单。

HTML 结构

添加一个菜单按钮（Hamburger Icon）来触发侧边栏的显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">响应式侧边导航</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个图标库，这里使用 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏，包含菜单按钮 -->
        <header class="main-header">
            <button id="menu-toggle" class="menu-toggle">
                <i class="fas fa-bars"></i>
            </button>
            <h1>网站标题</h1>
        </header>
        <!-- 侧边导航栏 -->
        <nav id="sidebar" class="sidebar">
            <h3>全部商品分类</h3>
            <ul class="category-list">
                <!-- ... (与方案二相同的分类列表) ... -->
            </ul>
        </nav>
        <!-- 主要内容区域 -->
        <main class="main-content">
            <h1>欢迎访问</h1>
            <p>点击左上角菜单按钮打开侧边导航。</p>
        </main>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

为移动端添加媒体查询,并设置侧边栏的初始状态为隐藏。

/* style.css (在方案二的基础上添加) */
.main-header {
    background-color: #444;
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    margin-right: 15px;
}
/* 默认在移动端隐藏侧边栏 */
.sidebar {
    position: fixed; /* 固定定位 */
    top: 0;
    left: -250px; /* 完全移出视口 */
    height: 100vh;
    width: 250px;
    background-color: #333;
    transition: left 0.3s ease-in-out; /* 平滑滑入滑出动画 */
    z-index: 1000; /* 确保在最上层 */
}
/* 当侧边栏被激活时，显示出来 */
.sidebar.active {
    left: 0;
}
/* 在大屏幕上，侧边栏恢复为普通布局 */
@media (min-width: 768px) {
    .menu-toggle {
        display: none; /* 隐藏菜单按钮 */
    }
    .sidebar {
        position: static; /* 取消固定定位 */
        left: 0; /* 恢复原始位置 */
        height: auto;
        transition: none; /* 移除不必要的动画 */
    }
    .container {
        display: flex; /* 恢复Flex布局 */
    }
    .main-content {
        flex: 1;
    }
}

JavaScript 交互

控制 active 类的添加和移除，从而控制侧边栏的显示和隐藏。

// script.js (更新)
document.addEventListener('DOMContentLoaded', () => {
    const menuToggle = document.getElementById('menu-toggle');
    const sidebar = document.getElementById('sidebar');
    // 菜单按钮点击事件
    menuToggle.addEventListener('click', () => {
        sidebar.classList.toggle('active');
    });
    // 点击侧边栏外部区域关闭菜单（可选）
    document.addEventListener('click', (event) => {
        // 如果点击的不是菜单按钮，也不是侧边栏本身，并且侧边栏是激活状态
        if (!menuToggle.contains(event.target) && !sidebar.contains(event.target) && sidebar.classList.contains('active')) {
            sidebar.classList.remove('active');
        }
    });
    // 方案二中的折叠菜单逻辑
    const categoryItems = document.querySelectorAll('.category-item');
    categoryItems.forEach(item => {
        const link = item.querySelector('.category-link');
        link.addEventListener('click', (event) => {
            event.preventDefault();
            item.classList.toggle('active');
        });
    });
});

总结与选择建议

方案	特点	适用场景
基础静态	结构简单，无交互，样式固定。	个人博客、公司官网的简单导航。
多级折叠	支持分类层级，有展开/收起交互，用户体验好。	电商网站、内容丰富的门户网站。
响应式	兼顾桌面和移动端，通过滑入滑出节省空间。	现代化的所有网站，特别是移动端用户多的网站。

您可以根据您的具体需求,选择最适合的方案进行修改和扩展，您可以从方案二开始，然后添加方案三的响应式特性，打造一个功能完善的侧边导航。