HOME > コラム > jQuery/JS Chips > 多様なドロップダウンを実装できるjQueryプラグイン「Superfish」の使い方

多様なドロップダウンを実装できるjQueryプラグイン「Superfish」の使い方

コラム

Superfishは、横に並ぶメニューや縦に並ぶメニューの両方に対応するドロップダウンを実装することができるjQueryプラグインです。
デモも用意されていますので、イメージがわきやすい挙動だと思います。
しかし、ドロップダウン系のjQueryプラグインはスッキリシンプルな国内産がかなり使いやすいイメージがあります。
単純な動きでシンプルな感じです。
ただ、海外産のドロップダウンは若干複雑になっている気はしますが、幅広い設定があらかじめ用意されている感じで、このような多様性のあるドロップダウンだと、何かと助かることも多い感じがします。
どっちが良いというわけではなく、どっちが悪いというわけでもなく、、、という感じですので、とりあえず使い慣れるような感じでご利用いただければと思う次第です。
因みにですが、2017年11月27日現在、バージョンは1.7.9です。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

多様なドロップダウンを実装できるjQueryプラグイン「Superfish」の使い方

多様なドロップダウンメニュー

Superfishは、多様なドロップダウンメニューのjQueryのプラグインです。
シンプルなつくりっぽいですが、豊富なオプションを用意してくれているので、幅広いカスタマイズができるようなイメージになっているかと思います。
カスタマイズというのは変かな?・・・でも、まぁそんな感じです。

今回、本家のスキンに当たるCSSは使いませんでした。
ベースとなる色やコーディングが全く異なるため、こちらのテンプレートに併せたCSSにいたしました。

また、スマホではドロップダウンは適用しないため、スマホでは表示させないように、CSSでコントロールしています。
同時に、HTML中のulにもclassを割り振っています。

今回、CSS中の細かいことには触れません。
追加で読み込ませているCSSファイルでコントロールしていますので、デザインの変更なども含め、適宜、新しく追加したフィアルをおさわりください。

本家サイト

本家サイトです。
プラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_sf_171127.zip
組み込み済みサンプル

サンプルです。
4種類ほどの挙動がありましたが、デフォルトバージョンを組み込んだサンプルになっています。

今回は全ページに設置しています。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
追記した記述と新規のCSSファイル

今回は全ページに読み込ませることと、htmlも変えています。 細かい構造はそれぞれのファイルを直接見てみてください。

以下の記述を全ページに追記できれば問題なく動作するかと思います。
今回は、全ページで読み込ませることができるように設定ファイルに追加し、設定ファイルをインクルードさせるような感じにしています。
また、404ページでも読み込むため、適宜、対応している感じです。
詳しくは、ダウンロードフォルダをご確認ください。

<link rel="stylesheet" media="screen" href="/css/superfish.css" />
<script src="/js/superfish.js"></script>
<script>
jQuery(document).ready(function(){
	jQuery('ul.sf-menu').superfish();
});
</script>
<div id="globalbg">
<div id="global">
<ul class="sf-menu">
<li id="now"><a href="/">TOP</a>
<ul class="newmenu">
<li><a href="/sitemap.php">サイトマップ</a></li>
<li><a href="/privacy.php">プライバシーポリシー</a></li>
</ul>
</li>
<li><a href="/cate_01/">コンテンツ1</a>
<ul class="newmenu">
<li><a href="/cate_01/cate_01_01/">コンテンツ1-1</a></li>
</ul>
</li>
<li><a href="/cate_02/">コンテンツ2</a>
<ul class="newmenu">
<li><a href="/cate_02/cate_02_01/">コンテンツ2-1</a></li>
</ul>
</li>
<li><a href="/cate_03/">コンテンツ3</a>
<ul class="newmenu">
<li><a href="/cate_03/cate_03_01/">コンテンツ3-1</a></li>
</ul>
</li>
<li><a href="/cate_04/">コンテンツ4</a>
<ul class="newmenu">
<li><a href="/cate_04/cate_04_01/">コンテンツ4-1</a></li>
</ul>
</li>
</ul>
</div>
</div>
既存のmain.cssファイルの修正

また、今回、グローバルメニューに使っているulにclassを割り振りましたので、main.cssのみ、一部classを書き加えています。
ただ、sp_main.cssやtbl_main.cssは何も書き加えていません。

今回、スマホやタブレットサイズの表示時は消えるようにしているため、余計な影響を出さないためにも、classの修正をすることはしませんでした。
ですので、スマホとタブレットの時は、既存の動作と変わらない感じです。

最後に動作確認

ということで、最後は動作確認をして終了です。
上手く設定ができていれば、上手く動作していることと思います。

メニュー部分のデザインは、既存のグローバルメニューのデザインを踏襲している感じですので、新規で追加したCSSファイル「superfish.css」の2回目のul(ul.newmenu)以降のCSSを触っていただいたりすれば上手くデザインの調整はできると思います。

また、細かいオプションやサンプルも本家には用意されていますので、同じような要領で設定していただけると、どのバージョンでも上手く動作すると思います。

細かい文字列が並ぶのでうっとおしいかもしれませんが、慣れのない方にはぜひチャレンジしてみていただきたいところかもしれません。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_171030.zip 」です。
締め

いかがでしたでしょうか?
今回のドロップダウンは、若干面倒な感じがしたかもしれません。

挙動自体はわかりやすいですが、やはりデザインのベースを変えるというところが、面倒の種となっているようです。
とは言え、CSSを若干触る程度ですので、これくらいは慣れていただきたところかもしれませんね。

ドロップダウンは何かしら使うことが多いと思うので、PC版のページではこれらのドロップダウンを使い、スマホページなどはハンバーガーメニューを使ったメニューと組み合わせるような感じがいいと思います。
念のためですが、デザインを本家のまま使うのであればそのままでもスマホでも表示されます。
ただ、そのまま使うというわけにもいかないと思うので、上手く使い分けてくださいね。

執筆 : 清水 隼斗

多様なドロップダウンを実装できるjQueryプラグイン「Superfish」の使い方の通常ページ