롤오버 메뉴를 만들때가 있다.

플래시를 써도 되고 드림위버에서 제공하는 전통적인 방법을 써도 되지만 모바일이 활성화되고 플래시의 자리가 줄어드는 추세이기도하고 자바스크립트의 기대지 않고서도 그러한 기능을 원하는 사람들에게 도움이되고자 포스팅한다. 갑작스레 시간이 좀 있기도 해서..

초급적인 방법이기는 한데 모르는 사람이나 어떤 사람에게는 꼭 필요한 기능 일 수도 있다는 신조가 있기에....  오래전에 공부할때 익힌 방법인데 요즘엔 이리저리 경우에따라 방법을 달리하고 꼼수까지 부려가며 실무에 잘써먹고 있다.

아래와 같은 세가지 방법인데 사실 거의 같은 방법으로 대동 소이하다.

뭐 모양은 세로인데 가로로 하는건 float 같은걸 쓰면 쉽게 해결 되니 그런 부분은 다루지 않았다.. 어쨌든 이 메뉴의 핵심은

1. overflow:hidden으로 가려주고
2. 이미지 위치 옮겨주고

이 두가지인데 말로 설명하기는 좀 그렇고 CSS를 조금 아는 사람이거나 공부하는 사람이라면  금방 이해 할 수 있으리라 보고 소스와 이미지등을 압축해서 올려두니 다운 받아 보시길..

혹시 봐도 모르겠다면 개인교습모드로 설명해주겠다. 언제든지 질문 때려주길..

menu.7z