예제: jQuery .animate()를 활용한 네비게이션
0
몇달 전 리뉴얼된 CJ기업사이트에 들어가 봤더니,
GNBGlobal Navigation Bar가 화려한 퍼포먼스가 있어 당연히 플래시인줄 알았더니, Html+JS로 퍼블리싱 되어있는 것을 보고 비슷하게 만들어 보았습니다.
*현재 완벽하게 구현된 상태는 아니며 마우스오버후 드러나는 왼쪽 메뉴타이틀의 퍼포먼스를 마저 구현할 예정입니다.
현재 CJ사이트의 경우, 해당 영역이 테이블로 퍼블리싱 되어있고 제가 퍼블리싱하는 방향과는 많은 차이가 있어
퍼포먼스만 비슷하게 만들어 보았구요. 마크업 구조는 상이합니다.
cj 기업사이트의 경우 GNB 내부 소메뉴가 <table>로 마크업 되어있으나,
아래의 예제는 HTML5 서식에서 새롭게 추가된 태그(nav, menu, section 사용)를 사용하여 마크업 되어 있습니다.
구조를 상이하게 마크업한 이유는, <table> 태그는 메뉴를 표현하기에 어울리지 않는다고 판단하였기 때문입니다.
해당 예제는 IE 8 이하 버전, 크롬 9.0 버전, 파이어폭스 3.6 버전, Opera 11버전에서 테스트 완료되었습니다.