> 웹 프론트엔드 > JS 튜토리얼 > jQuery 메뉴 플러그인 superfish 사용 가이드_jquery

jQuery 메뉴 플러그인 superfish 사용 가이드_jquery

WBOY
풀어 주다: 2016-05-16 16:02:46
원래의
1904명이 탐색했습니다.

다운로드 주소: 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(){}  // 子菜单隐藏时回调函数
  });
 });
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿