HTML+CSS로 롤오버 메뉴만들기.

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

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

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

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

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

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

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

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

 

menu.7z