본문 바로가기
공부/웹디자인

드림위버 ) AP Div로 서브 메뉴 표시하기

by Ohming 2011. 12. 29.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
출처 : 실력이 탐나는 드림위버 CS5

고등학생때 서브메뉴를 표시하는게 너무 하고 싶어서 공부했었는데
결국 플래시를 쓰다가 실패했던 경험이 있다. 여러번 실패를 해서 그 후 부터는 아예 쓰지를 않았었다.
드림위버, 나모웹에디터로 하는 방법도 있다는것을 알긴 했지만 어려워보여 해볼 엄두를 내지 못했었다.
그런데 지금 보니 이렇게 간단한것이었다니.......... 하하하


서브메뉴로 쓸 그림을 AP Div에 넣어놓았다. 이제 그 AP Div를 선택하고 속성에서 가시성을 'hidden'으로 바꿔준다. hidden으로 지정하면 화면에서 표시되지 않는다.

그리고 '시리즈안내'를 이미지맵으로 선택하고 비헤이비어를 추가하고 'div "sub"'을 '표시'버튼을 눌러서 설정한다.

그러면 마우스를오버할때 서브메뉴가 표시되게 된다.

그리고 '베스트셀러'에 이미지맵을 해서 여기에 마우스를 올리게되면 서브메뉴가 숨겨지도록 하였다.


결과 : 이렇게하면 '시리즈안내'에 마우스를 올렸을때는 숨겨져있던 서브메뉴가 표시된다. 그러다가 '베스트셀러'에 마우스를 올리게되면 서브메뉴가 다시 숨겨진다.

이런식으로 쓰면 모든 메뉴의 서브메뉴를 만들 수 있을 것 같다. 다른 메뉴는 숨김을하고 해당되는 메뉴만 표시를 하면되니까 말이다.
AP Div가 의외로 유용해 보인다. 정말로 현업에서도 이것을 사용하는지는 잘 모르겠지만... 흠...

댓글