amazon 메가드롭다운 메뉴 팁/jquery 플러그인
링크
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown (216) https://github.com/kamens/jQuery-menu-aim (196)
(원문과 이미지의 출처는 링크1입니다.)
일반적으로 마우스 오버를 이용한 서브메뉴 출력은, 약간의 시차를 두어서 실행합니다.
여러가지 이유가 있겠지만, 마우스 아웃을 너무 빨리 적용해 버리면 아래처럼 서브메뉴로 이동하기도 전에 사라져 버리거나, 메인 메뉴에서 서브메뉴로 이동할때 다른 메인메뉴 항목으로 가지 않고 '서브메뉴가 사라지지 않도록' 길을 잘 따라서 가야합니다.
그런데 아마존의 메가메뉴의 경우, 이런 딜레이 없이도 사용자 불편없이 메가서브메뉴를 잘 이용할 수 있습니다.
위 원글의 저자의 분석에 따르면, 아마존의 메가메뉴의 경우, 아래처럼 마우스의 현위치부터 서브메뉴로 이동하는 '파란색 삼각형' 영역에 마우스가 머무른다면, 다른 메뉴로 이동하지 않고 유지시킨다고 합니다. (코드를 확인해 보지는 않았습니다. ^^;)
그래서 원글의 저자인 Ben Kamens가 이를 jquery 플러그인으로 만들었다고 합니다. (링크2)
괜찮은 팁/플러그인 인것 같아서, 어디에다 올릴까 고민하다가, 코드 들여다보기 귀찮아서 (팁이 아닌) 여기에 '소식' 으로 올립니다. ^^
일반적으로 마우스 오버를 이용한 서브메뉴 출력은, 약간의 시차를 두어서 실행합니다.
여러가지 이유가 있겠지만, 마우스 아웃을 너무 빨리 적용해 버리면 아래처럼 서브메뉴로 이동하기도 전에 사라져 버리거나, 메인 메뉴에서 서브메뉴로 이동할때 다른 메인메뉴 항목으로 가지 않고 '서브메뉴가 사라지지 않도록' 길을 잘 따라서 가야합니다.
그런데 아마존의 메가메뉴의 경우, 이런 딜레이 없이도 사용자 불편없이 메가서브메뉴를 잘 이용할 수 있습니다.
위 원글의 저자의 분석에 따르면, 아마존의 메가메뉴의 경우, 아래처럼 마우스의 현위치부터 서브메뉴로 이동하는 '파란색 삼각형' 영역에 마우스가 머무른다면, 다른 메뉴로 이동하지 않고 유지시킨다고 합니다. (코드를 확인해 보지는 않았습니다. ^^;)
그래서 원글의 저자인 Ben Kamens가 이를 jquery 플러그인으로 만들었다고 합니다. (링크2)
괜찮은 팁/플러그인 인것 같아서, 어디에다 올릴까 고민하다가, 코드 들여다보기 귀찮아서 (팁이 아닌) 여기에 '소식' 으로 올립니다. ^^
댓글 8개
12년 전
좋은 정보네요. 코드는 어렵겠지만, 해결방법이 심플하고 명확해서 좋은 것 같습니다.
kiplayer
12년 전
오홋 정말 머리가 좋네요... 역시 제가 하수라는것을 다시한번 느끼게 되는
편한것을 찾다보니 그냥 처리해서 사용 했었는데 워낙 사이트의 단가가 안나오니 그렇게 밖에
처리 하질 않았는데.. 만들어 두면 굉장히 용이한 소스가 되겠네용.~~
오늘 부터 제작 들어가봐야 겠습니다. ㅎㅎ
편한것을 찾다보니 그냥 처리해서 사용 했었는데 워낙 사이트의 단가가 안나오니 그렇게 밖에
처리 하질 않았는데.. 만들어 두면 굉장히 용이한 소스가 되겠네용.~~
오늘 부터 제작 들어가봐야 겠습니다. ㅎㅎ
12년 전
세로방향 메가메뉴도 그냥 적용되는지 모르겠네요..
사실 가로방향보다는 세로방향을 더 많이 쓸텐데.. ^^
사실 가로방향보다는 세로방향을 더 많이 쓸텐데.. ^^
maxon
12년 전
좋은 정보 감사합니다..
12년 전
오..아마존 저메뉴 나올때가 멋있어서 저장해두었는데. 저런 기술이 숨어있군요.
마우스 오버하면 왜곡이 적용된 투명한 div가 마우스 커서위치에 나와 해당 메뉴로 옮겨질때까지 원치않는 메뉴로 가는걸 막아놨을까요?
마우스 오버하면 왜곡이 적용된 투명한 div가 마우스 커서위치에 나와 해당 메뉴로 옮겨질때까지 원치않는 메뉴로 가는걸 막아놨을까요?
12년 전
코드를 봐서는, div 등을 쓰지는 않고,
실시간으로 마우스 위치를 감지하여 정해진 각도 또는 위 그림처럼 삼각형 범위를 벗어나지 않는지 판단하는 것 같습니다.
그래서 인지, 세로방향 적용은 간단치 않을것 같아요.. ^^;
실시간으로 마우스 위치를 감지하여 정해진 각도 또는 위 그림처럼 삼각형 범위를 벗어나지 않는지 판단하는 것 같습니다.
그래서 인지, 세로방향 적용은 간단치 않을것 같아요.. ^^;
lainfox
12년 전
사내 인트라넷에도 정보가 올라왔었는데 댓글로 달았던 코멘트를 여기도 달아봅니다.
----
덧붙여서 딜레이 부분은 문제로 인식하기 보다
어떻게 하면 딜레이를 이용해 사용자에게 더 나은 UX 를 제공할 수 있을까? 라는 방향의 전환이 필요할 수 있습니다.
a,b,c,d,e 메뉴가 있을때 a에 커서가 위치해있고 목표가 e 인 사용자는, 딜레이가 없는 상황에서는 커서가 이동하면서 bcd 의 펼쳐지는 하위 메뉴를 보게되고. 불필요한 눈의 피로를 주게됩니다. 반짝반짝하죠 ;
사용자는 e 메뉴를 보고 싶기 때문에 마우스를 옮기고 그 근처에 갔을때 속도를 줄이게 됩니다. 이것을 이용해 delay 를 0.1초에서 0.2초 사이쯤의 좋은 값을 선택하고
동시에 바로 클릭했을때도 하위메뉴를 펼쳐준다면 좋은 UX가 될 수 있겠죠.
실제로 amazon 에서는 위의 선형대수 방식과 함께 딜레이를 사용합니다.
----
덧붙여서 딜레이 부분은 문제로 인식하기 보다
어떻게 하면 딜레이를 이용해 사용자에게 더 나은 UX 를 제공할 수 있을까? 라는 방향의 전환이 필요할 수 있습니다.
a,b,c,d,e 메뉴가 있을때 a에 커서가 위치해있고 목표가 e 인 사용자는, 딜레이가 없는 상황에서는 커서가 이동하면서 bcd 의 펼쳐지는 하위 메뉴를 보게되고. 불필요한 눈의 피로를 주게됩니다. 반짝반짝하죠 ;
사용자는 e 메뉴를 보고 싶기 때문에 마우스를 옮기고 그 근처에 갔을때 속도를 줄이게 됩니다. 이것을 이용해 delay 를 0.1초에서 0.2초 사이쯤의 좋은 값을 선택하고
동시에 바로 클릭했을때도 하위메뉴를 펼쳐준다면 좋은 UX가 될 수 있겠죠.
실제로 amazon 에서는 위의 선형대수 방식과 함께 딜레이를 사용합니다.
humanL
12년 전
양질의 덧글 감사합니다^_^!!
게시글 목록
| 번호 | 제목 |
|---|---|
| 18790 |
JavaScript
공백제거
|
| 18788 |
PHP
셀렉트박스 간편하게 만들기
1
|
| 18786 | |
| 18783 |
PHP
게시판의 페이징 방법
2
|
| 18780 |
PHP
이미지에 워터마크 처리하기
2
|
| 18769 |
Mobile
Chrome 를 이용한 모바일모드
10
|
| 5549 | |
| 27272 | |
| 27267 | |
| 30785 | |
| 30782 | |
| 27264 | |
| 18767 |
JavaScript
스크립트오류 제거
1
|
| 18765 |
JavaScript
간단한 쿠키지원 팝업 스크립트
1
|
| 18764 | |
| 18763 |
JavaScript
대소문자변환
|
| 5546 | |
| 18760 | |
| 18758 | |
| 18755 |
JavaScript
홈페이지 브라우저 크기 고정시키기
2
|
| 18752 |
JavaScript
iframe 아이프레임 투명처리
2
|
| 27256 | |
| 27247 | |
| 5539 | |
| 18750 | |
| 27244 | |
| 27243 | |
| 18749 |
JavaScript
금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수
|
| 18747 | |
| 18745 |
JavaScript
출생년도에 따른 나이 계산 자바스크립트
1
|
| 18741 | |
| 18740 | |
| 18738 |
JavaScript
iframe에서 페이지를 닫을 때
1
|
| 18731 |
JavaScript
iframe 높이 자동조절 스크립트
6
|
| 18730 |
JavaScript
자바스크립트 인공지능 장기게임-Minimax
|
| 27240 | |
| 5535 | |
| 18728 |
JavaScript
금액을 한글로 표기 해주는 스크립트;
1
|
| 18726 |
JavaScript
전화번호 입력시 자동 하이픈 넣기
1
|
| 18724 |
JavaScript
사업자번호체크스크립트 간단버전
1
|
| 5532 | |
| 26500 |
견적서
홈페이지 제작 견적서
14
|
| 27237 | |
| 5529 | |
| 30776 | |
| 18721 |
jQuery
플러그인 만들기 간단 예제
2
|
| 20725 | |
| 27232 | |
| 18719 |
JavaScript
퀵메뉴
1
|
| 18717 | |
| 18714 |
JavaScript
입력박스안에 왠 아이콘?
2
|
| 18712 |
JavaScript
게시판 글작성시 일부 태그막기
1
|
| 18709 |
jQuery
랜덤한 레이아웃과 효과
2
|
| 27213 | |
| 27200 | |
| 18706 |
JavaScript
자동으로 textarea 크기 조절하기
2
|
| 18704 |
JavaScript
textarea 자동 늘려주기 2
1
|
| 18702 |
JavaScript
해당 브라우저에 지원하는 이벤트 확인
1
|
| 18701 |
JavaScript
자바스크립트로 논리적인 XOR 연산하기.
|
| 18700 |
JavaScript
동적 셀렉트박스 다루기.
|
| 18698 |
JavaScript
자바스크립트 이벤트 핸들러 (Event Handler)
1
|
| 18697 |
JavaScript
함수명을 변수로 해야할 때
|
| 18696 |
JavaScript
이메일 유효성 정규식 - 자바스크립트
|
| 18694 | |
| 5525 | |
| 27199 | |
| 18691 | |
| 5515 | |
| 5510 | |
| 5501 | |
| 18690 | |
| 18687 | |
| 5496 | |
| 18686 | |
| 18676 | |
| 26496 |
서식
영수증 양식
3
|
| 18675 | |
| 30773 | |
| 18671 |
JavaScript
이미지 슬라이드 관련입니다.(자바,제이쿼리)
3
|
| 30767 | |
| 18667 |
JavaScript
롤오버시 서브메뉴가 나타나는 기본 스크립트
3
|
| 18658 |
jQuery
회사에 히스토리에 써먹을 만한 자료
8
|
| 18650 | |
| 18648 |
MySQL
고수님들 도와주세요!
1
|
| 5494 | |
| 5490 | |
| 20705 | |
| 5485 | |
| 18645 |
Mobile
json 파싱방법
2
|
| 27194 | |
| 20684 |
정규표현식
정규표현식 의 핵심. 패턴변경자 1
20
|
| 18642 | |
| 5482 | |
| 27185 | |
| 5478 | |
| 5473 | |
| 5467 | |
| 18636 | |
| 5462 | |
| 5443 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기