sidebar 만들기 (feat. 시작하자마자 사이드바 실행 및 본문 밀어내기)

 

프로젝트를 하는 중에 사이드바를 만들게 되었다. 찾아보니 만드는 건 너무 쉬운데 말입니다?  꼭 내가 원하는 디자인은 없다는게 학계의 정설. 

 

내가 원했던 사이드바 

□  페이지가 시작하자마자 나오기 

□  나올 때 본문 부분을 밀어내고 나오기

□  그러면 당연히 사이드바를 닫으면 본문을 확장 시키기

 

처음에는 <input type="checkbox" checked> 를 이용해서 JS 없이 구현 하려고 했으나,  본문과 사이드바를 구분하는 과정에서 닫기 버튼이 자꾸 사라지는 끔찍한 현상 발생... ㅎ z-index를 1000; 까지 줘보기도 했으나 자꾸 어디 갔는지 보이질 않고 날 힘들게 했다. 결국 방법을 바꿔서 스크립트를 사용하게 되었다.. 

 

 

[ Html CSS ]

 

1. 사이드바 네비게이션 (sidenav) 이라는 클래스 이름을 준 div를 생성

2. 사이드바안의 내용을 클릭하면 이동할 페이지들과 닫기 버튼을 생성

3. 닫기 버튼은 &times 를 이용해 × 로 표현. 근데 지금은 저걸 없애고 &#9776 동일한 삼지창 버튼을 누르면 닫을 수 있게 구현 하려고 스크립트 재구성 중에 있다. 

4. main div 는 내용이 들어가는 body 부분

<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>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; logo</span>
  <h2> 내용이들어가는 부분</h2>
</div>

 

[ Style CSS ]

 

글씨체 변경과 사이드바 크기 지정, 그리고 스르륵 나오게 트렌지션 효과도 주었다. 마우스를 올리면 어떤 태그에 있는지 확인 하기 쉽게 색상도 변경 해주었다. 미디어 쿼리(Media Query)를 사용하여 사이드바 화면 높이에 따라 조절 되게 구현 해 주었다. 

<style>


body {
  font-family: "KimjungchulGothic-Bold";
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #FCEDAA;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #363636;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #A9CFE2;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>

 

[ Script ]

 

대망의 스크립트. 사실 스크립트를 잘 짜는게 아니라 사용 안하고 싶었는데 스크립트보다 css를 더 못한다는 사실을 망각했지 뭐람...ㅎ 

 

페이지가 시작하자마자 sidebar가 나오게 하고 싶은걸 먼저 스크립트로 만들어준다. 처음에는 trigger로 $(document).ready(function()) 를 사용해서 만들까 했는데 따로 메뉴바나 header 가 없기 때문에 HTML 문서의 로드가 완료되기만 하면 실행 시키는게 여러모로 깔끔할 것 같아서 DOMContentLoaded 를 이용해주었다. 

• DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 

function 기능들은 sidenav 가 열리고 닫혔을 때 main 과 sidebar 의 변경 사이즈들을 정의해 두었다. 

본문의 내용을 밀어내면서 사이드바가 열리고 본문이 확장되면서 사이드바가 닫히는 그런 결과를 얻을 수 있다.  

<script>

window.addEventListener('DOMContentLoaded', (event) => {
  openNav();
});

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

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