CSS 垂直ナビゲーションバー
- 前のページ CSS ナビゲーションバー
- 次のページ CSS 水平ナビゲーションバー
科目推薦：
垂直ナビゲーションバー
例
width: 200px;
li a {
また、<ul>の幅を設定し、<a>の幅を削除することもできます。なぜなら、ブロック要素として表示される場合、それらはすべての利用可能な幅を占めるからです。これにより、前の例と同じ結果が得られます：
}
垂直ナビゲーションバーを作成するには、前章のコードに加えて、リスト内で<a>要素のスタイルを設定することもできます：
li a {例解説：また、<ul>の幅を設定し、<a>の幅を削除することもできます。なぜなら、ブロック要素として表示される場合、それらはすべての利用可能な幅を占めるからです。これにより、前の例と同じ結果が得られます：- リンクをブロック要素として表示することで、リンクエリア全体がクリック可能になります（テキストだけでなく）、幅も指定できます（必要に応じて、内側マージン、外側マージン、高さなども指定できます）。
- デフォルトでは、ブロック要素はすべての利用可能な幅を占めます。60ピクセルの幅を指定する必要があります。
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
また、<ul>の幅を設定し、<a>の幅を削除することもできます。なぜなら、ブロック要素として表示される場合、それらはすべての利用可能な幅を占めるからです。これにより、前の例と同じ結果が得られます：
}
width: 200px;
li a {
}
width: 60px;
垂直ナビゲーションバーの例
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
背景色が灰色の基本的な垂直ナビゲーションバーを作成し、ユーザーがリンクにマウスを乗せたときにリンクの背景色を変更します：
background-color: #f1f1f1;
}
width: 200px;
li a {
display: block;
color: #000;
padding: 8px 16px;
}
text-decoration: none;
/* マウスオーバー時にリンク色を変更 */
li a:hover {
background-color: #4CAF50;
}
background-color: #555;
アクティブ/現在のナビゲーションリンク
例
現在のリンクに「active」クラスを追加して、ユーザーがどのページにいるかを知らせます：
.active {
background-color: #4CAF50;
}
color: white;
中央に配置されたリンクおよび枠線の追加 text-align:center 追加して、リンクを中央に配置します。
を border 属性を <ul> に追加し、ナビゲーションバーの周りに枠線を追加します。ナビゲーションバー内に枠線を追加したい場合は、すべての <li> 要素に枠線を追加してください。 border-bottom最後の要素を除いて：
例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
全高固定垂直ナビゲーションバー
全高の「粘着」サイドナビゲーションを作成する：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全高 */
position: fixed; /* スクロール中でも粘着させる */
overflow: auto; /* サイドバーの内容が多すぎる場合、スクロールバーを有効にします */
}
注意：この例はモバイルデバイス上では正常に動作しない可能性があります。
- 前のページ CSS ナビゲーションバー
- 次のページ CSS 水平ナビゲーションバー
