質問: cssフレームワーク「Materialize」を使用して、サイト制作をしています。 テンプレートコード例があるので、それを見ながら作成しているのですが、 ナビゲーションボタンのところで行き詰まってしまいました。 同サイトのShowcase中にある下記サイトのように 「navバーをマウスオーバーすると1段組~4段組のメニューが展開する仕組み」を作りたいのです。 * * サイトを見たり、公式ホームページのテンプレートを見て解析したり試行錯誤もしたのですが、構造がよくわかりません。 同フレームワークのみで出来ているのか、別にjavascriptやjQueryを使用しているのかなどもわからないです。 英語の能力がほとんど無いせいもあるのですが、何かご助言頂けると幸いです。取り組み方でも、ここのテンプレートを参考にして、でも構いませんので、何か前にすすめるお手伝いをしいただければ幸いです。
回答: > > 同フレームワークのみで出来ているのか、別にjavascriptやjQueryを使用しているのかなどもわからないです。 > > > どちらのサイトもMaterializeの機能は使用せずにjQueryを使用しているようです。 jQuery-menu-aimを使用しているようです。 kamens/jQuery-menu-aim ``` $("#nav").find(">ul").menuAim({ rowSelector: "> li", submenuDirection: "below", activate: function(a) { var b = $(a).find(".subnav"); b.show(), b.data("navTimeout_hide") && (clearTimeout(b.data("navTimeout_hide")), b.removeData("navTimeout_hide")), b.data("navTimeout_show", setTimeout(function() { b.addClass("hover") }, 20)) }, deactivate: function(a) { var b = $(a).find(".subnav"); b.removeClass("hover"), b.data("navTimeout_show") && (clearTimeout(b.data("navTimeout_show")), b.removeData("navTimeout_show")), b.data("navTimeout_hide", setTimeout(function() { b.hide() }, 300)) }, exitMenu: function() { return !0 } }), ``` Superfishを使用しているようです。 Superfish * `class`に`sf-menu`が指定されている * bodyの閉じタグ直前に`superfish.js`が読み込まれている > > 英語の能力がほとんど無いせいもあるのですが、何かご助言頂けると幸いです。取り組み方でも、ここのテンプレートを参考にして、でも構いませんので、何か前にすすめるお手伝いをしいただければ幸いです。 > > > 今回は下記のように探しました。 今後のご参考になれば幸いです。 (使用ブラウザはChrome) 1. 開発者ツールでメニューの要素を確認後、`bignav`や`subnav`でGoogle検索するも、なにも出ず 2. 開発者ツールで`bignav`のEvent Listenersタブでmouseoverを選択し、`master.min.js`の当該行に移動 3. jsがminify(圧縮)されているので、ツールの画面下にある`{ }`ボタンをクリックして整形 4. 当該行(master.min.js:formatted#L9794)からはjQueryプラグインであることしかわからないので、ソースをCtrl + Fで検索(`nav`、`bignav`、`subnav` etc.) 5. 前記の引用コードが見つかるので、`menuAim`でGoogle検索 開発者ツールでメニューの要素を確認後、`class`に指定されている`sf-menu`でGoogle検索