原始網址: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>