FastBoot 스킨에 Offcanvas 적용

FastBoot 스킨에 Offcanvas 적용

  Bootstrap이 참 좋은데.. 필요한 기능 이외의 것을 구현하려면 참 3배 이상의 삽질을 해야한다는 것을 오늘 깨달았습니다. 다음에 또 스킨 제작할 일이 생긴다면 Bootstrap기반으로 하지 않을 것 같네요. 어쨌든 어찌어찌 해서 그동안 구현하고 싶었던 Offcanvas를 구현하는데 성공했습니다. Category를 자동으로 읽어들여서, 드롭다운 형태의 Offcanvas를 생성합니다. 저번 버전과 마찬가지로 적용만 하시면 아래 모습으로 사용이 가능하실 겁니다.

  

  Bootstrap에서 Offcanvas를 적용한 예제들은 구글링해보면 조금 있긴 한데, 모두 다 단점이 하나씩 있어서 결국 그냥 삽질하면서 제작했습니다. 가장 큰 문제는 다들 기존의 Navbar를 활용해서 만든 것이라 새롭게 하나 더 만들고 싶은 저와는 맞지 않았던 것이였어요. 다행히도 참조할만한 예제들은 많아서.. 조금씩 들여다보면서 가장 마음에 드는 디자인의 Offcanvas를 참고해서 만들었습니다. 가장 도움이 됐던 두 예제는 아래 것들이었습니다.

http://codepen.io/scottb/pen/javhr

http://codepen.io/tkume/pen/ckruK

  모바일 화면을 마치 앱처럼 만들고 싶어서 여러모로 끙끙대다가.. 드디어 됐네요. 좌측이 Offcanvas 메뉴, 우측에 검색모양이 기존에 나오는 메뉴입니다. 한번 보시고 의견 부탁드립니다. 특히 디자인에 관련해서는 저도 잘 느낌이 없다보니, 디자인 지적 해주시면 감사하게 받도록 하겠습니다.

  Offcanvas 반응형 티스토리 블로그 스킨이야말로 최초가 아닐까 싶습니다.

  모바일에서는 줄무늬 모양의 왼쪽 상단 버튼으로, 데스크탑에서는 화살표 모양의 버튼으로 Offcanvas를 불러올 수 있습니다. 시험삼아 한번 눌러보세요. 2일간의 대장정이 끝나네요.. 휴..

작동 영상