만들기: 전면 덮개 네비게이션

전면 덮개 네비게이션 메뉴 만들기 방법 배우기

전면 덮개 네비게이션 만들기

첫 번째 단계 - 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; /* 자리를 유지합니다 */
  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;
  }
}

세 번째 단계 - 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 네비게이션 패널