CSS垂直ナビゲーションバー
垂直ナビゲーションバー
垂直ナビゲーションバーを作成するには、前のページのコードに加えて、リスト内の<a>要素のスタイルを設定します。
例
li a
{
display: block;
width: 60px;
}
説明された例：
display: block;-リンクをブロック要素として表示すると、リンク領域全体（テキストだけでなく）がクリック可能になり、幅（および必要に応じてパディング、マージン、高さなど）を指定できるようになります。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 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
アクティブ/現在のナビゲーションリンク
現在のリンクに「アクティブ」クラスを追加して、ユーザーがどのページにいるのかをユーザーに知らせます。
例
.active {
background-color: #04AA6D;
color: white;
}
センターリンクと境界線の追加
text-align:center<li>または<a>に追加して、リンクを中央に配置します。
borderプロパティを<ul>に追加して、ナビゲーションバーの周囲に境界線を追加します。ナビゲーションバー内にも境界線が必要な場合border-bottomは、最後の要素を除くすべての<li>要素にaを追加します。
例
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%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
注：この例は、モバイルデバイスでは正しく機能しない可能性があります。