Fastboot전용 material 디자인 offcanvas
구글이 앞장서고있는 머티리얼디자인(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="https://nubiz.tistory.com/favicon.ico">
<a href="/"><div id="lnav_name">Life is an egg.</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를 닫을 수 있습니다.
