검색버턴을 클릭하면 바로 하단에 토글로 검색바가 출력되게 적용하는 방법입니다.
1. 적용할 레이아웃의 적당한 위치에 "검색"버턴을 만듭니다.
<button><a class="show_srch" id="show_srch" onclick="toggle('srch')">검색</a></button>
2. 하단에 통합검색 코드를 작성합니다.
<!--// 검색 --> <div id="srch"> <form action="{getUrl()}" method="get"> <input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="act" value="IS" /> <input type="text" name="is_keyword" value="{$is_keyword}" title="검색" class="itx" accesskey="S" /> <input type="image" src="img/bs_white.png" alt="Search" class="is" /> </form> </div>
"srch" id는 통일시켜야 합니다.
이미지를 레이아웃의 img폴더에 업로드
3. 최하단에 스크립트 추가
<script>
function toggle(id){
if(document.getElementById(id).className=='open'){
document.getElementById(id).className=''
} else {
document.getElementById(id).className='open'
}
};
</script>
4. css파일에 아래 코드 추가
/* 검색 */
.show_srch { background-position:-240px 8px; cursor:pointer; }
#srch { display:none; position:relative; width:85%; margin:0 0 5px 20px; }
#srch.open { display:block; }
#srch .itx { width:100%; height:30px; padding:0; line-height:16px; font-size:16px; border:1px solid #999; border-radius:3px; -webkit-box-shadow:inset 1px 1px 2px #DDD; box-shadow:inset 1px 1px 2px #DDD; -moz-transition:all .5s; -webkit-transition:all .5s; transition:all .5s; position:relative; }
#hd .srch .itx:focus { border-color:#333; }
#srch .is { position:absolute; top:4px; right:0; padding:3px 5px; }
파일목록을 자료실 목록 형태로 꾸미기 - 스...
레이아웃 배경 슬라이드 적용법
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
1