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