underfront.com

jQuery로 Flash인척 내비게이션 만들기

웹에서 Flash는 훌륭하다. 과거 Web에서 불가능한 것을 가능하게 만들어 주었고 불가능할 것만 같았지만 비디오를 널리 널리 누구에게나 Web을 통해 공유할 수 있게 해 주었고 인터렉티브 하게 만드는 것도 도와주었다. 하지만, 장점이 많으면 단점도 많다. 맥에서는 불편할 정도로 느리고 가끔은 사용자를 힘들게 했다.

때문에 개인적으로는 여러가지 이유로 특히 내비게이션(Navigation)에 Flash로 만드는 것을 좋아하지 않는다. 내가 사용하는 맥북에서 Flash는 CPU사용율을 잡아먹는 주범이기 때문에 Adblock은 안 써도 Flash Block 플러그인은 쓴다. 그럼 Web을 이용하는데 굉장히 쾌적한데. 문제는 내비게이션을 Flash로 만들면 메뉴 내비게이션을 사용하기 위해 차단(Block)되어 있는 메뉴를 활성화 시켜줘야 한다. (Flash 만드시는 분들은 싫어하겠지만..)

그러다가 요즘에는 jQuery라는 기특한 녀석도 널리 보급되고 있으니 나도 jQuery로 조금은 인터렉티브하게 만들어 봤다. 굳이 Flash를 사용하지 않아도 충분히 매력적이다.

일촌나눔하우징 네비게이션 메뉴 스크린샷

예제: examples/joytouch_nav/index.html

내가 사용한 코드는 틀을 잡기 위한 HTML, 디자인을 입히기 위한 CSS, 그리고 32줄밖에 되지 않는 Javascript뿐이다. 물론, jQuery가 있었기에 나는 거들기만 했다.

다만, 서브메뉴 부분에 보일듯 말듯한 그림자가 들어가 있는데, Internet Explorer에서는 투명도가 적용 되면서 그림자가 그냥 검은색으로 보이는 문제가 있었다. 이 부분은 IE에서는 그림자가 삭제되어 있는 이미지를 별도로 올린 다음에 IE8 이하에서는 그림자가 삭제된 이미지로 대체하도록 작성되어져 있다.

이제는 Javascript로도 저렇게도 화려한 효과가 가능해 졌다. 무엇을 망설이는가? 당장 시작하라..

Leave a Reply

Your email address will not be published. Required fields are marked *

*