Bar navigasi CSS


Bar Navigasi CSS

Menegak

2.gif

Mendatar

1.gif

Bar Navigasi

Penggunaan bar navigasi yang mahir adalah sangat penting untuk mana-mana tapak web.

Menggunakan CSS anda boleh mengubahnya menjadi bar navigasi yang cantik dan bukannya menu HTML yang membosankan.

Bar navigasi = senarai pautan

Sebagai asas HTML standard, bar navigasi adalah satu kemestian.

Dalam contoh kami, kami akan membina bar navigasi senarai HTML standard.

Bar navigasi pada asasnya ialah senarai pautan, jadi menggunakan elemen <ul> dan <li> >

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</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>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>

</body>
</html>

Menjalankan contoh?

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Sekarang, mari kita alih keluar margin dan padding daripada senarai:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
</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>

Jalankan instance?

Klik butang "Run Instance" untuk melihat instance dalam talian

Contoh analisis:

jenis gaya senarai:tiada - alih keluar tanda kecil di hadapan senarai. Bar navigasi tidak memerlukan tag senarai

  • Alih keluar tetapan lalai penyemak imbas margin dan padding kepada 0

  • Contoh di atas Kod dalam ialah kod standard yang digunakan untuk bar navigasi menegak dan mendatar.

    • Bar Navigasi Menegak

Dalam kod di atas, kami hanya memerlukan gaya elemen <a> untuk mencipta bar navigasi menegak yang ringkas:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
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>

Jalankan instance?

Klik butang "Run Instance" untuk melihat instance dalam talian

Contoh penerangan:

paparan:sekat - memaparkan pautan untuk menyekat elemen, menjadikan keseluruhan kawasan pautan (bukan teks sahaja) boleh diklik Ia membolehkan kami menentukan lebar

  • lebar:60px - Elemen blok adalah lebar maksimum secara lalai. Kami perlu menentukan lebar 60 piksel

  • dan menambah gaya atas dasar ini untuk mencipta bar navigasi menegak yang mudah dan cantik:

    • Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>

Jalankan instance?

Klik butang "Run Instance" untuk melihat contoh dalam talian

Nota: Sila pastikan untuk menentukan lebar elemen <a> Jika anda meninggalkan lebar, IE6 mungkin mempunyai kesan yang tidak dijangka.

Bar Navigasi Mendatar

Terdapat dua cara untuk mencipta bar navigasi mendatar. Gunakan sebaris atau terapung untuk item senarai.

Kedua-dua kaedah adalah baik, tetapi jika anda mahu pautan mempunyai saiz yang sama, anda perlu menggunakan kaedah apungan.

Item senarai sebaris

Salah satu cara untuk mencipta bar navigasi mendatar ialah dengan menentukan elemen Kod di atas adalah sebaris standard:

Contoh

. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	padding-top:6px;
	padding-bottom:6px;
}
li
{
	display:inline;
}
a:link,a:visited
{
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</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>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>
</body>
</html>

Jalankan instance?

Klik butang "Run Instance" untuk melihat contoh dalam talian

Analisis instance:

  • paparan:sebaris; - Secara lalai, elemen <li> Di sini kami mengalih keluar baris baharu sebelum dan selepas setiap item senarai untuk memaparkan satu baris.

Item senarai terapung

Dalam contoh di atas pautan mempunyai lebar yang berbeza.

Untuk semua pautan mempunyai lebar yang sama, apungkan elemen <li> dan nyatakan lebar elemen <a>

Jalankan instance?

Klik butang "Run Instance" untuk melihat contoh dalam talian

Analisis instance:

float:left - Slaid menggunakan elemen blok terapung bersebelahan antara satu sama lain

    • display:block - Memaparkan pautan untuk menyekat elemen, menjadikan keseluruhannya kawasan pautan yang boleh diklik ( bukan hanya teks ), yang membolehkan kami menentukan lebar

    • lebar:120px - lebar maksimum untuk elemen blok secara lalai. Kami ingin menentukan lebar 120 piksel

    • Lagi Contoh
Contoh: Cara menggunakan pertanyaan media CSS3 untuk cipta Navigasi responsif. 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
}
li
{
	float:left;
}
a:link,a:visited
{
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</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>注意:</b> 如果!DOCTYPE 没有定义, floating 可以产生意想不到的结果.</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>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>

</body>
</html>

Jalankan tika?

Klik butang "Jalankan Contoh" untuk melihat tika dalam talian

Contoh: Cara menggunakan pertanyaan media CSS3 untuk membuat navigasi bar sisi. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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: 900px) {
    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">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div class="content">
  <h2>响应式边栏导航实例</h2>
  <p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p>
  <p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
  <h3>重置浏览器窗口大小，查看效果。</h3>
</div>

</body>
</html>

Jalankan tika?

Klik butang "Jalankan Contoh" untuk melihat tika dalam talian

Contoh: Menu lungsur Navigasi--Tetapkan menu lungsur di dalam bar navigasi

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li class="right"><a href="#about">关于</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>响应式导航栏实例</h2>
  <p>在屏幕宽度小于 600px 会重置导航栏。</p>
  <h4>重置浏览器窗口大小，查看效果。</h4>
</div>

</body>
</html>

Jalankan contoh?

Klik "Jalankan Instance" butang untuk melihat contoh dalam talian

←
→