메뉴 상자 4
../


[매뉴 상자 3]은 [매뉴 상자 2]에 비해서는 재미있지만 링크를 일일이 눌어야하는 불편함이 있습니다. 다음 예제는 링크를 사용하지 않고 mouseover, mouseout 이벤트를 사용하여 더 편리하게 매뉴를 열고 닫을 수 있게하는 예제입니다. 가장 편리한 인터페이스입니다.

매뉴를 만드는 방법은 앞의 예제에서 설명을 했으니 관두고 이 예제를 사용하기 위해서 알아야 할 것은 이동량입니다. 매뉴의 위치는 손볼데가 없습니다. 1 pixel도 어긋나지 않고 매뉴가 다 이동하기 때문에 전체 매뉴를 다 보여줍니다. 그래서 앞 예제처럼 이동시킬 위치는 신경쓸 필요가 없습니다.

이동량은 속도입니다. 마우스를 매뉴에게 가져가면 매뉴가 열리고 치우면 매뉴를 들어가게 하는데 이 속도를 얼마나 빠르게 지정할지 입니다. 가장 알맞게 지정은 해놓았지만 마음에 안들면 조정을 하세요.. 조정할 것은 아래입니다. 

function menuIn() {
        //20은 처음 마우스로 여는 공간. 10은 레이어 크기에 상관없이 정확히 배치시킨다. 
        if( menu.left > menuW*-1+20+10 ) { 

        if( menu.pixelLeft > menuW*-1+20+10 ) {
매뉴에서 마우스를 치우면 매뉴를 닫는 menuIn() 함수입니다. 여기서 보면 if() 안에 20+10이 있는데 20은 처음에 있는 것처럼 마우스를 가져가면 매뉴를 열기 위해서 조금은 남겨 놓아야 합니다. 조금도 남아있지 않다면 마우스로 매뉴를 열 수 없기 때문입니다. 20이 바로 남겨둘 크기입니다. 1로 지정해도 작동은 합니다. 근데, 너무 적으면 매뉴가 있는지 없는지 헤깔릴 수 있기 때문에 적당한 크기로 지정하면 됩니다.

다음으로 10은 매뉴를 다 보여주기 위해서 1 pixel도 놓치지 않게 하기 위해서 지정하는 숫자입니다. 쉽게 말해서 1 pixel 식 이동을 하면 너무느립니다. 그래서 큰 값을 지정하면 속도는 빠르지만 매뉴 레이어의 크기에 따라서 이동 위치가 더 이동하는 경우가 있습니다. 이것을 방지하는 것입니다. 이것으로 매뉴가 움직이는 것도 부드럽게 보이게 합니다. 가장 적당한 값은 한번 이동 시키는 값의 2배 이상을 지정하면 됩니다. 한번 이동시키는 속도가 6이라면 13부터 지정하세요. 나머지도 있지만 직접 사용하다가 숫자를 바꾸어 보면 알맞은 값을 찾을 것입니다.


T O P
 
[ MENU ]