필드가 나타나는 검색아이콘 만들기

구성

DIV 내에 code block, search form, icon 으로 구성

CSS 분석

/* 검색엘리먼트의 submit 타입에 대한 아이디를 확인한 후 display를 none으로 설정 */
#searchsubmit {
display: none;
}

/* 검색엘리먼트의 입력창의 아이디를 확인한 후 스타일 적용 */
#s {
background-color: rgba(0,0,0,0.1);
opacity: 0;
width: 0px;
postion: absolute;
top: 0;
left: 0;
transition: 0.3s all ease-in-out;
}

/* 검색아이콘의 아이디를 확인한 후 마우스 ON시 손가락 모양으로 스타일 적용 */
#fancy_icon_dk {
cursor: pointer;
}

/* 검색엘리먼트 입력창(position:absolute)의 parent wrap의 layout-position 속성을 relative로 설정한 후 마우스 hover시 s와 s:focus의 스타일 적용 */
#div_block-418-26:hover #s, #s:focus {
width: 200px;
opacity: 1;
left: -208px;
}

Javascript 분석

/* 검색아이콘을 클릭했을 때 검색기능이 수행되도록 설정 */
jQuery('#fancy_icon_dk').on('click', function() {

jQuery('#searchsubmit').click();

});