簡単にドロップダウンメニューがつくれる「Superfish」
当ページのリンクには広告が含まれています。
スポンサーリンク
簡単にドロップダウンメニューがつくれるjQueryプラグイン「Superfish」を紹介します。
jQueryプラグイン「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>
スポンサーリンク