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