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

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

创建全屏覆盖导航

第一步 - 添加 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>

第二步 - 添加 CSS：

/* 覆盖层（背景） */
.overlay {
  /* 高度和宽度取决于您想要如何显示覆盖层（参见下面的 JS） */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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% from the top */
  width: 100%; /* 100% width */
  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;
}
/* 放置关闭按钮（右上角）Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
Kapag ang taas ng screen ay mas mababa sa 450 pixel, ay baguhin ang laki ng font ng link at uring muli ang posisyon ng close button, upang hindi sila maglapit sa isang atinad
/* Kapag ang taas ng screen ay mas mababa sa 450 pixel, ay baguhin ang laki ng font ng link at uring muli ang posisyon ng close button, upang hindi sila maglapit sa isang atinad */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Tatlong pangkat - Magdagdag ng JavaScript:

Sa sumusunod na halimbawa, kapag nangyari ang trigger, ang overlay navigation menu ay magsuslide mula gilid pataas (mula 0 hanggang 100% ng lapad):

mula gilid pumasok

/* Nakiklik ng isang tao ang span elemento para buksan */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* Nakiklik ng isang tao ang "x" simbolo sa loob ng overlay para isara */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

亲自试一试

Sa mga sumusunod na halimbawa, ang overlay navigation menu ay mula itaas pababa (mula 0 hanggang 100% ng taas).

Babala:Sa halimbawa na ito, pagsisiyasat na ang CSS ay may kaibahan sa nakaraang halimbawa (ang default na taas ngayon ay 0, ang lapad ay 100%, at ang overflow-y ay hidden (pinagbawalan ang pag-scroll sa taas, maliban sa maliit na screen)):

mula itaas pababa

/* 打开 */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* 关闭 */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

亲自试一试

Ang halimbawa na ito ay hindi gumagamit ng animasyon kapag binuksan ang navigation menu:

walang animasyon na bukas ng menu

/* 打开 */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* 关闭 */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

亲自试一试

相关页面

教程：CSS 导航栏