구글이 앞장서고있는 머티리얼디자인(Material design)을 적용한 Offcanvas입니다.


    Offcanvas는 Fastboot 스킨의 핵심기능이죠. 블로그를 마치 스마트폰 앱처럼 만들어주는 기능이었습니다.


    저는 거기에 약간의 경량화와 함께 기능개선, 디자인적용을 했습니다.



    Material 디자인 offcanvas 소개


      


    디자인은 최근 트랜드인 구글의 머티리얼디자인을 모방했습니다.(거의 대놓고 배낀 수준..)



    데스크탑에서는 여기,


    모바일에서는 여기를 누르면 offcanvas 메뉴가 나타납니다.


    따로 닫기 버튼은 없고, 검은 여백을 클릭하면 닫아집니다. (스마트폰에서 앱인줄알고 '뒤로'버튼 누르지 마세요 ^^)




    적용 방법

    Fastboot스킨의 핵심을 건드리기 때문에 적용방법이 다소 복잡합니다.

    반드시 '스킨-스킨저장'을 하신 후에 차근차근 따라해주세요.


    1. 

    skin.html에서 <div id="lnav"></div>를 찾습니다.


    2.

    찾은 <div id="lnav"></div>를 지우고 다음 내용을 붙여넣습니다.

    <div id="lnav">

    <div id="lnav_profile">

     <img src="[##_blog_link_##]favicon.ico">

     <a href="/"><div id="lnav_name">[##_title_##]</div></a>

    </div>

    <div id="lnav_login"><div style="display:table-cell"></div></div>

    <ul>

     <li>

    <a href="/tag"><i class="fa fa-tags fa-fw"></i> 태그</a>

     </li>

     <li>

    <a href="/toolbar/popup/link/" target="_blank"><i class="fa fa-link fa-fw"></i> 링크 추가</a>

     </li>

     <li>

    <a href="/guestbook"><i class="fa fa-book fa-fw"></i> 방명록</a>

     </li>

    </ul>

    <ul id="lnav_admin" style="display:none;">

     <li><a href="javascript:function none(){return false}"><i class="fa fa-cogs fa-fw"></i> 관리자 메뉴</a>

     <ul>

    <li>

     <a href="/admin"><i class="fa fa-cog fa-fw"></i> 관리자 모드</a>

    </li>

    <li>

     <a href="/admin/entry/post"><i class="fa fa-pencil fa-fw"></i> 글쓰기</a>

    </li>

     </ul>

     </li>

    </ul>

    </div>

    <div id="background_blocker"></div>


    3. Fastboot '로그인/로그아웃 패치'를 적용했는지 확인합니다. ->  http://blog.readiz.com/236

    적용했다면 Login Button Mapping 스크립트가 </html>아랫줄에 있어야합니다.


    그리고 마지막줄의 $('#lnav ul li ul a')[0].outerHTML = tmpLogin.outerHTML;는 삭제해주셔야합니다.



    4. 

    material_offcanvas.js


    스킨에 위 두파일을 업로드 한 후(이미지파일 포함)

    skin.html에서 

    <script src="./images/fastboot_offcanvas.min.js"></script>를 찾아

    <script src="./images/material_offcanvas.js"></script> 로 수정합니다.


    (적용하시는 분들의 편의와 추후 버그패치 등을 위해 제 남는블로그에 업로드된 스크립트 주소를 사용하였으나, 원치않으시면 직접 업로드하셔도 좋습니다.)


    5.skin.html에서 

    <div id="secondNavWrap" class="hidden-xs">를 찾아 아랫줄에 다음을 삽입합니다.

    <div id="toggle" class="lntoggle"><i class="fa fa-bars"></i></div>


     

    6. 

    style.css에서 #lnav로 시작하는 모든 항목을 지웁니다.



    7. 아래 내용을 style.css 맨 아랫줄에 붙여넣습니다.


    #lnav {

      width:220px;

      height:100%;

      position:fixed;

      top:0; left:-250px;

      background:#fff;

      z-index:1050;

      transition:.3s;

      overflow-y:auto;

    }

    #lnav.lnav_open{

      left:0px;

      box-shadow:rgba(0,0,0,0.5) 0 10px 10px 5px,

        rgba(0,0,0,0.5) 0 0 0 9999px;

    }

    #lnav ul,#lnav li {

      overflow:hidden;

      padding:0;

      margin:0;

    }

    #lnav ul {

      border-left:rgba(100,100,100,.5) solid 1px;

      margin:5px 0 0 5px;

    }

    #lnav>ul li {

      padding:5px;

    }

    #lnav>ul>li:hover{

      background:#eee;

    }

    #lnav>ul>li li:hover{

      background:#bbb;

    }

    #lnav a, #lnav li {

      width:100%;

      color:#333;

      text-decoration:none;

    }

    #lnav .actoggle >a:after {

      content:"+";

      font-weight:900;

      position:absolute;

      right:5px;

    }

    #lnav .actoggle.acopen >a:after {

      content:"-";

    }

    #lnav_profile{

      background:url('./images/material.jpg');

      background-size:cover;

      height:70px;

      padding:5px;

    }

    #lnav_profile img {

      width:50px; height:50px;

      max-width:50px;

      max-height:50px;

      margin:10px 0;

      background:#fff;

      border-radius:50%;

    }

    #lnav_name{

      position:absolute;

      top:40px;

      left:70px;

      color:#fff;

      font-weight:900;

      font-size: 15px;

    }

    #lnav_login {

      display:table;

      background:rgba(255,255,255,0.5);

      width:30px;height:30px;

      border-radius:50%;

      position:absolute;

      top:10px;left:180px;

      color:#fff;

    }

    #lnav_login>div {

      display:table-cell;

      text-align:center;

      vertical-align:middle;

    }

    .actoggle>ul{display:none}

    #background_blocker{display:none;}

    #lnav.lnav_open + #background_blocker {

      display:block;

      position:fixed;

      top:0;right:0;bottom:0;left:0;

      z-index:1049;

    }

    #toggle {

      position: fixed;

      top: 0; left: 0;

      width: 50px;

      height: 30px;

      line-height: 30px;

      text-align: center;

      vertical-align: middle;

      color: #fff;

      z-index:100;

    }

    html.lnav_open{overflow:hidden;}


    v1.1 업데이트

    • html 구조 개선
    • 스크롤 개선
    • 하단에 링크를 추가할 수 있습니다.
    • 뒤로가기 버튼으로 offcanvas를 닫을 수 있습니다.

    업데이트 하러 가기

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon wtbx
      2015.01.09 17:16 신고

      포스트 잘 봤어요
      소스 가져다가 여기저기 꾸미고 다됐다~ 싶은 순간...
      클릭하면 해당 카테고리로 안가져요 ㅠ
      고치려고 하루를 투자했는데
      안되네요ㄷㄷ
      수정 부탁드려요~ ㅎ

      • BlogIcon 뭐하라
        2015.01.09 17:48 신고

        의견 반영하여 수정했습니다 ^^
        캐시때문에 바로 적용되지 않을 수도 있으니
        <script src="http://cfs.tistory.com/custom/blog/168/1686514/skin/images/material_offcanvas.js"></script>

        <script src="http://cfs.tistory.com/custom/blog/168/1686514/skin/images/material_offcanvas.js?1"></script>
        로 수정해서 적용해보세요~

      • BlogIcon wtbx
        2015.01.09 17:58 신고

        바로 해주셨네요

        감사합니다~

        이따 적용해볼게요

      • BlogIcon 뭐하라
        2015.01.09 19:36 신고

        적용하시면 알려주세요~
        이렇게 카테고리 많은데서 테스트가 필요했거든요 ^^

    • BlogIcon wtbx
      2015.01.09 20:16 신고

      현재 꾸미는 중인데 아까 깜박하고 말씀안드렸네요
      그 토글 후에 위에서 보면 관리자 메뉴 있고 그아래 관리자모드랑 글쓰기 잖아요
      html 상에서요
      근데 실제 적용해보면 로그인 로그아웃으로 나와용~

      • BlogIcon wtbx
        2015.01.09 20:33 신고

        일단 1차 적용했어요 ㅎㅎ 감사합니다~~ 그나저나 클릭위치 때문에 제 상단 아이콘들 좀 손봐야겠네요 여백 약간 주면 될듯요 감사합니당~

      • BlogIcon 뭐하라
        2015.01.09 20:43 신고

        3번에 로그인버튼 매핑하는 부분에서
        $('#lnav ul li ul a')[0].outerHTML = tmpLogin.outerHTML;
        이 줄을 삭제해 주셔야해요~ 이걸 본문에 빼먹었네요

      • BlogIcon wtbx
        2015.01.09 20:47 신고

        ㅎㅎ지금다시 고치는 중입니다...테스트를 좀 해보니 정말 좋네요 특히나 밖으로 빠져나갈 때 아무데나 찍어도 되는거 짱임
        혹시 오프캔버스 스크롤할 때 본문은 안움직이게 하는거 어려울까요?
        제가 카테고리가 너무 많아서 움직일 때마다 뒷배경이위아래로 흔들려서 어지럽네요 ㅎㅎ;

      • BlogIcon 뭐하라
        2015.01.09 21:10 신고

        좋은 의견이라 이것도 바로 적용했습니다.
        css에 html.lnav_open{overflow:hidden;} 한줄 더 추가해주시고,
        <script src="http://cfs.tistory.com/custom/blog/168/1686514/skin/images/material_offcanvas.js?2"></script>
        위 처럼 물음표 뒤 숫자를 바꿔주시면 바로 적용되실겁니다

      • BlogIcon wtbx
        2015.01.09 21:14 신고

        바로 적용해봤습니다^^좋네요~~~헤헤
        진짜 능력자시네요
        혹시 이런거는 어디가서 배워야 되나요...ㄷㄷㄷ

      • BlogIcon 뭐하라
        2015.01.09 21:18 신고

        따로 배운적은 없고..
        http://www.w3schools.com/
        이사이트에서 많이 참고하다보니 할 수 있게됐네요 ^^
        배우시려면 html css javascript 세가지 배우시면 됩니다!

      • BlogIcon wtbx
        2015.01.09 21:22 신고

        켘....다 영어....
        진입장벽 높네요 하아~
        신기한게
        연습해볼 수 있게 잘 되있네요...+.+

    • BlogIcon 푹곰
      2015.09.02 18:45 신고

      아 여러번의 댓글 죄송합니다
      skin.html에서 없어서 워드패드의 찾기 기능으로 찾아봣는데요
      보이지가 않네요

      • BlogIcon 뭐하라
        2015.09.02 18:55 신고

        Fastboot라는 스킨에 설치할수있는 플러그인입니다 다른스킨엔 당연히 없겠죠~

    • BlogIcon 푹곰
      2015.09.02 19:40 신고

      아 그런건가요 답변 감사합니다 ^^


    • 2015.10.17 05:08

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.10.17 08:58 신고

        사이드바는 원래 기본값이 메인화면에서 감춰지는겁니다~
        스킨을 다시 설치해보시고,
        고정사이드바를 위로올리는건.. 어떤것이었죠? 잘 모르겠네요


    • 2015.10.17 11:12

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.10.17 15:04 신고

        이런 시도는 해본적이 없는데...
        아마 그때는 티에디션이아니라 fastboot자체 메인화면 사용하셨을것같네요
        <script>
        if (location.pathname=="/"){
        $("#leftContent").removeClass("col-md-9").addClass("col-md-12");
        $("aside").remove;
        }
        </script>
        html의 </body>위에 추가하시면 될것같습니다

        고정상단바는 http://nubiz.tistory.com/496
        이거 말씀하시는것같네요


    • 2015.10.17 16:22

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.10.17 19:13 신고

        <script>
        if(url[1] == '') {
        $("#leftContent").addClass("col-md-12").removeClass("col-md-9");
        $("#sidebar").hide();
        };
        </script>
        비슷한코드네요

        아래 링크 적용 안되시는건 fastboot버전이 구버전 적용하고계셔서 그런것같네요


    • 2015.10.17 20:53

      비밀댓글입니다

티스토리 툴바