클릭시 열리는 검색창을 쓰는데..닫는방법이 궁금해서 글을 남깁니다! 채택완료
현재
이 글을 보고 검색창 기능을 달아서 쓰고 있어요
저 글은 돋보기 작은버튼만 존재하다가! 클릭시 옆으로 쭉 늘어나면서 검색창이 보이는것이겠죠!
굳이 저걸 쓰는 이유는 상단 공간때문에 어쩔수 없게 쓰고 있는데요
단점은 한번 검색창이 길게 열리면 닫을수가 없어요! 페이지가 넘어가야 닫히죠...
스크립트 히든쇼로 하게되면..닫는 버튼을 굳이 만들어서 또 넣어야하고..
그러다가! 아래의 사이트를 봤는데요!
https://developer.mozilla.org/ko/
검색창이 열린다음에 유지가 되다가
바탕화면 아무곳이나 클릭시 검색창이 닫혀요!
토글스크립트를 어찌한거 같은데...혹시 https://developer.mozilla.org/ko/ 이 홈페이지
검색창처럼 빈공간을 찍을시 닫히게 하려면
어떤걸 이용해야할까요...조언좀 부탁드립니다!! 새해복 많이 받으세요!
ps. 참고로 그냥 css 호버 형식으로도 해봤는데.. 마우스가 약간만 벗어나도 닫혀버리니
너무 불편하더라구요...
답변 4개
CSS만 사용한 경우 ^^
예제1: https://codepen.io/jargharg/pen/YzEZvZQ">search bar: expand on click, CSS-only (codepen.io)
예제2: https://codepen.io/zanewesley/pen/GRjOPxw">Pure CSS Animated Search Bar (codepen.io)
답변에 대한 댓글 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개
아 배경을 하나 만들어넣어주는방식이군요
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인