클릭시 열리는 검색창을 쓰는데..닫는방법이 궁금해서 글을 남깁니다!
현재
이 글을 보고 검색창 기능을 달아서 쓰고 있어요
저 글은 돋보기 작은버튼만 존재하다가! 클릭시 옆으로 쭉 늘어나면서 검색창이 보이는것이겠죠!
굳이 저걸 쓰는 이유는 상단 공간때문에 어쩔수 없게 쓰고 있는데요
단점은 한번 검색창이 길게 열리면 닫을수가 없어요! 페이지가 넘어가야 닫히죠...
스크립트 히든쇼로 하게되면..닫는 버튼을 굳이 만들어서 또 넣어야하고..
그러다가! 아래의 사이트를 봤는데요!
https://developer.mozilla.org/ko/
검색창이 열린다음에 유지가 되다가
바탕화면 아무곳이나 클릭시 검색창이 닫혀요!
토글스크립트를 어찌한거 같은데...혹시 https://developer.mozilla.org/ko/ 이 홈페이지
검색창처럼 빈공간을 찍을시 닫히게 하려면
어떤걸 이용해야할까요...조언좀 부탁드립니다!! 새해복 많이 받으세요!
ps. 참고로 그냥 css 호버 형식으로도 해봤는데.. 마우스가 약간만 벗어나도 닫혀버리니
너무 불편하더라구요...
답변 4개 / 댓글 2개
CSS만 사용한 경우 ^^
답변에 대한 댓글 1개
간단하고 허접한팁이긴 한데..
css의 간단한 원리는
기본아이콘에 hover상황을 만들어서 마우스를 올렸을때 width를 넣어주면 일딴 창이 커지는데
마우스를 때면 다시 쪼그라드는걸 방지하기 위해서
input부분에 <= 즉 마우스를 올리고 글자를 치려고 커서가 생겼을때
focus랑 active 상황으로 width를 같이 넣어주면
마우스 올리고 글치려고 찍었을땐 창이 유지되고 , 마우스로 바탕화면을 찍으면 줄어드는..상황으로
css로도 간단히 되는걸 알게되었어요
안녕하세요?
https://sir.kr/g5_tip/6481 팁을 올렸던 사람입니다.
참고로 올렸던 팁에다
다음과 같은 조치를 더해주면 다른 영역에 클릭을 하게 되면 검색창이 보이지 않게 됩니다.
default.css에서
/* 전체 검색 */
#hd_sch #sch_stx {padding-left:7px;width:200px;height:24px;border:0;background:#fff;line-height:1.9em;background: none}을
다음처럼 추가해주시면 됩니다.
#hd_sch #sch_stx {padding-left:7px;width:200px;height:24px;border:0;background:#fff;line-height:1.9em;background:#fff;border:0px solid #ccc}
이상 허접한 팁이었습니다.
감사합니다.
답변에 대한 댓글 1개
아 배경을 하나 만들어넣어주는방식이군요
답변을 작성하려면 로그인이 필요합니다.