CSS - 导航栏

上一页
下一页

导航栏是图形用户界面 (GUI) 的一部分，帮助用户浏览网站、应用程序或其他软件。对于用户快速轻松地导航到他们正在寻找的内容至关重要。

导航栏可以是水平的或垂直的，包含指向重要页面或功能的链接。

目录


 

如何设计响应式导航栏？

以下是使用 CSS 设计导航栏的常见步骤

  • HTML 结构：在无序列表 ( <ul> ) 内使用锚标记 ( <a> ) 来获取导航栏的结构。
  • 移除默认样式：使用属性 'list-style-type: none' 移除无序列表的默认样式和标签。
  • Flex 布局：对 ul 元素使用属性 display: flex 并根据需要水平或垂直设置 flex-direction 为 row 或 column。
  • 响应式设计：使用 CSS 媒体查询 根据用户屏幕宽度在导航栏的水平和垂直布局之间切换。
  • 汉堡菜单：创建一个汉堡菜单图标，在较小的屏幕上切换列表的可见性。

导航栏还可以包含其他元素，例如网站或应用程序的徽标、搜索栏或社交媒体图标。可以使用 CSS 对导航栏进行样式设置以更改其外观。

CSS 水平导航栏

以下示例显示了一个水平导航栏，这是最常见的导航栏类型，显示在网页顶部，如下所示

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            color: #4CAF50;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%; 
            display: flex;
            flex-direction: row;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>

    <h1> Welcome to TutorialsPoint </h1>
    <h3> Simple Easy Learning at your fingertips </h3>
</body>

</html>

CSS 垂直导航栏

垂直导航栏也称为侧边栏菜单。它通常位于屏幕的左侧或右侧。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            color: #4CAF50;
            display: flex;
            flex-direction: row;
            gap: 10px;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>
    <div>     
        <h1> Welcome to TutorialsPoint </h1>
        <h3> Simple Easy Learning at your fingertips </h3>
    </div>
</body>

</html>

CSS 下拉导航栏

下拉导航栏是一个带有下拉菜单的导航栏，当用户将鼠标悬停在链接上时会出现。下拉菜单是在狭小空间中显示相关项目列表的一种方式。

示例

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" 
         href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            background-color: #2c3e50;
            overflow: hidden;
        }
        .navbar a {
            display: block;
            float: left;
            color: #ecf0f1;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 16px;
            transition: background-color 0.3s, color 0.3s;
        }
        .navbar a:hover {
            background-color: #34495e;
            color: #ecf0f1;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
        }
        .dropdown {
            float: left;
        }
        .dropdown .dropbtn {
            border: none;
            color: #ecf0f1;
            padding: 14px 20px;
            background-color: #2c3e50;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        .dropdown .dropbtn:hover {
            background-color: #4CAF50;
            color: #ecf0f1;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #34495e;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            float: none;
            color: #ecf0f1;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            transition: background-color 0.3s, color 0.3s;
        }
        .dropdown-content a:hover {
            background-color: #4CAF50;
            color: white;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <a href="#" class="active-link">Tutorialspoint</a>
        <a href="#">Home</a>

        <div class="dropdown">
            <button class="dropbtn">Articles
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="#">HTML</a>
                <a href="#">CSS</a>
                <a href="#">Bootstrap</a>
            </div>
        </div>

        <a href="#">Courses</a>
    </nav>

    <h1> Welcome to TutorialsPoint </h1>
    <h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>

CSS 固定导航栏

固定导航栏是指当用户向下滚动页面时会粘贴到屏幕顶部的导航栏。要使导航栏固定，可以使用 position: fixed 属性。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            height: 2000px;
            background-color: #e6e451;
        }
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #2c3e50;
        }
        .navbar a {
            display: block;
            float: left;
            color: #ecf0f1;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 17px;
            transition: background-color 0.3s, color 0.3s;
        }
        .navbar a:hover {
            background-color: #34495e;
            color: #ecf0f1;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
        }
        .heading {
            padding-top: 70px;
            text-align: center;
            background-color: #e6e451;
            padding-bottom: 300px;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <a href="#" class="active-link">
            Tutorialspoint
        </a>
        <a href="#">Home</a>
        <a href="#">Articles</a>
        <a href="#">Courses</a>
    </nav>

    <div class="heading">
        <h1> Welcome to TutorialsPoint </h1>
        <h2> Tutorialspoint CSS Fixed Navbar </h2>
        <h3>Scrolldown....</h3>
    </div>
</body>

</html>

导航栏的分隔线

您还可以使用 border-right 属性在导航栏中的链接之间添加分隔线，如下所示

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            color: #4CAF50;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%; 
            display: flex;
            flex-direction: row;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            border-right: 5px solid green;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>

    <h1> Welcome to TutorialsPoint </h1>
    <h3> Simple Easy Learning at your fingertips </h3>
</body>

</html>

固定垂直导航栏

以下示例演示了如何使用 position: fixed 属性创建固定垂直导航栏，以确保导航栏始终位于屏幕左侧，即使用户向下滚动页面。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            height: 1000px;
            margin-left: 35%;
        }
        ul {
            background-color: #333;
            overflow: hidden;
            list-style-type: none;
            position: fixed;
            width: 30%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        li a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            font-size: 18px;
            transition: background-color 0.3s, color 0.3s;
        }
        li a:hover {
            background-color: #575757;
            color: #ffffff;
        }
        .active-link {
            background-color: #4CAF50;
            color: white;
         }
    </style>
</head>

<body>
    <ul>
        <li class="active-link">
            <a href="#" >Tutorialspoint</a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Articles</a>
        </li>
        <li>
            <a href="#">Courses</a>
        </li>
    </ul>

    <div>     
        <h1> Welcome to TutorialsPoint </h1>
        <h3> Simple Easy Learning at your fingertips </h3>
    </div>
</body>

</html>
打印页面
上一页
下一页
广告