일렉트론기초-10.일렉트론 사이드 메뉴 만들기

이 글의 동영상 강의

https://youtu.be/_KMmhsVPbk0

완성 화면

• 아래와 같이 사이드 메뉴가 추가된 화면을 만들어보도록 하겠습니다.

완성 화면

사이드 메뉴 추가하기

이전 시간에 진행했던 타이틀바 프로젝트로 계속 진행합니다.

• Codepen에서 "side menu"로 검색합니다.
• Side Sliding Menu CSS를 선택합니다.
• https://codepen.io/EduardL/pen/aBGAy

Side Sliding Menu CSS

 

Side Sliding Menu CSS

VSCode로 이전 프로젝트를 불러옵니다.

• codepen의 html에서 <nav></nav> 부분을 복사해서, index.html의 </container>뒤에 붙여넣습니다.
• codepen의 css를 전체 복사해 src/css/menu.css를 만들고 붙여 넣습니다.
• index.css의 body를 제외한 나머지 부분을 src/css/menu.css에 붙여 넣습니다.
• 아래와 같이 src/css/menu.css를 수정합니다.

.title{
  height: auto;
  padding: 20px;
  display: inline-block;
}
...
@import url(../font-awesome-4.7.0/css/font-awesome.css);
...

• 프로젝트를 실행합니다.

npm start

• 실행화면에서 타이틀바의 높이를 확인합니다.
  • DevTools의 선택도구를 이용

• title-bar이 높이와 동일하게 side-bar의 위치를 맞춥니다.

.main-menu {
    position: absolute;
    margin-top: 58px;
    ...

• 완료된 화면은 다음과 같습니다.

사이드바 추가화면