클릭시 열리는 검색창을 쓰는데..닫는방법이 궁금해서 글을 남깁니다!

클릭시 열리는 검색창을 쓰는데..닫는방법이 궁금해서 글을 남깁니다!

QA

클릭시 열리는 검색창을 쓰는데..닫는방법이 궁금해서 글을 남깁니다!

본문

현재

https://sir.kr/g5_tip/6481

이 글을 보고 검색창 기능을 달아서 쓰고 있어요

저 글은 돋보기 작은버튼만 존재하다가! 클릭시 옆으로 쭉 늘어나면서 검색창이 보이는것이겠죠!

굳이 저걸 쓰는 이유는 상단 공간때문에 어쩔수 없게 쓰고 있는데요

단점은 한번 검색창이 길게 열리면 닫을수가 없어요! 페이지가 넘어가야 닫히죠...

 

스크립트 히든쇼로 하게되면..닫는 버튼을 굳이 만들어서 또 넣어야하고..

 

그러다가! 아래의 사이트를 봤는데요!

 

https://developer.mozilla.org/ko/

 

1025905079_1672565391.1558.png

 

검색창이 열린다음에 유지가 되다가

바탕화면 아무곳이나 클릭시 검색창이 닫혀요!

 

토글스크립트를 어찌한거 같은데...혹시 https://developer.mozilla.org/ko/ 이 홈페이지

검색창처럼 빈공간을 찍을시 닫히게 하려면

어떤걸 이용해야할까요...조언좀 부탁드립니다!! 새해복 많이 받으세요!

 

ps. 참고로 그냥 css 호버 형식으로도 해봤는데.. 마우스가 약간만 벗어나도 닫혀버리니

너무 불편하더라구요...

 

이 질문에 댓글 쓰기 :

답변 4

CSS만 사용한 경우 ^^

 

예제1: search bar: expand on click, CSS-only (codepen.io)

예제2: Pure CSS Animated Search Bar (codepen.io)

안녕하세요?

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}

 

이상 허접한 팁이었습니다.

감사합니다.

간단하고 허접한팁이긴 한데..

 

css의 간단한 원리는

기본아이콘에 hover상황을 만들어서 마우스를 올렸을때 width를 넣어주면 일딴 창이 커지는데

마우스를 때면 다시 쪼그라드는걸 방지하기 위해서

 

input부분에 <= 즉 마우스를 올리고 글자를 치려고 커서가 생겼을때

focus랑 active 상황으로 width를 같이 넣어주면

 

마우스 올리고 글치려고 찍었을땐 창이 유지되고 , 마우스로 바탕화면을 찍으면 줄어드는..상황으로

 

css로도 간단히 되는걸 알게되었어요

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,123 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT