作成方法：キャンバス外メニュー

キャンバス外メニューの作成

第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; /* コンテンツがトップから60ピクセル離れる */
  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;
}
/* スクリーンサイズが 450ピクセル以下の小さなスクリーン上では、側边ナビゲーションバーのスタイルを変更（インセットを減少し、フォントサイズを小さく） */
@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";
  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";
}

自分で試してみる

関連ページ

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