作成方法：サイドナビゲーション

アニメーション付きの侧边ナビゲーションを作成

第1ステップ - HTMLを追加：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- 任意の要素を使用して侧边导航を開く -->
<span onclick="openNav()">open</span>
<!-- 侧边导航将页面内容推向右侧的情况下，请将所有页面内容放在此div内部（如果只想让侧边导航停留在页面顶部，则不使用此设置） -->
<div id="main">
  ...
</div>

第2ステップ - CSSを追加：

/* サイドナビゲーションメニュー */
.sidenav {
  height: 100%; /* 100%の高さ */
  width: 0; /* 0の幅 - JavaScriptを使用してこの設定を変更 */
  position: fixed; /* 位置固定 */
  z-index: 1; /* 顶部に固定 */
  top: 0; /* 顶部に固定 */
  left: 0;
  background-color: #111; /* 黒 */
  overflow-x: hidden; /* 水平スクロールを無効に */
  padding-top: 60px; /* コンテンツをトップから60pxの位置に配置 */
  transition: 0.5s; /* 0.5秒のトランジション効果、サイドナビのスライド表示に使用 */
}
/* ナビゲーションメニューのリンク */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* ナビゲーションリンクにマウスを合わせると、その色を変更します */
.sidenav a:hover {
  color: #f1f1f1;
}
/* 閉じるボタンの位置とスタイル（右上角） */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* ページ内容のスタイルを設定 - 侧边导航を開くときにページ内容を右側に押し出したい場合は、この設定を使用します。 */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 高さが450px未満の小さなスクリーン上で、侧边ナビゲーションのスタイルを変更（内側マージンとフォントサイズを減らす） */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

第3步 - JavaScriptを追加：

以下の例では、侧边导航がスライドインし、その幅が250pxに設定されます：

侧边导航覆盖实例

/* 侧边导航的宽度设置为250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* 侧边导航的宽度设置为0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

実際に試してみる

以下の例では、侧边导航がスライドインし、ページ内容を右側に押し出します（侧边导航宽度的值也用于设置“页面内容”的左外边距）：

侧边导航推动内容

/* 侧边导航的宽度设置为250px，页面内容的左外边距设置为250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* 侧边导航的宽度设置为0，页面内容的左外边距设置为0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

実際に試してみる

以下の例では、側边ナビゲーションがスライドインし、ページ内容が右側に押し出されます。ただし、この場合、body要素に40%の不透明度を持つ黒い背景色を追加して、側边ナビゲーションを「強調」します。

不透明度を持つ側边ナビゲーションが内容を押し出す

/* 侧边导航の幅を250pxに設定し、ページ内容の左外側マージンを250pxにし、bodyに黒い背景色を追加 */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 侧边导航宽度设置为 0，页面内容左外边距为 0，body 背景色为白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

実際に試してみる

以下の例では、側边ナビゲーションは左側からスライドインし、ページ全体を覆います（幅が100%）:

全幅の側边ナビゲーション：

/* 開く側边ナビゲーション */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 閉じる/隠す側边ナビゲーション */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

実際に試してみる

以下の例では、側边ナビゲーションメニューを開閉する際にアニメーション効果がありません。

アニメーションなしの Sidenav

/* 開く側边ナビゲーション */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 閉じる/隠す側边ナビゲーション */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

実際に試してみる

以下の例では、右側のナビゲーションメニューの作成方法を示しています：

右側のナビゲーション：

.sidenav {
  right: 0;
}

実際に試してみる

以下の例では、常に表示される側边ナビゲーションメニュー（固定位置）の作成方法を示しています：

常に表示される側边ナビゲーション：

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 侧边导航的宽度相同 */
}

実際に試してみる

関連ページ

チュートリアル：CSSナビゲーションバー