

cssフレームワーク「Materialize」を使用して、サイト制作をしています。

テンプレートコード例があるので、それを見ながら作成しているのですが、  
ナビゲーションボタンのところで行き詰まってしまいました。

同サイトの[Showcase](http://materializecss.com/showcase.html)中にある下記サイトのように  
「navバーをマウスオーバーすると1段組～4段組のメニューが展開する仕組み」を作りたいのです。

  * <https://artofwhere.com/>
  * <http://emerald.sekizgen.net/>

サイトを見たり、公式ホームページのテンプレートを見て解析したり試行錯誤もしたのですが、構造がよくわかりません。  
同フレームワークのみで出来ているのか、別にjavascriptやjQueryを使用しているのかなどもわからないです。  
英語の能力がほとんど無いせいもあるのですが、何かご助言頂けると幸いです。取り組み方でも、ここのテンプレートを参考にして、でも構いませんので、何か前にすすめるお手伝いをしいただければ幸いです。


CC BY-SA 3.0
2016-09-01T09:42:46.130
28623
2016-09-01T18:09:26.300
2016-09-01T18:06:12.083
3068
18668
question
html jquery css
cssフレームワーク「Materialize」でナビバーを作りたい


> 同フレームワークのみで出来ているのか、別にjavascriptやjQueryを使用しているのかなどもわからないです。

どちらのサイトもMaterializeの機能は使用せずにjQueryを使用しているようです。

<https://artofwhere.com/>

jQuery-menu-aimを使用しているようです。

kamens/jQuery-menu-aim  
<https://github.com/kamens/jQuery-menu-aim>

[code]

        $("#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
            }
        }),
    
[/code]

<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/>

  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検索

<http://emerald.sekizgen.net/>

開発者ツールでメニューの要素を確認後、`class`に指定されている`sf-menu`でGoogle検索


CC BY-SA 3.0
2016-09-01T18:01:43.933
28636
2016-09-01T18:09:26.300
2016-09-01T18:09:26.300
3068
3068
28623
answer