Fastboot 전용 Material offcanvas v1.1
지난 번 포스팅에서 소개한 material design offcanvas의 업데이트 버전입니다.
1.1 버전에서 바뀐 점
- html 구조 개선
- 스크롤 개선
- 하단에 링크를 추가할 수 있습니다.
- 뒤로가기 버튼으로 offcanvas를 닫을 수 있습니다.
아래 적용방법은 이전버전을 적용한 상태를 기준으로 설명합니다.
처음 적용하시는 분은 이전버전을 먼저 적용한 뒤 따라해주세요.
skin.html
<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;}
2015.01.10 15:27 신고
와...짱입니다!!!! ㅎㅎ 뒤로가기로 꺼지네요
반나절도 안되서 ㄷㄷㄷ
진짜 능력자심ㅋㅋㅋㅋㅋㅋ
아 그거 말씀 안드렸었는데
로그인아웃 버튼요 링크가 뭔가 잘못돼있어요
a 태그 넣서 바꿔봐도 안되더라구요 고쳐주세욥~
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
비밀댓글입니다
2015.01.10 15:59 신고
감사합니다 ^^
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>
2015.01.10 16:06 신고
헤헤~ 적용완료^^
2015.01.16 03:21 신고
뭐하라님 잘 주무시나요 ㅎㅎ
리포트 하나 하러 왔어요
스크롤 할 때 뒤에 메인화면 안움직이게 해주셨잖아요?
컴터랑 핸드폰은 잘되는데 아이패드는 안되더라구요
왜 그럴까요 사파리는 좀 특별한가요 ㄷㄷ
2015.01.16 09:59 신고
네 아마 모바일 사파리에서는 작동안할겁니다..
제가 아이패드가 없어서 그런데html.lnav_open{overflow:hidden;}를html.lnav_open{position:fixed;overflow:hidden;}로 바꿔서 테스트 한번 해주시겠어요?
2015.01.16 10:16 신고
오....됐네요 ㄷㄷㄷ
뭐하라님 진짜 쩌심ㅋㅋㅋㅋㅋ
감사합니다
그 저두 아이패드 없어요ㅎㅎ
대신 다음 트로이에서 확인한거에요
http://troy.labs.daum.net/
여기 참 좋드라구요~~
2015.01.16 13:58 신고
아 거기서 아이패드 그런거도 테스트되는군요
좋은 정보 감사합니다^^
2015.01.16 14:01 신고
넵~ 담에 또 뵈요!~
2015.01.16 23:00 신고
아 이제서야 테스트해보는데,
저렇게하면 스크롤이 안되긴하지만, 보던페이지가 아니라 페이지 최상단에서 고정이 되어버리네요 ㅠㅠ
저는 모바일 사파리를 포기하는쪽으로 갈렵니다..
2015.01.16 23:03 신고
정말이네요...
약간 미묘하게 차이난다 했더니 그거였구나...ㅠ
별수 없죠 저두 돌아갈래요 ㅎㅎ
고생하셨습니다!!~
2015.01.18 18:56 신고
화면 맨 위의 아이콘이 힌색이라 배경색이랑 같아서 안보이네요..
http://fontawesome.io/icon/bars/
여기서 보면 검은색인데 색 바꿀수 있는 방법 없을까요??
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으로 바꾸면 됩니다~
2015.01.18 19:02 신고
감사합니다~!
2015.01.18 19:31 신고
한가지 버그(?)를 발견했습니다
offcanvas위에 Fastboot의 이전글, 다음글 보기 화살표 (outer_btn_left, outer_btn_right)가 겹쳐 보이는 문제가 발생했는데요
그래서 #lnav의 z-index을 outer_btn의 10000보다 높게 설정해서 해결했습니다 ㅎㅎ
2015.01.18 19:36 신고
아 이전글/다음글기능을 안써서 미쳐신경쓰지못헸네요~