当サイトは旧サイトで2024年12月更新をストップいたしました。
新サイト・新ページには新たなコンテンツを盛りだくさんで運用しております。新サイト・新ページは semlaboratory.jp/column/ にアクセスいただきますようよろしくお願いいたします。
Superfishは、多様なドロップダウンメニューのjQueryのプラグインです。
シンプルなつくりっぽいですが、豊富なオプションを用意してくれているので、幅広いカスタマイズができるようなイメージになっているかと思います。
カスタマイズというのは変かな?・・・でも、まぁそんな感じです。
今回、本家のスキンに当たるCSSは使いませんでした。
ベースとなる色やコーディングが全く異なるため、こちらのテンプレートに併せたCSSにいたしました。
また、スマホではドロップダウンは適用しないため、スマホでは表示させないように、CSSでコントロールしています。
同時に、HTML中のulにもclassを割り振っています。
今回、CSS中の細かいことには触れません。
追加で読み込ませているCSSファイルでコントロールしていますので、デザインの変更なども含め、適宜、新しく追加したフィアルをおさわりください。
本家サイトです。
プラグイン一式をダウンロードして頂けます。
phptemp_sf_171127.zip
サンプルです。
4種類ほどの挙動がありましたが、デフォルトバージョンを組み込んだサンプルになっています。
今回は全ページに設置しています。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
今回は全ページに読み込ませることと、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>
また、今回、グローバルメニューに使っているulにclassを割り振りましたので、main.cssのみ、一部classを書き加えています。
ただ、sp_main.cssやtbl_main.cssは何も書き加えていません。
今回、スマホやタブレットサイズの表示時は消えるようにしているため、余計な影響を出さないためにも、classの修正をすることはしませんでした。
ですので、スマホとタブレットの時は、既存の動作と変わらない感じです。
ということで、最後は動作確認をして終了です。
上手く設定ができていれば、上手く動作していることと思います。
メニュー部分のデザインは、既存のグローバルメニューのデザインを踏襲している感じですので、新規で追加したCSSファイル「superfish.css」の2回目のul(ul.newmenu)以降のCSSを触っていただいたりすれば上手くデザインの調整はできると思います。
また、細かいオプションやサンプルも本家には用意されていますので、同じような要領で設定していただけると、どのバージョンでも上手く動作すると思います。
細かい文字列が並ぶのでうっとおしいかもしれませんが、慣れのない方にはぜひチャレンジしてみていただきたいところかもしれません。
WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。
いかがでしたでしょうか?
今回のドロップダウンは、若干面倒な感じがしたかもしれません。
挙動自体はわかりやすいですが、やはりデザインのベースを変えるというところが、面倒の種となっているようです。
とは言え、CSSを若干触る程度ですので、これくらいは慣れていただきたところかもしれませんね。
ドロップダウンは何かしら使うことが多いと思うので、PC版のページではこれらのドロップダウンを使い、スマホページなどはハンバーガーメニューを使ったメニューと組み合わせるような感じがいいと思います。
念のためですが、デザインを本家のまま使うのであればそのままでもスマホでも表示されます。
ただ、そのまま使うというわけにもいかないと思うので、上手く使い分けてくださいね。
執筆 : 清水 隼斗