묻고답하기
1차 2차 롤오버 메뉴를 구현하려면(이미지 적용포함)
2010.08.23 21:35
http://www.baedalnet.com/?mid=community
위 사이트와 같은 2차 롤오버 메뉴를 구현하려면 어떻게 해야 되나요?
ForHanbi 님께서 jquery tab 이라고 구글검색 해보면 된다고 알려 주셔서
아무리 몇십 페이지가 넘어가도록 구글링 해봐도 단순 1차 롤오버 메뉴는 있으나
2차 메뉴까지 고정되어 펼쳐지는...그래서 이미지까지 적용시킬수 있는 관련 메뉴가 없습니다.
jquery 관련 서적이나 javascrip, css 관련 서적을 찾아보아도 메뉴나 네비게이션을
전문적으로 다룬 책은 없었습니다.
XE를 사용해 퀄리티 높은 좋은 홈페이지를 만들고 싶은데요...
어떻게 해야 될지 난감한 상황입니다.
롤오버 2차메뉴를 구현하는...여기에 이미지까지 적용할수 있는 강좌 사이트나
관련 전문서적등 좋은 방법 좀 알려 주시면 감사하겠습니다.
http://naradesign.net/wp/2010/03/11/1216/ 이쪽에 가시면 정찬명님이 웹접근성을 잘 준수한 tab메뉴 예제가 몇개 있습니다.
단 이쪽 tab메뉴는 레이아웃에 메뉴를 설정하고 그걸 읽어와서 메뉴로 전환하기는 힘들겁니다.
레이아웃의 html 입력창에 직접 입력하시는 방식으로 메뉴를 설정해야 할 듯 합니다.
이미지 적용 문제는 퍼플코드님이 예로 보여주신 사이트 같은 경우는 #header부분의 백그라운드 이미지로 긴 막대 배경 이미지를 사용하고 각 메뉴마다 마우스 오버가 될때마다 <a><span></span></a>를 사용해 a 부분과 span 부분의 백그라운드 이미지를 합해서 만들었을 듯 합니다.
웹 접근성 부분에서는 퍼플님이 보여준 사이트의 메뉴보다는 정찬명님이 제시한 tab메뉴가 더 뛰어난 것이니까 그쪽 tab메뉴를 이용해 이미지를 덮어씌우는 방법을 찾아 보십시오.
시도해보는 것도 공부니까 그리고 앞으로 이미지 처리하는 부분에서 많은 도움이 될테니까 한 2~3일 해보시고 안되시면 작업중인 사이트 주소를 적어 주십시오.
노력하신거 봐서라도 제가 하나 만들어 드릴께요 ㅋㅋㅋ