W3.CSSは、ナビゲーションバーのすべての種類を提供します。
垂直：
水平（小さな画面の垂直）：
基本的なナビゲーション
W3-ナビゲーションバークラスは、水平方向のナビゲーションバーを作成します。
例
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> »それを自分で試してみてください 色付きのナビゲーションバー
例
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> »それを自分で試してみてください フチナビゲーションバー
例
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> »それを自分で試してみてください アクティブ/現在のリンク
例
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> »それを自分で試してみてください Hoverableリンク
ときナビゲーションバー内のリンクにマウスポインタを重ねると、背景色が灰色に変わります。
あなたがホバーに異なる背景色をしたい場合は、W3-hover- 色のクラスのいずれかを使用し、あなたがホバー上の別のテキストの色をしたい場合は、W3-ホバーテキスト色のクラスのいずれかを使用します。
例
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> »それを自分で試してみてください 右揃えリンク
例
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> »それを自分で試してみてください ナビゲーションバーサイズ
フォントサイズを変更します。
例
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> »それを自分で試してみてください パディングを変更します。
例
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> »それを自分で試してみてください （：小さい画面上で、彼らは100％に変換されます注 ）CSSのwidthプロパティを使用してリスト項目の幅をカスタマイズします。
例
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> »それを自分で試してみてください アイコンとナビゲーションバー
例
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> »それを自分で試してみてください ドロップダウンでのナビゲーションバー
「ドロップダウン」リンクの上にマウスを移動します。
例
<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> »それを自分で試してみてください 注：ドロップダウンメニューが「オープン」である場合、ドロップダウンリンクは、それがアクティブであることを示すために、グレーの背景色を取得します。 これを上書きするには、両方の"]プルダウン" <LI>と<A>にW3-hover- カラークラスを追加します。
ヒント：ドロップダウンテキストの横にあるドロップダウン記号をしたい場合は、のような（適切なアイコンを追加 ）：
例
<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> »それを自分で試してみてください あなたが代わりにホバーのドロップダウンリンクをクリックすることを好む場合はW3-ドロップダウンクリックして使用します。
例
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">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> »それを自分で試してみてください 修正されたナビゲーションバー
場合でも、ユーザーがスクロール、上部にあるか、ページの一番下に滞在するページをナビゲーションバーを強制するには、<UL>周りの<div>要素をラップし、W3トップまたはW3-ボトムクラスを追加します。
ナビゲーションバーを折りたたみ
ナビゲーションバーは、小さな画面上で場所を取りすぎると、あなたは、デフォルトでは垂直に表示したくないときは、非表示とナビゲーションバー内の特定のリンクを表示するためのユーティリティクラスを使用することができます。
タブレットおよびモバイルデバイスに表示される場合は、以下の例では、ナビゲーションバーには、右上のボタン（☰）に置き換えられます。 ボタンをクリックすると、ナビゲーションバーが縦に表示されます。
Topnav
ナビゲーションバーの別の例は、W3-topnavクラスです。 それはあなたが代わりに背景色の、リンクにカーソルを合わせると、それはアンダーラインを追加することを除いて、W3-ナビゲーションバーに似ています。
例
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> »それを自分で試してみてください フォント素晴らしいアイコンと例
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> »それを自分で試してみてください サイドナビゲーション
W3-sidenavクラスは、垂直ナビゲーション・バーを作成します。
移動し、次の章サイド・ナビゲーションについての詳細を学ぶために。