どう作成するか：カーテン式メニュー

カーテン式メニューの作成

第1歩 - HTMLを追加：

<!-- オーバーレイ -->
<div id="myNav" class="overlay">
  <!-- 閉じるオーバーレイナビゲーションのボタン -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
<!-- 任何元素都可以用来打开/显示覆盖层导航菜单 -->
<span onclick="openNav()">open</span>

第2段 - CSSを追加する：

/* オーバーレイ（背景） */
.overlay {
  /* 高さと幅は、オーバーレイをどのように表示したいかによって決定されます（以下のJSを参照） */   
  height: 100%;
  width: 0;
  position: fixed; /* 原地固定 */
  z-index: 1; /* 顶部に配置 */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* 黒色の代替色（代替色） */
  background-color: rgba(0,0,0, 0.9); /* 透明度のある黒色 */
  overflow-x: hidden; /* 水平スクロールを無効にする */
  transition: 0.5s; /* オーバーレイがスライドインまたはスライドアウトするための 0.5 秒の遷移効果（高さまたは幅、表示方法に依存） */
}
/* コンテンツをオーバーレイ内に配置 */
.overlay-content {
  position: relative;
  top: 25%; /* 顶部から 25% の位置 */
  width: 100%; /* 100% の幅 */
  text-align: center; /* テキスト/リンクを中央に配置 */
  margin-top: 30px; /* 上外側マージン 30px、小画面で閉じるボタンと衝突を避けるため */
}
/* オーバーレイ内のナビゲーションリンクを覆う */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* ブロックレベルの表示ではなくインライン表示 */
  transition: 0.3s; /* マウスオーバー時の色の遷移効果 */
}
マウスをオーバーレイのナビゲーションリンクに合わせると、色を変更します。
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
/* 閉じるボタンの位置を設定（右上方） */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
/* スクリーン高さが450ピクセル以下の場合、リンクのフォントサイズを変更し、閉じるボタンの再定位を行い、重なりを避ける */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

第3ステップ - JavaScriptを追加：

以下の例では、トリガー時、オーバーレイナビゲーションメニューを左から右にスライド（0から100%の幅）します：

横からスライドイン

/* ユーザーが<span>要素をクリックしたら開く */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* ユーザーがオーバーレイ内の"x"シンボルをクリックしたら閉じる */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

実際に試してみる

以下の例では、オーバーレイナビゲーションメニューを上から下にスライド（0から100%の高さ）します。

注意：この例では、CSSは上の例と少し異なります（デフォルトの高さは0、幅は100%、そして overflow-y に hidden（垂直スクロールを無効にする、小画面を除く）：

上から下にスライド

/* 開く */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* 閉じる */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

実際に試してみる

この例では、アニメーションなしのナビゲーションメニューを開きます：

アニメーションなしでメニューを開く

/* 開く */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* 閉じる */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

実際に試してみる

関連ページ

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