今日の人気記事

まだデータがありません。

簡単にドロップダウンメニューがつくれる「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>

その他のオプションや詳細はこちらからどうぞ。

スポンサーリンク

関連記事（一部広告含む）