Rev. 2.73

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

  • jhk1026 jhk1026

    간결한 적용방식과 움직임이 상당히 멋지네요.. ^^
    JS에 관심이 많은데 JS가 브라우저 마다 랜더링이 달라서 똑같은 성능을 기대하기가
    어렵다는 점이 너무 아쉬워요... 해결할 수 있는 방법이 있으면 정말 좋을텐데,
    속성 별로 다른거 같아요

    reply edit

  • 그런 문제들을 해결하기 위해 자바스크립트 라이브러리(프레임웍)를 쓰지요. 수년 안에 좋은세상 올것 같아요...

    reply edit

Your Reaction Time!

captcha

avatar