CSSのナビゲーションバー

ナビゲーションバー

任意のウェブサイトのための熟練した使用ナビゲーションは非常に重要です。

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

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

標準的なHTMLベースのナビゲーションバーをする必要がありますように

。 私たちの例では、標準のHTMLリストのナビゲーションバーを作成します。

ナビゲーションバーは、基本的にはリンクのリストであるので、使用する<ul>と<li>要素は非常に意味があります：

それでは、リストからマージンとパディングを削除しましょう：

分析の例：

• リストスタイル型：なし - 小旗のリストを削除する前に。 ナビゲーションバーは、リストマーカーを必要としません
• 0にブラウザのデフォルト設定のマージンとパディングのセットを削除します

上記の例のコードは、使用される標準的な垂直方向と水平方向のナビゲーション・バーコードです。

垂直ナビゲーション・バー

上記のコードは、我々は唯一の垂直ナビゲーション・バーを確立し、<A>スタイル要素が必要になります。

例を示します。

• 表示：ブロック - 全体を私たちが幅を指定することができますクリック可能なリンクエリア（テキストだけでなく）、となるように、ディスプレイは、ブロック要素をリンク
• 幅：60ピクセル - デフォルトでブロック要素は、最大の幅です。 私たちは、60ピクセルの幅を指定したいです

ヒント：参照してください完全にスタイル垂直ナビゲーション・バーの例を 。

注：垂直ナビゲーション・バーの<a>の中の要素の幅を指定してください。あなたが幅を省略すると、IE6は、予期しない結果を生成することができます。

水平ナビゲーションバー

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

どちらの方法でも大丈夫ですが、あなたは同じサイズにリンクしたい場合は、フローティング方式を使用する必要があります。

インラインリスト項目

水平ナビゲーション・バーを構築するための一つが指定することです