Guillermo Rauch씨는 MooTools 자바스크립트 라이브러리와 CSS를 이용하여 재미있는 메뉴 네비게이션 효과를 만들었다. 메뉴 항목에 마우스가 이동할 때 마다 배경이미지에 시각적인 변화가 발생하며, 간단한 마크업만으로 사용할 수 있는 것이 특징이다. 이 것을 회사 프로젝트에 써먹기 위해 Prototype/Scriptaculous에서도 사용할 수 있도록 수정하였으며 사용방법은 아래와 같다.
<div id="fancymenu">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
</div>new FancyMenu('fancymenu', {
transition: Effect.Transitions.backOut,
duration: 0.7
});
※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.
Comments
Got something to add? You can just leave a comment.
멋져요~ 요즘은 오른쪽 버튼 안눌러보면 플래시인지 자바스크립트인지 알 수 없다는..
reply edit
멋지죠 ^^; 자바스크립트도 플래시 못지않은 성능을 발휘할 날이 머지않아 올것 같아요. 헛!강규영님의 JSSpec 멋지군요!!! 저도 실무에 써봐야겠습니다.
reply edit
이쪽으로 잘 모르지만 이 메뉴바는 꼭 쓰고 싶어서 질문 드립니다.
저 두 파일 (js,css)을 테터클래식 skin.html 에 <head></head> 사이에 추가하고, 메뉴 div 코드을 넣었습니다만 위에 보는것처럼 메뉴가 나타나지를 않네요. 테터클래식에서 사용하는 방법을 알 수 없을까요.
reply edit
앗, 답변이 늦어서 죄송합니다. 휴가 후유증에 시달리느라 블로그에 잠시 신경을 쓰지 못했습니다. 아마티님의 말씀처럼 위 컴포넌트는 prototype.js와 script.aculo.us 자바스크립트 라이브러리를 필요로합니다.
reply edit
프로토타입과 스크립타큘러스 라이브러리도 함께 사용해야 합니다.
이건 정말 멋있군요. 자바스크립트로 이것까지 가능할 정도라니...
reply edit
대신 답변해 주셔서 감사합니다. ^^; 사실, 꾀 오래전에 Ajaxian.com에 소개된 라이브러리입니다. 언젠가 블로그에 기록해야지 마음먹고 있다가 이제서야 포스팅했어요.(시스템 사양이 딸리면 버벅되는 편이긴 합니다.)
reply edit
오옷.. 순간 플레시인줄 알았습니다.
reply edit
그러고보니, 자바스크립트가 플래시 밥그릇을 조금씩 갉아먹고있군요. 좋은 현상일까요....
reply edit
멋지군요. 제가 테스트 해보려고 하는데..
Effect 가 정의되지 않았다고 하네요..
혹시 prototype.js / scriptaculous.js 말고 다른 소스도 필요한가요?
reply edit
아래 한 라인을 적당한 곳에 넣어주세요.
Effect.Transitions.backOut = function(pos){ return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1); };
reply edit
간결한 적용방식과 움직임이 상당히 멋지네요.. ^^
JS에 관심이 많은데 JS가 브라우저 마다 랜더링이 달라서 똑같은 성능을 기대하기가
어렵다는 점이 너무 아쉬워요... 해결할 수 있는 방법이 있으면 정말 좋을텐데,
속성 별로 다른거 같아요
reply edit
그런 문제들을 해결하기 위해 자바스크립트 라이브러리(프레임웍)를 쓰지요. 수년 안에 좋은세상 올것 같아요...
reply edit
Your Reaction Time!