当前位置：首页 > 前端开发 > 正文

如何用html制作三级导航条

三级导航条，先以` 和`标签构建HTML结构，再通过CSS设置样式，如隐藏子菜单、定位显示位置等，还可添加JavaScript实现交互效果

网页设计中,三级导航条是一种常见的导航结构，它能够帮助用户更清晰地浏览网站内容，以下是如何使用HTML制作三级导航条的详细步骤和示例代码：

HTML结构搭建

三级导航条的HTML结构通常由多个嵌套的<ul>（无序列表）和<li>（列表项）标签组成，以表示不同层级的菜单，每个<li>标签内可以包含一个链接<a>作为菜单项的文本，以及一个嵌套的<ul>来表示下一级菜单。

如何用html制作三级导航条 第1张

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">三级导航条示例</title>
    <style>
        / CSS样式将在后续部分介绍 /
    </style>
</head>
<body>
    <nav>
        <ul class="nav">
            <li><a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1-1</a>
                        <ul>
                            <li><a href="#">三级菜单1-1-1</a></li>
                            <li><a href="#">三级菜单1-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单1-2</a>
                        <ul>
                            <li><a href="#">三级菜单1-2-1</a></li>
                            <li><a href="#">三级菜单1-2-2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">一级菜单2</a>
                <ul>
                    <li><a href="#">二级菜单2-1</a>
                        <ul>
                            <li><a href="#">三级菜单2-1-1</a></li>
                            <li><a href="#">三级菜单2-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二级菜单2-2</a>
                        <ul>
                            <li><a href="#">三级菜单2-2-1</a></li>
                            <li><a href="#">三级菜单2-2-2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

CSS样式设计

为了使导航条在视觉上层次分明且具备交互效果,我们需要使用CSS进行样式设计，以下是一些关键的CSS样式设置：

  1. 重置默认样式：清除列表的默认样式，如list-style、margin和padding。
  2. 设置导航条背景和文字颜色：导航条的背景色与文字颜色会形成对比，以便用户清晰阅读。
  3. 布局和定位：使用display: none;隐藏子菜单，当鼠标悬停在父菜单上时，通过:hover伪类显示子菜单，使用position: absolute;来定位子菜单的位置。
  4. 过渡效果：为了增强用户体验，可以为子菜单的显示和隐藏添加过渡效果。

示例CSS代码：

 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav {
    background-color: #333; / 导航条背景色 /
    color: #fff; / 文字颜色 /
    font-family: Arial, sans-serif; / 字体 /
}
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; / 使用flex布局使一级菜单水平排列 /
}
.nav > li {
    position: relative; / 相对定位，为子菜单的定位提供参考 /
}
.nav > li > a {
    display: block;
    padding: 15px 20px; / 内边距 /
    color: #fff; / 文字颜色 /
    text-decoration: none; / 去除下划线 /
}
.nav > li:hover > a {
    background-color: #555; / 鼠标悬停时一级菜单背景色变化 /
}
.nav > li > ul {
    display: none; / 隐藏二级菜单 /
    position: absolute; / 绝对定位 /
    top: 100%; / 二级菜单位于一级菜单下方 /
    left: 0;
    background-color: #444; / 二级菜单背景色 /
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 150px; / 设置最小宽度 /
}
.nav > li:hover > ul {
    display: block; / 鼠标悬停时显示二级菜单 /
}
.nav > li > ul > li {
    position: relative; / 相对定位，为三级菜单的定位提供参考 /
}
.nav > li > ul > li > a {
    display: block;
    padding: 10px 20px; / 内边距 /
    color: #fff; / 文字颜色 /
    text-decoration: none; / 去除下划线 /
}
.nav > li > ul > li:hover > a {
    background-color: #666; / 鼠标悬停时二级菜单项背景色变化 /
}
.nav > li > ul > li > ul {
    display: none; / 隐藏三级菜单 /
    position: absolute; / 绝对定位 /
    top: 0; / 三级菜单与二级菜单对齐 /
    left: 100%; / 三级菜单位于二级菜单右侧 /
    background-color: #555; / 三级菜单背景色 /
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 150px; / 设置最小宽度 /
}
.nav > li > ul > li:hover > ul {
    display: block; / 鼠标悬停时显示三级菜单 /
}

JavaScript实现交互效果（可选）

虽然纯CSS也可以实现三级导航条的基本功能,但通过JavaScript可以进一步增强交互性，例如点击后显示和隐藏子菜单，或者实现更复杂的动画效果，以下是一个简单的JavaScript示例，用于点击一级菜单时显示或隐藏二级菜单：

示例JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
    var navItems = document.querySelectorAll('.nav > li');
    navItems.forEach(function(item) {
        item.addEventListener('click', function(event) {
            var subMenu = this.querySelector('ul');
            if (subMenu) {
                event.preventDefault(); // 阻止默认行为（跳转）
                var isVisible = subMenu.style.display === 'block';
                subMenu.style.display = isVisible ? 'none' : 'block'; // 切换显示状态
            }
        });
    });
});

响应式设计（可选）

为了确保导航条在不同设备上的良好体验,我们还需要进行响应式设计，可以使用媒体查询（Media Queries）来调整导航条在小屏设备上的显示效果，在小屏设备上，可以将水平排列的一级菜单改为垂直排列，并调整子菜单的显示方式。

示例响应式CSS代码：

@media (max-width: 768px) {
    .nav {
        flex-direction: column; / 垂直排列一级菜单 /
    }
    .nav > li > ul {
        position: static; / 取消绝对定位，使二级菜单正常流布 /
        display: none; / 隐藏二级菜单 /
    }
    .nav > li:hover > ul {
        display: block; / 鼠标悬停时显示二级菜单 /
    }
}

完整示例代码

将上述HTML、CSS和JavaScript代码整合在一起，即可得到一个完整的三级导航条示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">三级导航条示例</title>
    <style>
        / 上述CSS代码 /
    </style>
</head>
<body>
    <nav>
        <ul class="nav">
            <!-上述HTML结构 -->
        </ul>
    </nav>
    <script>
        // 上述JavaScript代码
    </script>
</body>
ML 三级
0

相关文章