지난 번 포스팅에서 소개한 material design offcanvas의 업데이트 버전입니다.



    1.1 버전에서 바뀐 점

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



    아래 적용방법은 이전버전을 적용한 상태를 기준으로 설명합니다.

    처음 적용하시는 분은 이전버전을 먼저 적용한 뒤 따라해주세요.

    skin.html

    1.

    <div id="lnav">

    <div id="lnav_profile">

     <img src="favicon.ico">

     <a href="/"><div id="lnav_name"></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>

    위 부분을 찾아 아래로 대체합니다.

    <nav 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></div></div>

    <div class="lnav_container">

    <div class="listWrap">

    <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="lnav_bottom"> 

    <a href="http://www.tistory.com/">티스토리</a>

    <a href="http://www.daum.net/">Daum</a>

    </div>

    </div>

    </nav>

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


    2.

    아래 파일을 업로드한 후 

    material_offcanvas_1.1_min.js


    <script src="./images/material_offcanvas.js"></script>

    위 부분을 찾아 아래로 대체합니다.

    <script src="./images/material_offcanvas_1.1_min.js" async></script>



    .


    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;}

    위 부분을 찾아 아래로 대체합니다.


     #lnav {

        width:220px;

        height:100%;

        position:fixed;

        top:0;

        left:-250px;

        background:#eee;

        z-index:1050;

        transition:.3s;

        overflow:hidden;

    }

    #lnav.lnav_open {

        left:0px;

        box-shadow:#eee 0 100px 0 0, rgba(0, 0, 0, 0.5) 0 10px 10px 5px, rgba(0, 0, 0, 0.5) 0 0 0 9999px;

    }

    #lnav .lnav_container {

        position:absolute;

        top:100px;

        bottom:0;

        width:100%;

        overflow-y:auto;

    }

    #lnav .lnav_container .listWrap {

        background:#fff;

        padding:5px 0 60px;

    }

    #lnav ul, #lnav li {

        overflow:hidden;

        padding:0;

        margin:0;

    }

    #lnav ul {

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

        margin-left:5px;

    }

    #lnav ul li {

        padding:5px;

    }

    #lnav ul>li:hover {

        background:#eee;

    }

    #lnav ul>li li:hover {

        background:#bbb;

    }

    #lnav a, #lnav li {

        display:block;

        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:100px;

        padding:5px;

    }

    #lnav_profile img {

        width:50px;

        height:50px;

        max-width:50px;

        max-height:50px;

        margin:30px 0;

        background:#fff;

        border-radius:50%;

    }

    #lnav_name {

        position:absolute;

        top:60px;

        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

    }

    #lnav_bottom {

        height:30px;

        background:#eee;

        text-align:right;

        padding:20px 10px 0 10px;

    }

    #lnav_bottom:after {

        content:"";

        background:#eee;

        height:100%;

    }

    #lnav_bottom a {

        text-decoration:underline;

    }

    #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;}





    Posted by 뭐하라

    문제가 있나요?(?)

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

      와...짱입니다!!!! ㅎㅎ 뒤로가기로 꺼지네요
      반나절도 안되서 ㄷㄷㄷ
      진짜 능력자심ㅋㅋㅋㅋㅋㅋ
      아 그거 말씀 안드렸었는데
      로그인아웃 버튼요 링크가 뭔가 잘못돼있어요
      a 태그 넣서 바꿔봐도 안되더라구요 고쳐주세욥~

      • BlogIcon 뭐하라
        2015.01.10 15:39 신고

        데스크탑화면에서 우측상단 로그인버튼을 주석처리해놓으셨네요~
        이버튼이 있어야 정상작동합니다.
        <span id="loginout_append"><a href="https://www.tistory.com/login"><i class="fa fa-lock fa-fw"></i> Login</a></span>
        부분만 밖에 빼놓아주세요.
        그래도 보이는게 싫으시면
        <span id="loginout_append" style="display:none"><a href="https://www.tistory.com/login"><i class="fa fa-lock fa-fw"></i> Login</a></span>
        으로 수정해서 꺼내놓으시면 됩니다 ^^


      • 2015.01.10 15:54

        비밀댓글입니다

      • BlogIcon 뭐하라
        2015.01.10 15:59 신고

        감사합니다 ^^

      • BlogIcon 뭐하라
        2015.01.10 16:04 신고

        아 마지막으로! 실수가있었네요 샵샵부분 ##으로 수정해서 다시적용해주세요 ㅠㅠ
        블로그이름이랑 파비콘부분입니다
        <div id="lnav_profile">
        <img src="[샵샵_blog_link_##]favicon.ico" /> <a href="/"><div id="lnav_name">[샵샵_title_##]</div></a>
        </div>

      • BlogIcon wtbx
        2015.01.10 16:06 신고

        헤헤~ 적용완료^^

    • BlogIcon wtbx
      2015.01.16 03:21 신고

      뭐하라님 잘 주무시나요 ㅎㅎ
      리포트 하나 하러 왔어요
      스크롤 할 때 뒤에 메인화면 안움직이게 해주셨잖아요?
      컴터랑 핸드폰은 잘되는데 아이패드는 안되더라구요
      왜 그럴까요 사파리는 좀 특별한가요 ㄷㄷ

      • BlogIcon 뭐하라
        2015.01.16 09:59 신고

        네 아마 모바일 사파리에서는 작동안할겁니다..
        제가 아이패드가 없어서 그런데html.lnav_open{overflow:hidden;}를html.lnav_open{position:fixed;overflow:hidden;}로 바꿔서 테스트 한번 해주시겠어요?

      • BlogIcon wtbx
        2015.01.16 10:16 신고

        오....됐네요 ㄷㄷㄷ
        뭐하라님 진짜 쩌심ㅋㅋㅋㅋㅋ
        감사합니다
        그 저두 아이패드 없어요ㅎㅎ
        대신 다음 트로이에서 확인한거에요
        http://troy.labs.daum.net/
        여기 참 좋드라구요~~

      • BlogIcon 뭐하라
        2015.01.16 13:58 신고

        아 거기서 아이패드 그런거도 테스트되는군요
        좋은 정보 감사합니다^^

      • BlogIcon wtbx
        2015.01.16 14:01 신고

        넵~ 담에 또 뵈요!~

      • BlogIcon 뭐하라
        2015.01.16 23:00 신고

        아 이제서야 테스트해보는데,
        저렇게하면 스크롤이 안되긴하지만, 보던페이지가 아니라 페이지 최상단에서 고정이 되어버리네요 ㅠㅠ
        저는 모바일 사파리를 포기하는쪽으로 갈렵니다..

      • BlogIcon wtbx
        2015.01.16 23:03 신고

        정말이네요...
        약간 미묘하게 차이난다 했더니 그거였구나...ㅠ
        별수 없죠 저두 돌아갈래요 ㅎㅎ
        고생하셨습니다!!~

    • BlogIcon Mir(whdghks913)
      2015.01.18 18:56 신고

      화면 맨 위의 아이콘이 힌색이라 배경색이랑 같아서 안보이네요..

      http://fontawesome.io/icon/bars/

      여기서 보면 검은색인데 색 바꿀수 있는 방법 없을까요??

      • BlogIcon 뭐하라
        2015.01.18 18:59 신고

        #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;
        }
        에서 color를 #000으로 바꾸면 됩니다~

      • BlogIcon Mir(whdghks913)
        2015.01.18 19:02 신고

        감사합니다~!

    • BlogIcon Mir(whdghks913)
      2015.01.18 19:31 신고

      한가지 버그(?)를 발견했습니다

      offcanvas위에 Fastboot의 이전글, 다음글 보기 화살표 (outer_btn_left, outer_btn_right)가 겹쳐 보이는 문제가 발생했는데요

      그래서 #lnav의 z-index을 outer_btn의 10000보다 높게 설정해서 해결했습니다 ㅎㅎ

      • BlogIcon 뭐하라
        2015.01.18 19:36 신고

        아 이전글/다음글기능을 안써서 미쳐신경쓰지못헸네요~