html5 二级侧边导航栏

原创

mob649e8156b567 2024-10-30 10:09:08 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8156b567的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5 二级侧边导航栏

在现代的网页设计中，导航栏是一个至关重要的组件，它帮助用户更快地找到所需的信息。尤其是在内容较多或复杂的网站上，二级侧边导航栏可以显示层次结构、使信息更有条理，并提升用户的浏览体验。本文将为大家介绍如何使用 HTML5 创建一个简单的二级侧边导航栏，并附上代码示例。

二级侧边导航栏的设计思路

二级侧边导航栏通常由以下几个部分组成：

主导航项：展示主要分类。
子导航项：展示每个主分类的子分类。
样式: 通过 CSS 进行美化。

以下代码示例将展示如何构建一个简单的二级侧边导航栏。

HTML结构

首先，在 HTML 中定义基本的导航结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级侧边导航栏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar">
        <ul class="main-nav">
            <li>
                <a rel="nofollow" href="#">首页</a>
            </li>
            <li>
                <a rel="nofollow" href="#">关于我们</a>
                <ul class="sub-nav">
                    <li><a rel="nofollow" href="#">我们的团队</a></li>
                    <li><a rel="nofollow" href="#">我们的使命</a></li>
                </ul>
            </li>
            <li>
                <a rel="nofollow" href="#">服务</a>
                <ul class="sub-nav">
                    <li><a rel="nofollow" href="#">咨询服务</a></li>
                    <li><a rel="nofollow" href="#">支持服务</a></li>
                </ul>
            </li>
            <li>
                <a rel="nofollow" href="#">联系我们</a>
            </li>
        </ul>
    </div>
</body>
</html>

CSS 样式

接下来是一些简单的 CSS 样式，使得我们的侧边导航栏看起来更美观。将以下 CSS 代码保存为 styles.css：

body {
    font-family: Arial, sans-serif;
}

.sidebar {
    width: 200px;
    background-color: #333;
    color: white;
    position: fixed;
    height: 100%;
}

.main-nav {
    list-style-type: none;
    padding: 0;
}

.main-nav > li {
    position: relative;
}

.main-nav > li > a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: white;
    background-color: #333;
}

.main-nav > li > a:hover {
    background-color: #575757;
}

.sub-nav {
    display: none;
    list-style-type: none;
    padding-left: 20px;
}

.main-nav > li:hover .sub-nav {
    display: block;
}

.sub-nav > li > a {
    padding: 10px;
    text-decoration: none;
    color: white;
    background-color: #444;
}

.sub-nav > li > a:hover {
    background-color: #666;
}

功能特点

在以上代码中，我们创建了一个简单的 HTML 结构和相应的 CSS 样式。主要特点包括：

主导航项：每个主导航项都是一个可点击的链接。
子导航项：只有当用户鼠标悬停在某个主导航项上时，子导航项才会显示出来。
响应式设计：通过适当设置 meta 标签，使其在移动设备上也能良好显示。

使用 Mermaid 进行旅行图描绘

除了撰写代码，我们还可以使用 Mermaid 来可视化我们创建的导航结构。以下是一个简单的旅行图（journey）示例：

journey
    title 二级侧边导航栏体验
    section 首页
      用户访问首页: 5: 用户, 整体体验很好
    section 关于我们
      用户在关于我们中找到团队信息: 4: 用户, 期待更多细节
      用户阅读我们的使命: 3: 用户, 有一定了解
    section 服务
      用户在咨询服务中查看详细信息: 5: 用户, 信息清晰明了
      用户在支持服务中找到所需帮助: 5: 用户, 非常满意
    section 联系我们
      用户尝试找到联系信息: 4: 用户, 界面友好