다운로드 주소: http://plugins.jquery.com/project/Superfish
문서 설명:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started
Superfish의 일부 기능 및 효과:
순수한 CSS를 사용하여 동적 효과 달성, 브라우저 간, 최악의 브라우저 IE6 지원
마우스가 떠날 때 자동으로 숨겨지도록 드롭다운 메뉴를 설정할 수 있습니다. 기본값은 800밀리초
페이드인 및 페이드아웃 애니메이션 지원
키보드 응답 지원
하위 메뉴가 포함된 상위 메뉴에 프롬프트 화살표를 자동으로 추가
그림자 효과를 지원하지만 파이어폭스, 크롬 등 좋은 브라우저 지원이 필요...최악의 브라우저 IE6은 제외
선택적 콜백 js 함수
사용 지침
1. 1. 먼저 Jquery와 Superfish 파일을 페이지에 소개합니다
<script src="Jquery.js" type="text/javascript"><!--mce:0--></script> <script src="superfish.js" type="text/javascript"><!--mce:1--></script>
2. 두 번째로 ulli를 이용해 메뉴 콘텐츠를 만들어 보세요
<ul class="sf-menu"> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"> <a href="#ab">menu item →</a> <ul> <li class="current"><a href="#">menu item</a></li> <li><a href="#aba">menu item</a></li> <li><a href="#abb">menu item</a></li> </ul> </li> </ul>
3.마지막으로 초기화 메뉴를 생성하고 효과를 설정합니다
$(document).ready(function(){ $("ul.sf-menu").superfish({ hoverClass: 'sfHover', //当鼠标掠过时的class pathClass: 'overideThisToUse', // 激活的菜单项的class pathLevels: 1, // 菜单级数 delay: 800, // 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒 animation: {opacity:'show'}, // 动画效果,参考Jquery的动画jQuery's .animate() speed: 'normal', // 动画速度, 参考Jquery的动画jQuery's .animate() dropShadows: true, // 阴影效果,关闭用‘false' onInit: function(){}, // 初始化的回调函数 onBeforeShow: function(){}, // 子菜单显示前回调函数 onShow: function(){}, // 子菜单显示时回调函数 onHide: function(){} // 子菜单隐藏时回调函数 }); });
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.