css로 사이드 overlay 네비게이션 만들기

구현하려는 기능

기능 설명

메뉴 아이콘을 클릭하면 사이드에 네비게이션이 오버레이로 열린다.

 

 

 

 

준비물

html, css, javascript(함수 2개)

구현 설명

 

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

 

일단 가장 css만 먼저 보면, sidenav가 위의 검은 네비게이션이다.

높이가 100%인 건 화면 높이 전체로 보여야 하고, width가 0인 건, 처음에는 안보여야 하기 때문. 

position flxed는 저거 안하면 감싸고 있는 엘리먼트에 의존하기 때문에 가령 바로 밑에 다른 엘리먼트가 있다고 치면 높이를 100%로 지정해도 화면 전체로 보여지지 않는다.

z-index야 뭐 화면 맨 위로 덮는 거고.

그 아래 나머지는 링크 태그랑 close 버튼 꾸미는 게 전부라 크기 중요하진 않다.

아, transition을 지정하는 것이 핵심 중 하나다. 저걸 지정함으로써 움직이는 게 보인다.

 

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

 

그 다음으로 볼 건 html 코드.

간단하다. sidenav가 네비게이션 보이는 부분, 나머지가 네비게이션 제외하고 화면에 보이는 부분.

 

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

 

마지막으로 자바스크립트. 아, 코드는 head에 스타일이 들어가고, html 만들 때 필요하니까.

그리고 javascript는 맨 아래. 렌더링 되고 나서 만들어도 되니까.

아무튼 말이 open/close이지 핵심은 mySidenav의 스타일 width를 250px로 지정하느냐 0으로 지정하느냐 차이다.

여기서 살짝 주의할 점은 string으로 써야 한다는 거, 그리고 저렇게 자바스크립트로 지정하지 전에는 style 값을 자바스크립트에서 호출해보면 없다는 거.

결국 정리하면, 자바스크립트에서 width를 변경하기 + transition 으로 뭔가 움직이는 것처럼 보이게 만드는 것이다.

이렇게 보면 transition이 꽤나 좋은 property인 듯.

 

출처

https://www.w3schools.com/howto/howto_js_sidenav.asp