CSS ナビゲーションバー

ナビゲーションバー

ナビゲーションバーを上手に使用することは、どの Web サイトにとっても非常に重要です。

CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーションバーに変換できます。

ナビゲーションバー = リンクのリスト

標準の HTML ベースとして、ナビゲーションバーは必須です

この例では、標準の HTML リストナビゲーションバーを構築します。

ナビゲーションバーは基本的にリンクされたリストなので、<ul> 要素と <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>

次に、リストからマージンとパディングを削除しましょう:

Example

<!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>

分析例:

list-style-type:none - リストの前にある小さなマークを削除します。ナビゲーションバーにはリストマークアップは必要ありません
ブラウザのマージンとパディングのデフォルト設定を 0 に削除します

上の例のコードは、垂直および水平ナビゲーションバーに使用される標準コードです。

垂直ナビゲーションバー

上記のコードでは、垂直ナビゲーションバーを作成するために <a> 要素のスタイルのみが必要です:

例

        <!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>

例の説明:

display:block - ブロック要素へのリンクを表示し、(テキストだけでなく) リンク領域全体をクリック可能にし、幅を指定できます
width:60px - ブロック要素はデフォルトで最大幅を持ちます。幅を 60 ピクセルに指定したいと考えています

注: 垂直ナビゲーションバーの要素の幅を必ず指定してください。

水平ナビゲーションバー

水平ナビゲーションバーを作成するには 2 つの方法があります。リスト項目には inline または float を使用します。

どちらの方法でも問題ありませんが、リンクを同じサイズにしたい場合は、float メソッドを使用する必要があります。

インラインリスト項目

水平ナビゲーションバーを作成する方法の 1 つは、

要素を指定することです。上記のコードは標準のインラインです:

Example

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>

分析例: