FastBoot 스킨에 Offcanvas 적용

Posted by Readiz
2014.03.22 19:10 반응형 티스토리/FastBoot

FastBoot 스킨에 Offcanvas 적용



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







  







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




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

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


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


작동 영상


이 댓글을 비밀 댓글로
  1. 와우 ... 굉장히 매력적인 기능이네요...!!! 오늘은 제정신이 아닌 상태라서 상세하게 관찰하기는 어렵지만,,, 굉장히 매력적인 기능인 것만큼은 확실한 것 같네요 ^^ 제가 생각하고 있던 요소와 닮은 부분이 많습니다.

    저는 에스토크님이 사용한.............. 네비게이션은 좌측에 세로로 배치한 것에서, 추가로 리드이즈님이 적용한 오프캔버스 기능을 생각했었는데요.

    네비게이션바를 세로로 배치하고, 상단에는 지금 리드이즈님이 적용한 것처럼, 오프캔버스를 활성화 시키는 아이콘을 넣고,
    그 아래에는 아이콘들로만 만들어진 메뉴를 만드는 거였는데요. 아이콘으로 대체하기 쉬운 메뉴들만....(전체보기,방명록,RSS, 등등)

    리드이즈님이나 에스토크님처럼 생각한 내용들을 바로 적용할 수 있는 실력은 못되지만,,, 구상 만큼은......... 정말 많이 하고 있네요 ㅎㅎㅎ 즐거운 주말 저녁 되세요~
  2. 아 그리고 지금 피시방에서,,, 크롬으로 접속중인데, 우측 하단에 있는 위로가기 버튼이 동작하지를 않네요. 제가 사용하는 브라우저 문제인지, 아니면 리드이즈님의 블로그 변경사항중에 뭐가 잘못되서 그런건지는 모르겠지만,,, 혹시 몰라서 말씀 드리고 갑니다.
    • 제보 감사합니다. 놓칠뻔 했군요.
  3. 저도 적용 해보고 싶네요 ㅎ 위 링크 해주신 부분 들어가봤는데 잘 모르겠더라구요``ㅎ 자세히 포스팅해주실 생각있으신지`` 여쭤보고 싶네요~
    • 건드려야할 것이 장난이 아닙니다..~ 구조 자체를 뜯어고쳐야 해요.
      다음버전때 포함할 것입니다.

티스토리 툴바