[HTML&Javascript] FancyMenu

http://junn.net/paim_info
상단에 있는 메뉴를 보면 플래쉬를 쓰지 않고 자바스크립트와 css만으로 예쁜 메뉴 효과를 만들어낸 것을 볼 수 있습니다.

외국사람이 만든 것으로 FancyMenu라는 이름이 있는데요, 제가 만든 예제는http://wik ··· u%2Fdemo 로부터 수정을 통해 만들어졌습니다.


<script type="text/javascript" src="./fancymenu/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="./fancymenu/scriptaculous.js"></script>
<script type="text/javascript" src="./fancymenu/fancymenu.js"></script>

프로토타입.js와 scriptaculous.js라는 파일이 필요합니다. 물론 예제에 포함해놨고요,

<div id="fancymenu" style='margin-left:180px;'> 
 <ul>   
  <li class="current"><a href="#">Home</a></li>
  <li><a href="#">Introduce</a></li>   
      <li><a href="#">Achievement</a></li>   
       <li><a href="#">Memeber</a></li>  
         <li><a href="#">Recruitment</a></li>
  </ul> </div>

메뉴를 그리고요,

<script type="text/javascript">
new FancyMenu('fancymenu', {   transition: Effect.Transitions.backOut,   duration: 1.0 });
</script>

뒤에 duration이 마우스 따라다니는 시간입니다.

css파일을 건드리면 여러 속성을 바꿀수 있답니다~~
혹시 제 블로그에서 예제 파일을 가져가시는 분은 그대로 배포해주세요ㅋ

2008/02/21 23:14 2008/02/21 23:14
JUNN
Programming 2008/02/21 23:14

트랙백 주소 : http://www.junn.net/tt/trackback/148

댓글을 달아 주세요

[로그인][오픈아이디란?]

Powerd by Textcube,designed by criuce, Revised by JUNN