광장이 썰렁하네요. 심심한 지식한가지 올립니다.

· 댓글 : 8 조회 : 2902 · 6
안녕하세요. Centos입니다.요즘 날도 추워졌는지, 광장도 썰렁하네요.조금 따끈하게 해드리고 가겠습니다.아시는 분들도 있으시겠지만, 모르시는 분들을 위한 글이니 참고해주시기 바랍니다.요즘 ul li 태그를 이용한 메뉴가 많이 있습니다. 여기서 가로 3단메뉴나 세로2단메뉴를 쓸경우 링크-링크-링크 이런식으로 마우스를 움직여가며 서브메뉴를 나오게합니다. 특히 세로2단메뉴 이상(3,4단계)에서 문제되는 부분이 있습니다. 무엇인고 하면, 세로 메인 메뉴에서 위아래로 마우스를 움직이면, 서브메뉴가 나옵니다. 여기서 편의상 문제되는 부분이 나타납니다. 서브메뉴를 가기위해서는 정확히 수평(메뉴블럭지정)으로 이동을 해야한다는 부분이죠. 하지만 사람들중 연세가 있으시거나 마우스를 제대로 움직이지 못하시는 분들은 각 메뉴 높이가 낮을수록 힘들어집니다. 이것을 보완하는 방법이 있습니다.샘플 이미지 보여드리겠습니다.[칸(사람이름)아카데미-동영상 강의라고 보시면됩니다. 저역시 여기서 과학과, 컴퓨터의 지식을 쌓고있습니다. MIT 교수가 알려주기도하고, 뛰어난 교사가 강의를 펼치기도 합니다. 솔직히 메뉴가 삼각함수를 사용한 방식인지는 몰랐습니다.]위의 이미지에서 서브메뉴로 이동할때 다른 메인메뉴를 지나쳤는데도 기존 서브메뉴가 열려있습니다.일반적인 구조에서는 커서가 움직인 마지막  메인메뉴->서브메뉴가 열릴 것입니다.이를 방지하기위해 1차적으로 생각해낸것이 시간차 였습니다. 메뉴에 마우스를 올렸을시 공백시간을 주기 시작했고, 이것이 애니메이션 효과로 전환되었습니다. 하지만 근본적인 문제 해결은 안되었습니다.시간차를 주게되면 빠른 메뉴이동이 안됩니다. 특히 단골손님(?) 같은경우 메뉴위치를 알고있는 사람들에게는 0.5초 1초가 고단할 수 있을것입니다.이재용님&Ben Alpert이 한가지 해결책을 내놨습니다. 방식은 삼각함수를 이용했고, 개인적으로는 신세계였습니다.글을 제가 직접 작성하는것 보다 잘 정리되어있는 글이 있어서 링크합니다.이 글의 원문은 2년전 글입니다. 대단합니다.샘플다운로드!!! 있으니 참고하시기 바랍니다.이재용님의 글입니다.링크 : http://story.pxd.co.kr/655텀블러님의 분석글입니다.링크 : http://okjungsoo.tumblr.com/post/46659644754/amazon-mega-dropdown-menu#원문입니다.링크 : http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown샘플다운로드!!! : https://github.com/kamens/jQuery-menu-aim
Centos의 프로필
Centos
카카오톡 유튜브 페이스북 인스타그램 네이버 블로그 카카오스토리 트위터 이메일 SMS 기타
통계분석을 위해 매체별 전용URL 사용해주세요.
Centos님의 포스트
최근 리스트
리스트가 없습니다.