[HTML&Javascript] FancyMenu
상단에 있는 메뉴를 보면 플래쉬를 쓰지 않고 자바스크립트와 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파일을 건드리면 여러 속성을 바꿀수 있답니다~~
혹시 제 블로그에서 예제 파일을 가져가시는 분은 그대로 배포해주세요ㅋ
"Programming" 분류의 다른 글
| [FLEX] RichTextEditor, TextArea 에서 Tab키 이용하기 | 2009/11/06 |
| [펌] 리눅스 ZIP 압축 | 2009/02/03 |
| [TC] 텍스트 큐브 에러 / "저장하지 못했습니다" | 2008/09/15 |
| [Linux] 자동 백업 스크립트, DB백업, 복구 | 2008/10/05 |
| 파비콘을 만들어보자 | 2007/11/01 |

fancymenu.zip


댓글을 달아 주세요