同フレームワークのみで出来ているのか、別にjavascriptやjQueryを使用しているのかなどもわからないです。
どちらのサイトもMaterializeの機能は使用せずにjQueryを使用しているようです。
https://artofwhere.com/
jQuery-menu-aimを使用しているようです。
kamens/jQuery-menu-aim
https://github.com/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
}
}),
http://emerald.sekizgen.net/
Superfishを使用しているようです。
Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
class
にsf-menu
が指定されている
- bodyの閉じタグ直前に
superfish.js
が読み込まれている
英語の能力がほとんど無いせいもあるのですが、何かご助言頂けると幸いです。取り組み方でも、ここのテンプレートを参考にして、でも構いませんので、何か前にすすめるお手伝いをしいただければ幸いです。
今回は下記のように探しました。
今後のご参考になれば幸いです。
(使用ブラウザはChrome)
https://artofwhere.com/
- 開発者ツールでメニューの要素を確認後、
bignav
やsubnav
でGoogle検索するも、なにも出ず
- 開発者ツールで
bignav
のEvent Listenersタブでmouseoverを選択し、master.min.js
の当該行に移動
- jsがminify(圧縮)されているので、ツールの画面下にある
{ }
ボタンをクリックして整形
- 当該行(master.min.js:formatted#L9794)からはjQueryプラグインであることしかわからないので、ソースをCtrl + Fで検索(
nav
、bignav
、subnav
etc.)
- 前記の引用コードが見つかるので、
menuAim
でGoogle検索
http://emerald.sekizgen.net/
開発者ツールでメニューの要素を確認後、class
に指定されているsf-menu
でGoogle検索