W3.CSS サイド・ナビゲーション

❮ 前章へ 次章へ ❯

縦のナビゲーション・バー

サイド・ナビゲーションには、いくつかのオプションがあります：

例: 常にサイド・ナビゲーションを表示

<nav class="w3-sidenav w3-white" style="width:25%">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>

<div style="margin-left:25%">
... page content ...
</div>
Try It Yourself ❯

折畳み機能付きのレスポンシブ・サイドナビ

<nav class="w3-sidenav w3-collapse w3-white" style="width:200px" id="mySidenav">
  <a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

<div class="w3-main" style="margin-left:200px">
 <span class="w3-opennav w3-hide-large" onclick="w3_open()">&#9776;</span>
  ... page content ...
</div>

<script>
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
  document.getElementById("mySidenav").style.display = "none";
}
</script>
Try It Yourself ❯

コンテンツの一部を隠しナビゲーション・ペインを開く

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
Try It Yourself ❯

コンテンツの全てを隠しナビゲーション・ペインを開く

function w3_open() {
    document.getElementById("mySidenav").style.width = "100%";
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
Try It Yourself ❯

コンテンツを右にシフト

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidenav").style.width = "25%";
  document.getElementById("mySidenav").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidenav").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
Try It Yourself ❯

例: 右側のサイド・ナビゲーション

<nav class="w3-sidenav w3-white" style="width:25%;right:0">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>

<div style="margin-right:25%">
... page content ...
</div>
Try It Yourself ❯

例: 折畳み機能付き右側のサイド・ナビゲーション

<nav class="w3-sidenav w3-collapse w3-white" style="width:200px;right:0" id="mySidenav">
  <a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

<div class="w3-main" style="margin-right:200px">
 <span class="w3-opennav w3-hide-large" onclick="w3_open()">&#9776;</span>
  ... page content ...
</div>

<script>
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
  document.getElementById("mySidenav").style.display = "none";
}
</script>
Try It Yourself ❯

例: 左側 & 右側サイド・ナビゲーション

Try It Yourself ❯

サイド・ナビゲーションのスタイル設定

背景色を変更するには、 w3-sidenav に w3-color クラスを追加します。 ユーザがどのページにいるかを知らせるための、active/current リンクが欲しいのであれば、 リンクの一つに、同じ様に w3-color クラスを追加してください：




例

<nav class="w3-sidenav w3-light-grey">
  <a class="w3-green" href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Try It Yourself ❯

ボーダー付きサイド・ナビゲーション

サイドナビの周りにボーダーを追加するには、w3-border クラスを使用します：

例

<nav class="w3-sidenav w3-border">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Try It Yourself ❯

リンクに仕切りを作るためには、w3-border-bottom クラスを追加します：

例

<nav class="w3-sidenav w3-border">
  <a class="w3-border-bottom" href="#">Link 1</a>
  <a class="w3-border-bottom" href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Try It Yourself ❯

w3-card クラスは、カードのようなサイドナビを表示するために使用します：

例

<nav class="w3-sidenav w3-card-8">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Try It Yourself ❯

ホバー効果を持つリンク

サイドナビ内のリンクの上にマウスを乗せると、背景が灰色に変わります。

マウスを乗せた時の背景色を変えたい場合は、w3-hover-color クラスのいずれかを使用します：

例

<nav class="w3-sidenav">
  <a class="w3-hover-black" href="#">Link 1</a>
  <a class="w3-hover-green" href="#">Link 2</a>
  <a class="w3-hover-blue" href="#">Link 3</a>
  <a class="w3-hover-red" href="#">Link 4</a>
</nav>
Try It Yourself ❯

w3-hover-none クラスにより、デフォルトのホバー効果をオフにすることができます。 これは、ホバーしたときに（背景色以外の）テキストの色だけをハイライト表示したい場合にしばしば使用されます：

例

<nav class="w3-sidenav">
  <a class="w3-hover-none w3-hover-text-grey" href="#">Link 1</a>
  <a class="w3-hover-none w3-hover-text-green" href="#">Link 2</a>
  <a class="w3-hover-none w3-hover-text-teal" href="#">Link 3</a>
  <a class="w3-hover-none w3-hover-text-orange" href="#">Link 4</a>
</nav>
Try It Yourself ❯

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

フォントサイズを大きくする (w3-large etc):

パディングを大きくする (w3-padding etc):

例

<nav class="w3-sidenav w3-large">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
Try It Yourself ❯

アイコン付きサイド・ナビゲーション

例

<nav class="w3-sidenav w3-black" style="width:70px">
  <a href="#"><i class="fa fa-home w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-search w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-envelope w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-globe w3-xxlarge"></i></a>
</nav>
Try It Yourself ❯

ドロップダウン付きサイド・ナビゲーション

例

<nav class="w3-sidenav w3-light-grey">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="w3-dropdown-hover">
    <a 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>
  </div>
  <a href="#">Link 3</a>
</nav>
Try It Yourself ❯

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

アコーディオン付きサイド・ナビゲーション

例

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" 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>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

Try it Yourself ❯

アニメ付きサイド・ナビゲーション

Use any of the w3-animate-classes to fade, zoom or slide in side navigation:

例

<nav class="w3-sidenav w3-animate-left">
Try It Yourself ❯

サイド・ナビゲーションのオーバレイ

w3-overlay クラスは、サイドナビを開くときのオーバーレイ効果を作るために使用することができます。 w3-overlay クラスは、「ページのコンテンツ」に 50% の不透明度を持つ黒の背景を追加します - この効果は、 サイド・ナビゲーションを「ハイライト」します。

例

<!-- Sidenav -->
<nav class="w3-sidenav w3-white w3-animate-left" style="display:none;z-index:4" id="mySidenav">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav">Close</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</nav>

<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"></div>

<!-- Page content -->
<div class="w3-container">
  <span class="w3-opennav" onclick="w3_open()">☰</span>
</div>

<!-- JS to open and close sidenav with overlay effect -->
<script>
function w3_open() {
  document.getElementById("mySidenav").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidenav").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>
Try It Yourself ❯

サイド・ナビゲーションのコンテンツ

サイド・ナビゲーションの内部に好きなものは何なりと追加してください：

例

<nav class="w3-sidenav w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>Menu</h4>
  </div>

  <img src="img_fjords.jpg">

  <a class="w3-red" href="#">Home</a>
  <a href="#">Projects
    <span class="w3-tag w3-red w3-round w3-right">8</span>
  </a>
  <a href="#">About</a>
  <a href="#">Contact</a>

  <div class="w3-container">
    <div class="w3-border w3-round w3-padding w3-blue-grey">
      <span class="w3-closebtn">x</span>
      <p>Lorem ipsum box...</p>
    </div>
  </div>
</nav>
Try It Yourself ❯

❮ 前章へ 次章へ ❯