<head>와 </head>사이에 이 코드를 넣고
<script type="text/javascript">
function visible_tf() {
var btn_open = document.getElementById('sidebar_open');
var btn_close = document.getElementById('sidebar_close');
var obj_sidebar = document.getElementById('sidebar');
obj_sidebar.style.display = 'none';
btn_open.onclick= function() {
obj_sidebar.style.display = 'block';
btn_close.style.display = 'inline';
btn_open.style.display = 'none';
}
btn_close.onclick=function() {
obj_sidebar.style.display = 'none';
btn_close.style.display = 'none';
btn_open.style.display = 'inline';
}
}
if (typeof window.addEventListener != 'undefined') {
window.addEventListener("load", visible_tf, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent("onload", visible_tf);
}
</script>
<div id="header">의 밑쪽에 이 코드를 삽입해보았다
<li type=none id="sidebar_close" style="display:none"><a href="#" title="sidebar close">Menu close↑ </a></li>
<li type=none id="sidebar_open"><a href="#" title="sidebar open" onclick='this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none';>
Menu open↓ </a></li>
※Menu close,Menu open은 개인취향에 따라 글자수정,이미지삽입 가능
이 스크립트의 장점
.옆의 사이드바 전체가 접혀져 깔끔하게 글을 볼수있다
이 스크립트의 단점
.사이드바 펼쳐진 상태가 잠깐 깜박이다가 접힌상태로 나온다.
.본문 넓이를 사이드바 메뉴 크기보다 크게 바꾸면
본문의 위치가 망가지므로 바꾸면 안된다.
.사이드바 전체접기만 가능하고 일부만 접는건 안먹힘
'문서함 > 웹코딩' 카테고리의 다른 글
| 간편한 메모장홈페이지 - 세로2프레임 코딩 (0) | 2011.08.20 |
|---|---|
| 티스토리 사이드바 접기 2 (0) | 2011.08.17 |
| 티스토리 사이드바 접기(개정판) (0) | 2011.08.17 |
| 글, 메뉴접기 태그 기본 (0) | 2011.08.15 |
| 안쓰는 코드 저장 (0) | 2011.07.24 |