CSS 垂直ナビゲーション バー
垂直ナビゲーション バー
垂直ナビゲーション バーを作成するには、前のページのコードに加えて、リスト内の <a> 要素のスタイルを設定できます。
例の説明:
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;
}
アクティブ/現在のナビゲーション リンク
現在のリンクに「アクティブな」クラスを追加して、ユーザーがどのページにいるのかをユーザーに知らせます。
センターリンクとボーダーの追加
追加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;
}
フルハイト固定垂直ナビゲーションバー
フルハイトの「スティッキー」サイド ナビゲーションを作成します。
例
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 */
}
ノート：この例は、モバイル デバイスでは正しく機能しない可能性があります。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。