デモ：ナビゲーションバー
ナビゲーションバー
使いやすいナビゲーションを持つことは、任意のWebサイトのために重要です。
CSSを使用すると、見栄えのよいナビゲーションバーに退屈なHTMLメニューを変換することができます。
ナビゲーションバー=リンクの一覧
ナビゲーションバーは、ベースとして標準のHTMLを必要とします。
私たちの例では、標準のHTMLリストからナビゲーションバーを構築します。
ナビゲーションバーはとても使用して、基本的にはリンクのリストである<ul>と<li>要素は完璧な理にかなっています：
例
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
»それを自分で試してみてください 今度は、リストから箇条書きと段落のマージンとパディングを削除しましょう：
例を説明しました：
-
list-style-type: none;-弾丸を削除します。 ナビゲーションバーは、リストマーカーを必要としません - セット
margin: 0;とpadding: 0;ブラウザのデフォルトの設定を削除します
上記の例のコードは、両方の垂直、水平ナビゲーション・バーで使用される標準コードです。
垂直ナビゲーションバー
垂直ナビゲーション・バーを作成するには、スタイルでき<a>上記のコードに加えて、リスト内の要素を：
例を説明しました：
-
display: block;-ブロック要素としてリンクを表示するには、リンク全体の面積クリッカブル（だけではなくテキスト）を行い、そして、それは私たちが指定することができますwidth （とpadding, margin, heightなど、あなたがしたい場合は、） -
width: 60px;-ブロック要素は、デフォルトで利用可能な完全な幅を取ります。 私たちは、60ピクセルの幅を指定したいです
あなたはまたの幅を設定することができます<ul> 、との幅削除<a>ブロック要素として表示されたとき、彼らが利用可能な全幅を取り上げるとして、。 これは、前述の例と同じ結果が生成されます。
例
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} »それを自分で試してみてください 垂直ナビゲーションバーの例
灰色の背景色で基本的な縦のナビゲーションバーを作成し、ユーザーがそれらの上にマウスを移動したときのリンクの背景色を変更します。
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} »それを自分で試してみてください アクティブ/現在のナビゲーションリンク
ユーザーは、彼/彼女が上にあるページ知っているように、現在のリンクに "アクティブ"クラスを追加します。
センターリンク・境界線を追加します。
追加text-align:centerに<li>か<a>リンクをセンタリングします。
追加borderするプロパティを<ul>ナビゲーションバーの周囲に境界線を追加します。 あなたはまた、ナビゲーションバーの内側の境界線が必要な場合は、追加border-bottomすべてに<li>最後の一つを除いて、要素：
例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} »それを自分で試してみてください フルハイト固定垂直ナビゲーションバー
フルハイト、作成"sticky"サイド・ナビゲーションを：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} »それを自分で試してみてください 注：この例では、モバイルデバイス上で正常に動作しない場合があります。
水平ナビゲーションバー
水平ナビゲーションバーを作成するには、2つの方法があります。インラインを使用したり、リスト項目をフローティング。
インラインリスト項目
水平ナビゲーション・バーを構築するための一つの方法は、指定することです<li>に加えて、インラインなどの要素を"standard"上記のコード：
例を説明しました：
-
display: inline;-デフォルトでは、 <li>要素はブロック要素です。 ここでは、行が1行で表示するには、各リスト項目の前と後に壊れ削除します
フローティングリスト項目
水平ナビゲーションバーを作成する別の方法はfloatにある<li>要素を、およびナビゲーションリンクのレイアウトを指定します。
例
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} »それを自分で試してみてください 例を説明しました：
-
float: left;-隣同士にスライドするようにブロック要素を取得するために使用フロート -
display: block;-ブロック要素としてリンクを表示するには、リンク全体の面積クリッカブル（だけではなくテキスト）を行い、それが（と私たちはパディングを指定することを可能にするheight, width, marginsしたい場合など、） -
padding: 8px;-ブロック要素が使用可能な全幅を取るので、彼らはお互いに横にフロートさせることはできません。 したがって、彼らが良く見えるようにするためにいくつかのパディングを指定します -
background-color: #dddddd;-各要素にグレーの背景色を追加
ヒント：背景色を追加する<ul>の代わりに、それぞれの<a>あなたは全角背景色たい場合は要素：
水平ナビゲーションバーの例
暗い背景色で基本的な水平方向のナビゲーションバーを作成し、ユーザーがそれらの上にマウスを移動したときのリンクの背景色を変更します。
例
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;
} »それを自分で試してみてください アクティブ/現在のナビゲーションリンク
追加"active"ユーザーは、彼/彼女が上にあるページ知っているように、現在のリンクにクラスを：
右揃えリンク
右にリスト項目を浮遊することにより右揃えリンク（ 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> »それを自分で試してみてください ボーダーディバイダー
追加border-rightにプロパティを<li>リンク仕切りを作成するには：
例
/* 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;
} »それを自分で試してみてください 修正されたナビゲーションバー
上部のナビゲーションバーの滞在やページの一番下でも、ユーザーがスクロールページを作成します。
注：これらの例は、モバイルデバイス上で正常に動作しない場合があります。
グレー水平ナビゲーションバー
薄いグレーのボーダーとグレーの水平ナビゲーション・バーの例：
その他の例
レスポンシブTopnav
応答上部のナビゲーションを作成するために、CSS3メディアクエリを使用する方法。
レスポンシブSidenav
応答側のナビゲーションを作成するために、CSS3メディアクエリを使用する方法。
ドロップダウンナビゲーションバー
ナビゲーションバーの内側にドロップダウンメニューを追加する方法。