最新のWeb開発のチュートリアル
 

W3.CSSナビゲーション


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-ボトムクラスを追加します。

固定トップ

<div class="w3-top">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
»それを自分で試してみてください

固定ボトム

<div class="w3-bottom">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
»それを自分で試してみてください

ナビゲーションバーを折りたたみ

ナビゲーションバーは、小さな画面上で場所を取りすぎると、あなたは、デフォルトでは垂直に表示したくないときは、非表示とナビゲーションバー内の特定のリンクを表示するためのユーティリティクラスを使用することができます。

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


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クラス垂直ナビゲーション・バーを作成します。

移動し、次の章サイド・ナビゲーションについての詳細を学ぶために。