如何创建：全屏覆盖式导航

学习如何创建全屏覆盖导航菜单。

单击下面的按钮查看其工作方式：

実際に試してみる

创建全屏覆盖导航

第一步 - 添加 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; /* 上外側マージン 30 ピクセル、閉じるボタンと衝突を避けるため */
}
/* オーバーレイ内のナビゲーションリンクを覆う */
.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ピクセル以下の場合、リンクのフォントサイズを変更し、閉じるボタンを再配置して重なりを避ける
/* スクリーン高さが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ナビゲーションバー