W3.CSSナビゲーションバー
垂直：
水平：
W3.CSSナビゲーションバークラス
W3.CSSは、ナビゲーションバーに次のクラスを提供します。
| クラス | 定義 |
|---|---|
| w3-bar | HTML要素の水平コンテナ |
| w3-バーブロック | HTML要素の垂直コンテナ |
| w3-bar-item | コンテナバー要素 |
| w3-サイドバー | HTML要素の垂直サイドバー |
| w3-モバイル | すべてのバー要素をモバイルファーストレスポンシブにします |
| w3-ドロップダウン-ホバー | ホバー可能なドロップダウン要素 |
| w3-ドロップダウン-クリック | クリック可能なドロップダウン要素（ホバーの代わりに） |
基本的なナビゲーション
w3-barクラスは、HTML要素を水平方向に表示するためのコンテナです。
w3-bar-itemクラスは、コンテナ要素を定義します。
ナビゲーションバーを作成するのに最適なツールです。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
レスポンシブナビゲーション
w3-mobileクラスは、すべてのバー要素をレスポンシブにします（大画面では水平、小画面では垂直）。
中画面および大画面：
小さな画面：
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
色付きのナビゲーションバー
w3-colorクラスを使用して、ナビゲーションバーに色を追加します。
例
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
境界線のナビゲーションバー
w3-borderまたはw3-cardクラスを使用して、ナビゲーションバーの周囲に境界線を追加するか、カードとして表示します。
例
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
アクティブ/現在のリンク
リンクにw3-colorクラスを追加して、それを強調表示します。
例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
ホバー可能なリンク
ボタンの上にマウスを置くと、背景色が灰色に変わります。
ホバーで別の背景色が必要な場合は、w3-hover- colorクラスのいずれかを使用します。
例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
代わりにテキストの色を変更する場合は、 w3-hover-noneクラスでデフォルトのホバー効果をオフにし、 w3-hover-textクラスを追加します。
例
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
さまざまなホバー効果を試してみてください。
例
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
右揃えのリンク
リストアイテムのw3-rightクラスを使用して、特定のリンクを右揃えにします。
例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
ナビゲーションバーのサイズ
w3-sizeクラスを使用して、ナビゲーションバー内のリンクのフォントサイズを変更します。
例
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
w3-paddingクラスを使用して、ナビゲーションバー内の各リンクのパディングを変更します。
例
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
注：各ボタンの代わりに、ナビゲーションバーにパディングを追加することもできます。ただし、これを行う場合は、ホバー時にリンクが完全にパディングされないことに注意してください。
例
<div class="w3-bar w3-green w3-padding-16"></div>
CSSwidthプロパティを使用してリンクの幅をカスタマイズします
（注：小さな画面でリンクを100％の幅に変換するには、w3-mobileを使用します）：
例
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
アイコン付きのナビゲーションバー
例
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
上記の例の「fafa」クラスは、「FontAwesome」アイコンを表示します。
アイコンの表示方法の詳細については、W3.CSSアイコンの章を参照してください。
ナビゲーションバーのテキスト
ナビゲーションバー内のボタンの代わりにテキストが必要な場合は、w3-bar-itemクラスを使用して、ボタンと同じパディングを取得します。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
入力とボタンを備えたナビゲーションバー
例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
ドロップダウン付きのナビゲーションバー
「ドロップダウン」リンクの上にマウスを移動します。
例
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
クリック可能なドロップダウン
ホバーする代わりにドロップダウンリンクをクリックする場合は、w3-dropdown-clickを使用します。
例
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
水平ドロップダウンメニュー
ドロップダウンリンクを垂直方向ではなく水平方向に表示する場合は、ドロップダウンコンテナからw3-bar-blockクラスを削除します。
例
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
レスポンシブドロップダウンを備えたレスポンシブナビゲーションバー
ドロップダウンコンテナを含むすべてのリンクでw3-mobileクラスを使用して、レスポンシブドロップダウンリンクを備えたレスポンシブナビゲーションバーを作成します。
ブラウザウィンドウのサイズを変更して、効果を確認します。
例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.