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="https://nubiz.tistory.com/favicon.ico" /> <a href="/"><div id="lnav_name">Life is an egg.</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;}
