W3.CSS は、すべての種類のナビゲーションバーを提供します：

基本的なナビゲーション

w3-navbar クラスは、横向きのナビゲーションバーを作ります：

例

Try It Yourself ❯

色付きナビゲーション・バー

例

Try It Yourself ❯

ボーダー付きナビゲーション・バー

例

Try It Yourself ❯

Active/Current リンク

例

Try It Yourself ❯

ホバー効果を持つリンク

ナビゲーションバー内のリンクにマウスポインタを重ねたときに、背景色が灰色に変わります。

ホバー時の背景色を別な色にしたいときは、w3-hover-color のいずれかを使用し、ホバー時のテキスト色を別な色にしたいときは、w3-hover-text-color クラスのいずれかを使用します：

例

Try It Yourself ❯

右揃えのリンク

例

Try It Yourself ❯

ナビゲーション・バーのサイズ

例

Try It Yourself ❯

例

Try It Yourself ❯

CSS の width プロパティで、リスト項目の幅をカスタマイズします (注：小型画面上では、それらは 100% に変換されます)：

例

Try It Yourself ❯

アイコンを使用したナビゲーション・バー

例

Try It Yourself ❯

上の例における "fa fa" クラスは、"Font Awesome" アイコンを表示します。

アイコンを表示する方法についての詳細は、W3.CSS アイコンをご覧ください。

ナビゲーション・バーのテキスト

ナビゲーション・バー内のリンクの代わりにテキストにしたい場合は、リンクと同じパディングを設定するために w3-navitem クラスを使用します。

例

Try It Yourself ❯

入力フィールド付きのナビゲーションバー

w3-navitem クラスはまた、ナビゲーションバー内に入力フィールドを配置したいときにも便利です：

例

Try It Yourself ❯

input のデフォルトのボーダーやパディングを削除するために、w3-border-0 と w3-padding-0 を使用します。

ドロップダウンを持つナビゲーション・バー

例

<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
    <a href="#">Dropdown</a>
    <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</li>
</ul>

Try It Yourself ❯

注: ドロップダウンメニューを「開く」と、ドロップダウンリンクは、アクティブであることを示すために、背景色がグレーになります。これを無効にするには、<li> と <a> の双方に w3-hover-color を追加します：

チップ: ドロップダウンテキストの横のドロップダウン記号が欲しい場合は、適切な（など）アイコンを追加します：

例

<li class="w3-dropdown-hover w3-hover-orange">
  <a class="w3-hover-orange" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>

Try It Yourself ❯

クリック可能なドロップダウン

ドロップダウン・リンクへのホバーよりものクリックの方が好みの場合は、w3-dropdown-click を使用します：

例

<li class="w3-dropdown-click">
<a onclick="myFunction()" href="javascript:void(0)">Dropdown <i class="fa fa-caret-down"></i></a>
<div id="demo" class="w3-dropdown-content w3-white w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>
</li>

Try It Yourself ❯

Dropnav

w3-dropnav クラスは、幅一杯に広がるドロップダウンメニューを作ります：

トグルできる Dropnav

上の例は、メニューを開く開くために "Dropnav" を使用し、閉じる場合は "x" アイコンを使用しています。下の例は、"Dropnav" ボタンをクリックするたびに dropnav メニューをトグルする方法を示しています：

ナビゲーション・バーの固定

ユーザがページをスクロールしたときも、ナビゲーション・バーをページの最上部、または最下部から動かないようにするために、 <ul> を <div> 要素でラップし、w3-top か w3-bottom クラスを追加します：

最上部に固定

Try it Yourself ❯

最下部に固定

Try it Yourself ❯

ナビゲーション・バーの折畳み

ナビゲーションバーが、小型画面では場所を取りすぎるときに、デフォルトによって縦に表示したくない場合は、ナビゲーションバー内の指定のリンクを非表示にしたり表示したりするためのユーティリティ・クラスを使用することができます。

下の例は、タブレットやモバイルデバイスで表示する場合、ナビゲーションバーはボタン（☰）に置き換えられ、右上に配置されます。ボタンをクリックすると、ナビゲーションバーが縦に表示されます：

トップナビ

ナビゲーションバーのもう一つの例は、w3-topnav クラスです。これは、リンク上にカーソルを乗せると、背景色の代わりにアンダーラインが追加されることを除けば、w3-navbar に同じです：

例

Try It Yourself ❯

Font Awesome アイコンを持った例

Try It Yourself ❯

サイド・ナビゲーション

w3-sidenav クラスは、縦のナビゲーション・バーを作ります：

サイド・ナビゲーションに関する詳細については、次の章に進んでください。

W3.CSS ナビゲーション

基本的なナビゲーション

例

色付きナビゲーション・バー

例

ボーダー付きナビゲーション・バー

例

Active/Current リンク

例

ホバー効果を持つリンク

例

右揃えのリンク

例

ナビゲーション・バーのサイズ

例

例

例

アイコンを使用したナビゲーション・バー

例

ナビゲーション・バーのテキスト

例

入力フィールド付きのナビゲーションバー

例

ドロップダウンを持つナビゲーション・バー

例

例

クリック可能なドロップダウン

例

Dropnav

例

トグルできる Dropnav

例

ナビゲーション・バーの固定

最上部に固定

最下部に固定

ナビゲーション・バーの折畳み

例

トップナビ

例

Font Awesome アイコンを持った例

サイド・ナビゲーション