第八章利用CSS制作导航栏菜单

whitesand08

已于 2024-12-03 10:29:15 修改

阅读量3.9k

点赞数 33

分类专栏：网页文章标签： css 前端 html javascript 交互

于 2024-09-26 19:17:56 首次发布

本文链接：https://blog.csdn.net/whitesandcnm/article/details/142552169

版权

8.1 1.水平顶部导航栏

水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。

1.水平顶部导航栏

创建水平顶部导航栏的基本步骤：

1. HTML 结构：

使用 <nav> 标签包含导航栏内容，使用 <ul> 和 <li> 标签创建导航菜单项。

2. CSS 样式：

使用 CSS 控制导航栏的布局，包括设置其为水平排列、背景颜色、文字颜色和响应式设计等。

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Horizontal Navigation Bar</title>

    <style>

        / 设置导航栏样式 /

        nav {

            background-color: 333;

            overflow: hidden;

        }



        / 设置导航项为水平排列 /

        nav ul {

            list-style-type: none;

            margin: 0;

            padding: 0;

            display: flex;

        }



        / 设置导航项样式 /

        nav ul li {

            float: left;

        }



        / 设置导航链接样式 /

        nav ul li a {

            display: block;

            color: white;

            text-align: center;

            padding: 14px 20px;

            text-decoration: none;

        }



        / 鼠标悬停效果 /

        nav ul li a:hover {

            background-color: ddd;

            color: black;

        }

    </style>

</head>

<body>



    <!-- 水平导航栏 -->

    <nav>

        <ul>

            <li><a href="home">Home</a></li>

            <li><a href="services">Services</a></li>

            <li><a href="about">About</a></li>

            <li><a href="contact">Contact</a></li>

        </ul>

    </nav>



</body>

</html>

功能说明：

背景颜色：导航栏的背景设为深灰色（333），文本颜色为白色。

水平排列：使用 flex 布局将导航项水平排列。

悬停效果：当用户将鼠标悬停在导航链接上时，背景变为浅灰色，文字变为黑色。

响应式设计：

可以为移动设备进一步优化导航栏，通过使用媒体查询（@media）调整布局，例如将导航栏项折叠成一个“汉堡菜单”。

需要更复杂功能或设计，可以结合 JavaScript 和其他 CSS 框架，如 Bootstrap，来增强用户体验。

2.下拉子菜单导航栏

下拉子菜单导航栏是一种常见的网页导航设计，允许用户通过点击主菜单项展开子菜单。这种设计能有效节省空间并组织内容。以下是创建下拉子菜单导航栏的基本步骤：

1.HTML 结构：

使用 <nav> 标签包含导航栏，主菜单使用 <ul> 和 <li> 标签，子菜单则嵌套在主菜单项中。

2.CSS 样式：

通过 CSS 控制下拉菜单的显示与隐藏，以及布局和样式。

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dropdown Navigation Bar</title>

    <style>

        / 设置导航栏样式 /

        nav {

            background-color: 333;

            overflow: hidden;

        }



        / 设置导航项为水平排列 /

        nav ul {

            list-style-type: none;

            margin: 0;

            padding: 0;

            display: flex;

        }



        / 设置导航项样式 /

        nav ul li {

            position: relative;

        }



        / 设置导航链接样式 /

        nav ul li a {

            display: block;

            color: white;

            text-align: center;

            padding: 14px 20px;

            text-decoration: none;

        }



        / 鼠标悬停效果 /

        nav ul li a:hover {

            background-color: ddd;

            color: black;

        }



        / 下拉菜单样式 /

        .dropdown-content {

            display: none;

            position: absolute;

            background-color: f9f9f9;

            min-width: 160px;

            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

            z-index: 1;

        }



        / 下拉菜单项样式 /

        .dropdown-content a {

            color: black;

            padding: 12px 16px;

            text-decoration: none;

            display: block;

            text-align: left;

        }



        / 悬停下拉菜单项效果 /

        .dropdown-content a:hover {

            background-color: f1f1f1;

        }



        / 显示下拉菜单 /

        nav ul li:hover .dropdown-content {

            display: block;

        }

    </style>

</head>

<body>



    <!-- 下拉子菜单导航栏 -->

    <nav>

        <ul>

            <li><a href="home">Home</a></li>

            <li><a href="services">Services</a>

                <div class&