일렉트론

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

Code Gear - AI 개발 유튜브 강의 블로그 2021. 10. 9. 20:13
반응형

이 글의 동영상 강의

https://youtu.be/_KMmhsVPbk0

완성 화면

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

완성 화면

사이드 메뉴 추가하기

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

 

Side Sliding Menu CSS

CSS Sliding menu with scroll, no JS were used...

codepen.io

 

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;
    ...
  • 완료된 화면은 다음과 같습니다.

사이드바 추가화면

반응형