今日の人気記事

  1. テーブルやリストから文字列を検索「QuickSearch」
  2. クリック操作で時計回りにスライドする画像ギャラリー「Aperture」

簡単にドロップダウンメニューがつくれる「Superfish」

スポンサーリンク

簡単にドロップダウンメニューがつくれるjQueryプラグイン「Superfish」を紹介します。

jQueryプラグイン「Superfish」

メニューバーにマウスオーバーするとびよーんとメニューのメニュー?が出てくる!よくみるアレです。あのプラグインです。

スポンサーリンク

デモでドロップダウンメニューの動作を確認してみてください。

「Superfish」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superfish dropdown menu - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/superfish.css" media="screen">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/superfish.js"></script>
<script>
$(document).ready(function() {
  $('#demo').superfish();
});
</script>
</head>
<body>
<ul id="demo" class="sf-menu">
  <li class="current">
    <a href="../../">めにゅー①</a>
    <ul>
      <li>
        <a href="../../">アイテム</a>
      </li>
      <li class="current">
        <a href="../../">アイテム</a>
        <ul>
          <li class="current"><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="../../">メニュー②</a>
  </li>
  <li>
    <a href="../../">メニュー③</a>
    <ul>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
      <li>
        <a href="../../">アイテム</a>
        <ul>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
          <li><a href="../../">アイテム</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="../../">メニュー④</a>
  </li> 
</ul>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)