CSS 基礎（019_導航欄）

原始網址：http://www.w3schools.com/css/css_navbar.asp

翻譯：

CSS 導航欄

演示：導航欄

<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Navigation Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.w3-col {
    float: left;
    width: 100%;
}

@media only screen and (min-width:601px){
    .w3-col.m1 {width: 8.33333%}
    .w3-col.m2 {width:16.66666%}
    .w3-col.m3 {width:24.99999%}
    .w3-col.m4 {width:33.33333%}
    .w3-col.m5 {width:41.66666%}
    .w3-col.m6 {width:49.99999%}
    .w3-col.m7 {width:58.33333%}
    .w3-col.m8 {width:66.66666%}
    .w3-col.m9 {width:74.99999%}
    .w3-col.m10{width:83.33333%}
    .w3-col.m11{width:91.66666%}
    .w3-col.m12{width:99.99999%}
}

ul.horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.horizontal li {
    float: left;
}

ul.horizontal li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.horizontal li a:hover:not(.active) {
    background-color: #000;
}

ul.horizontal li a.active {
    background-color:#4CAF50;
}

ul.vertical {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

ul.vertical li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

ul.vertical li a:hover:not(.active) {
    background-color: #555;
    color:white;
}

ul.vertical a.active {
    background-color: #4CAF50;
    color:white;
}

ul.gray {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

ul.gray li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.gray li a:hover:not(.active) {
    background-color: #ddd;
}

ul.gray li a.active {
    color: white;
    background-color: #008CBA;
}

.rightli {
    float:right;
}

@media screen and (max-width: 408px) {
    .rightli {
       display:none;
    }
}

ul.ex {
    width:90%;
}
@media screen and (max-width: 600px) {
    ul.ex {
       width:100%;
    }
}
</style>
<body>
    <div style="padding: 16px;">
        <div class="w3-row">
            <div class="w3-col m4">
                <p>Vertical</p>
                <ul class="vertical ex">
                    <li><a class="active" href="javascript:void(0)">Home</a></li>
                    <li><a href="javascript:void(0)">News</a></li>
                    <li><a href="javascript:void(0)">Contact</a></li>
                    <li><a href="javascript:void(0)">About</a></li>
                </ul>
            </div>
            <div class="w3-col m8">
                <p>Horizontal</p>
                <ul class="horizontal">
                    <li><a class="active" href="javascript:void(0)">Home</a></li>
                    <li><a href="javascript:void(0)">News</a></li>
                    <li><a href="javascript:void(0)">Contact</a></li>
                    <li class="rightli" style="float: right"><a href="javascript:void(0)">About</a></li>
                </ul>
                <hr style="margin: 22px 0;">
                <ul class="horizontal gray">
                    <li><a href="javascript:void(0)">Home</a></li>
                    <li><a href="javascript:void(0)">News</a></li>
                    <li><a class="active" href="javascript:void(0)">Contact</a></li>
                    <li class="rightli" style="float: right"><a href="javascript:void(0)">About</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

導航欄

對任何 web 站點而言，擁有易用的導航是至關重要的。
使用 CSS，你可以把難看的 HTML 菜單轉變爲賞心悅目的導航欄。

Navigation Bar = List of Links

導航欄以 HTML 標準爲基礎。
在示例中，我們以 HTML 標準列表構建導航欄。
導航欄爲基本的鏈接列表，因此，使用 <ul>、<li> 元素使其更加完美：

<!DOCTYPE html>
<html>
<body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>

現在，讓我們去掉列表的着重號、內外邊距：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

示例解釋：

list-style-type: none; - 去掉着重號。導航欄不需要列表標記。
設置 margin: 0; 和 padding: 0; 以去掉瀏覽器默認設置。

以上示例中的代碼爲應用於垂直、水平導航欄的標準代碼。

垂直導航欄

要構建垂直導航欄，除了以上代碼，我們還可以對列表內的 <a> 元素式樣化：

li a {
    display: block;
    width: 60px;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px;
    background-color: #dddddd;
}
</style>
</head>
<body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    <p>A background color is added to the links to show the link area.</p>
    <p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

示例解釋：

display: block; - 將鏈接以塊級元素顯示使得鏈接的整個區域可點擊（不侷限於文本），這樣，我們還可以對 <a> 元素指定寬度（內、外邊距，高度等等，隨你使喚）
width: 60px; - 塊級元素在默認情況下佔據整個寬度，我們指定其寬度爲 60 像素

我們也可以設置 <ul> 的寬度，去掉 <a> 的寬度設置，作爲塊級元素（<a>），它們將以佔據着 <ul> 整個寬度的形式呈現。這種做法的結果將和我們之前的示例是一樣的：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
}

li a {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
}

li a {
    display: block;
    background-color: #dddddd;
}
</style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p>A background color is added to the links to show the link area.</p>
    <p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

垂直導航欄示例

我們將創建一個基本的導航欄，背景色置灰，當用戶移動鼠標懸停其上的時候，鏈接的背景色隨之變更：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
    <h2>Vertical Navigation Bar</h2>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

激活/當前導航鏈接（Active/Current Navigation Link）

給當前鏈接增加一個 "active" 類，讓用戶知道自己目前處在哪個頁面：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
    <h2>Vertical Navigation Bar</h2>
    <p>In this example, we create an "active" class with a green
        background color and a white text. The class is added to the "Home"
        link.</p>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

居中鏈接、添加邊框（Center Links & Add Borders）

對 <li> 或 <a> 設置 text-align: center 以達到鏈接居中的效果。
對 <ul> 設置 border 屬性即對導航欄添加邊框的效果。根據需求，我們還可以對 <li> 元素（除了最後一個）設置 border-bottom 以增加導航欄內的邊框：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
    <h2>Vertical Navigation Bar</h2>
    <p>In this example, we center the navigation links and add a border
        to the navigation bar.</p>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

全高固定垂直導航欄（Full-height Fixed Vertical Navbar）

創建一個全高、sticky 側邊導航：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <div style="margin-left: 25%; padding: 1px 16px; height: 100%;">
        <h2>Fixed Full-height Side Nav</h2>
        <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
        <p>Notice that this div element has a left margin of 25%. This is
            because the side navigation is set to 25% width. If you remove the
            margin, the sidenav will overlay/sit on top of this div.
        </p>
        <p>Also notice that we have set overflow:auto to sidenav. This
            will add a scrollbar when the sidenav is too long (for example if it
            has over 50 links inside of it).
        </p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
    </div>
</body>
</html>

注意：本示例在移動設備上的運行效果可能不佳。

水平導航欄

創建水平導航欄的方式有兩種：使用 inline 或 floating 列表項。

行內列表項（Inline List Items）

除了上述”標準“代碼外，構建水平導航欄的方式之一是指定 <li> 爲行內元素：

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}
</style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

示例解釋：

display: inline; - 默認情況下，<li> 元素爲塊級元素。在此，我們去掉了每一個列表項的前後分行符以達到單行顯示的目的。

浮動列表項（Floating List Items）

創建水平導航欄的另一種方式是將 <li> 變爲浮動元素，並且指定導航鏈接的佈局：

li {
    float: left;
}

a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}
</style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
    <p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
    <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>

示例解釋：

float: left; - 使用 float 以致塊級元素之間互爲接近。
display: block; - 將鏈接作爲塊級元素顯示使得整個鏈接區域可點擊（不侷限於文本），我們還可根據意願對其指定內外邊距、寬、高等等。
padding: 8px; - 由於塊級元素佔據整行寬度，它們不能以浮動的方式互爲接近。因此，指定適當大小的內邊距可使它們看起來更加美觀。
background-color: #dddddd; - 給每個元素的背景色置灰。

提示：如果你想讓整個寬度顯示爲一個背景色，對 <ul> 添加背景色以替代對每個 <a> 元素設置背景色：

ul {
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #dddddd;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
}
</style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p>A background color is added to the list instead of each link to create a full-width background color.</p>
    <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>

水平導航欄示例

創建一個基本的水平導航欄，背景色置黑，當用戶移動鼠標懸停其上的時候，變更鏈接的背景色：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

激活/當前導航鏈接（Active/Current Navigation Link）

對當前鏈接添加 "active" 類，讓用戶知道自己目前處在哪個頁面：

.active {
    background-color: #4CAF50;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not (.active ) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

鏈接右排列（Right-Align Links）

通過讓列表項向右浮動使鏈接右排列（float:right;）：

 <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not (.active ) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float: right"><a class="active" href="#about">About</a></li>
    </ul>
</body>
</html>

Border Dividers

對 <li> 添加 border-right 屬性以創建鏈接分割效果：

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float: right"><a href="#about">About</a></li>
    </ul>
</body>
</html>

固定導航欄（Fixed Navigation Bar）

讓導航欄停留在頁面的頂部或底部，即使在用戶滾動頁面的時候：

Fixed Top	Fixed Bottom
`ul {position: fixed; top: 0; width: 100%;}`	`ul {position: fixed; bottom: 0; width: 100%;}`

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                padding: 20px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <iframe src="iframe_a.html" width="49.5%" height="400px;"></iframe>
            <iframe src="iframe_b.html" width="49.5%" height="400px;"></iframe>
        </div>
    </body>
</html>

<!-- iframe_a.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <div
        style="padding: 20px; margin-top: 30px; background-color: #1abc9c; height: 1500px;">
        <h1>Fixed Top Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the top of the page while
            scrolling</h2>

        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
    </div>
</body>
</html>

<!-- iframe_b.html -->
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>

    <div style="padding: 20px; background-color: #1abc9c; height: 1500px;">
        <h1>Fixed Bottom Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the bottom of the page while
            scrolling</h2>

        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
    </div>
</body>
</html>

注意：這些示例在移動設備裏的運行效果可能不佳。

灰色水平導航欄

帶有淺灰色邊框的灰色水平導航欄示例：

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>

更多示例

響應式頂部導航

如何使用 CSS3 的媒體查詢（media queries）創建響應式頂部導航。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #4CAF50;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>
</head>
<body>
    <ul class="topnav">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="right"><a href="#about">About</a></li>
    </ul>
    <div style="padding: 0 16px;">
        <h2>Responsive Topnav Example</h2>
        <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
        <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
        <h4>Resize the browser window to see the effect.</h4>
    </div>
</body>
</html>

響應式側邊導航

如何使用 CSS3 的媒體查詢（media queries）創建響應式側邊導航。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}

@media screen and (max-width: 1050px){
    ul.sidenav {
        width:100%;
        height:auto;
        position:relative;
    }
    ul.sidenav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left:0;}
}

@media screen and (max-width: 400px){
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}
</style>
</head>
<body>
    <ul class="sidenav">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <div class="content">
        <h2>Responsive Sidenav Example</h2>
        <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 600px or less.</p>
        <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
        <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
        <h4>Resize the browser window to see the effect.</h4>
    </div>
</body>
</html>

下拉式導航欄

如何在導航欄內添加下拉式菜單。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li class="dropdown"><a href="#" class="dropbtn">Dropdown</a>
            <div class="dropdown-content"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a></div>
        </li>
    </ul>
    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

CSS 基礎（019_導航欄）

web前端（001_滾動效果）

CSS 基礎（020_下拉式菜單）

CSS 基礎（019_導航欄）

CSS 基礎（009_Max-width）

CSS3 基礎（005_3D 變換）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結