CSS水平ナビゲーションバー
水平ナビゲーションバー
水平方向のナビゲーションバーを作成するには、2つの方法があります。 インラインまたはフローティングリストアイテムの使用。
インラインリストアイテム
水平ナビゲーションバーを作成する1つの方法は、前のページの「標準」コードに加えて、<li>要素をインラインとして指定することです。
例
li
{
display: inline;
}
説明された例：
display: inline;-デフォルトでは、<li>要素はブロック要素です。ここでは、各リストアイテムの前後の改行を削除して、1行に表示します。
フローティングリストアイテム
水平ナビゲーションバーを作成する別の方法は、<li>要素をフロートさせ、ナビゲーションリンクのレイアウトを指定することです。
例
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
説明された例：
float: left;-floatを使用して、ブロック要素を隣り合わせにフロートさせますdisplay: block;-パディング（および必要に応じて高さ、幅、マージンなど）を指定できますpadding: 8px;-見栄えを良くするために、各<a>要素の間にパディングを指定しますbackground-color: #dddddd;-各<a>要素に灰色の背景色を追加します
ヒント：全幅の背景色が必要な場合は、各<a>要素の代わりにbackground-colorを<ul>に追加します。
例
ul
{
background-color: #dddddd;
}
水平ナビゲーションバーの例
背景色が暗い基本的な水平ナビゲーションバーを作成し、ユーザーがリンクの上にマウスを移動したときにリンクの背景色を変更します。
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
アクティブ/現在のナビゲーションリンク
現在のリンクに「アクティブ」クラスを追加して、ユーザーがどのページにいるのかをユーザーに知らせます。
例
.active {
background-color: #04AA6D;
}
リンクを右揃え
リストアイテムを右にフロートさせてリンクを右揃えにします（float:right;）：
例
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
ボーダーディバイダー
border-rightプロパティを<li>に追加して、リンクディバイダーを作成します。
例
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
固定ナビゲーションバー
ユーザーがページをスクロールしても、ナビゲーションバーがページの上部または下部に留まるようにします。
固定トップ
ul {
position: fixed;
top: 0;
width: 100%;
}
固定底
ul {
position: fixed;
bottom: 0;
width: 100%;
}
注：固定位置は、モバイルデバイスでは正しく機能しない場合があります。
灰色の水平ナビゲーションバー
薄い灰色の境界線を持つ灰色の水平ナビゲーションバーの例：
例
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
スティッキーナビゲーションバー
<ul>に追加position: sticky;して、スティッキーなナビゲーションバーを作成します。
スティッキー要素は、スクロール位置に応じて、相対要素と固定要素を切り替えます。ビューポートで特定のオフセット位置に達するまで相対位置に配置されます。その後、所定の位置に「固定」されます（position：fixedなど）。
例
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
注： Internet Explorerは、スティッキーポジショニングをサポートしていません。Safariには-webkit-プレフィックスが必要です（上記の例を参照）。また、スティッキーポジショニングを機能させるには、、、topの少なくとも1つを指定する必要があります。rightbottomleft
その他の例
レスポンシブTopnav
CSSメディアクエリを使用してレスポンシブトップナビゲーションを作成する方法。
レスポンシブSidenav
CSSメディアクエリを使用してレスポンシブサイドナビゲーションを作成する方法。
ドロップダウンナビゲーションバー
ナビゲーションバー内にドロップダウンメニューを追加する方法。
W3Schools Spacesについて聞いたことがありますか？ここでは、Webサイトを最初から作成するか、テンプレートを使用して、無料でホストできます。
無料で始めましょう❯*クレジットカードは必要ありません