jQuery 강좌 | Plugins > Superfish - 드롭다운 메뉴 만들어주는 플러그인

Superfish는 드롭다운 메뉴를 만들어주는 jQuery 플러그인입니다.

사용법도 간단하고, 여러 옵션을 포함하고 있어 드롭다운 효과를 바꾸기 편합니다.

사용법

Superfish는 다음의 링크에서 다운로드 받을 수 있습니다.

http://users.tpg.com.au/j_birch/plugins/superfish/download/

다운로드 받은 파일을 압축 해제한 후 dist 폴더 안의 css와 js 폴더를 서버에 업로드합니다.

다음처럼 css와 js 파일을 연결합니다. jQuery 플러그인이므로 jQuery도 연결해야 합니다.

<link rel="stylesheet" href="css/superfish.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/superfish.js"></script>

드롭다운 메뉴 효과를 주고 싶은 ul 요소에 sf-menu를 값으로 하는 class를 추가합니다.

<ul class="sf-menu">
...
</ul>

예제

http://book.cmsfactory.net/jQuery/V01/Plugins/Superfish/superfish-01.html

기본 옵션으로 만든 드롭다운 메뉴 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Plugin | Superfish</title>
    <link rel="stylesheet" href="css/superfish.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/superfish.js"></script>
  </head>
  <body>
    <ul class="sf-menu">
      <li>
        <a href="#">Menu 1</a>
        <ul>
          <li>
            <a href="#">Menu 1-1</a>
          </li>
          <li>
            <a href="#">Menu 1-2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Menu 2</a>
      </li>
    </ul>
  </body>
</html>

옵션을 변경하고 싶으면 다음의 코드를 추가합니다.

<script>
  jQuery(document).ready(function() {
    jQuery('ul.sf-menu').superfish({
      // Superfish Option
    });
  });
</script>

옵션에 관한 자세한 설명은 다음의 링크에 있습니다.

http://users.tpg.com.au/j_birch/plugins/superfish/options/

더 많은 정보

Category

Created on 2014-03-21 11:52 | Updated on 2015-07-17 00:49

이 글을 공유하기

Kakao