CSS 水平ナビゲーション バー
水平ナビゲーション バー
水平ナビゲーション バーを作成するには、2 つの方法があります。使用する列をなしてまたフローティングリスト項目。
インライン リスト アイテム
水平ナビゲーション バーを作成する 1 つの方法は、前のページの「標準」コードに加えて、 <li> 要素をインラインとして指定することです。
例の説明:
display: inline;- デフォルトでは、<li> 要素はブロック要素です。ここで、私たちは各リスト項目の前後の改行を削除して、1 行に表示します
フローティング リスト アイテム
水平ナビゲーション バーを作成するもう 1 つの方法は、 <li> 要素をフロートさせ、ナビゲーション リンクのレイアウトを指定することです。
例の説明:
float: left;- float を使用してブロック要素を取得する隣同士に浮かぶdisplay: block;-パディングを指定できます (および必要に応じて、高さ、幅、余白など)padding: 8px;- パディングを指定する各 <a> 要素の間で、彼らはよく見えるbackground-color: #dddddd;- それぞれに灰色の背景色を追加します<a> 要素
ヒント：全幅の背景色が必要な場合は、各 <a> 要素の代わりに <ul> に background-color を追加します。
水平ナビゲーション バーの例
暗い背景色の基本的な水平ナビゲーション バーを作成し、ユーザーがリンクの上にマウスを移動したときにリンクの背景色を変更します。
例
アクティブ/現在のナビゲーション リンク
現在のリンクに「アクティブな」クラスを追加して、ユーザーがどのページにいるのかをユーザーに知らせます。
右揃えのリンク
リスト項目を右にフロートさせて、リンクを右揃えにします (float:right;):
例
ボーダーディバイダー
追加border-rightプロパティを <li> に設定して、リンク ディバイダーを作成します。
例
固定ナビゲーション バー
ユーザーがページをスクロールしても、ナビゲーション バーがページの上部または下部にとどまるようにします。
ノート：モバイル デバイスでは固定位置が正しく機能しない場合があります。
グレーの水平ナビゲーション バー
薄い灰色の境界線を持つ灰色の水平ナビゲーション バーの例:
固定ナビゲーションバー
追加position: sticky;<ul> に移動して、粘着性のあるナビゲーション バーを作成します。
スティッキー要素は、スクロール位置に応じて相対要素と固定要素を切り替えます。ビューポートで指定されたオフセット位置が満たされるまで相対的に配置されます-その後、所定の位置に「固定」されます(position:fixedのように)。
ノート：Internet Explorer はスティッキー ポジショニングをサポートしていません。 Safari には -webkit- プレフィックスが必要です (上記の例を参照)。また、少なくとも 1 つを指定する必要があります。top、right、bottomまたleftスティッキーポジショニングが機能するようにします。
その他の例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。