부트스트랩 hobbyX 사이트 - part 3. navbar 만들기

부트스트랩 hobbyX 사이트 - part 3. navbar 만들기

- navbar 만들기 

style.css 

style.css 에 nav-menu 추가 설정

 

- 메뉴가 collapse 되었을때  X버튼 모양으로 변경

 

X 버튼 모양 만들기 

script.js : 버튼이 클릭될때마다 .change 속성을 넣고 빼준다. 

자바스크립트에서 스크롤 이벤트를 사용해서 custom-navbar 를 적용할 예정이다. 적절한 포지션을 찾기위해서 console.log() 로 포지션 값을 찾아본다. 

크롬에서 debug 모드로 들어가 console 값을 확인한다. 

여기서 찾은 값을 사용해서 custom-navbar 적용한다. 

 

메뉴에서 현재 오픈되어 있는 페이지에 nav-active  디자인 추가 

끝.