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>
列印頁面
上一頁
下一頁
廣告