dayjournal | Materialize #003 – ドロップダウン

Materializeでドロップダウンを構築するには下記のように記述します。

Materializeのサイト内のDropdownを確認すると、サンプルがあるのでそれを参考にドロップダウンの機能を実装してみます。

前回作成した「index.html」と「script.js」を修正します。

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <title>Materialize_sample</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="./materialize/css/materialize.css" rel="stylesheet" media="screen,projection" />
</head>

<body>

    <ul id="dropdownTop" class="dropdown-content">
        <li><a href="collapsible.html">JS 01</a></li>
        <li><a href="collapsible.html">JS 02</a></li>
        <li><a href="collapsible.html">JS 03</a></li>
    </ul>

    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdownTop">Javascript<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
        </div>
    </nav>

    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="./materialize/js/materialize.js"></script>
    <script src="./js/script.js"></script>
</body>

</html>

script.js


(function ($) {
    $(function () {

        $('.button-collapse').sideNav();

        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: true
        });

    });
})(jQuery);

作成したindex.htmlを実行すると下記のように表示されます。メニューのJavascriptと表示されている場所にマウスをhoverするとドロップダウンが表示されます。

分割線を追加： class=“divider”を追加します。


    <ul id="dropdownTop" class="dropdown-content">
        <li><a href="collapsible.html">JS 01</a></li>
        <li class="divider"></li>
        <li><a href="collapsible.html">JS 02</a></li>
        <li class="divider"></li>
        <li><a href="collapsible.html">JS 03</a></li>
    </ul>

クリックでドロップダウン表示： hoverの記述を変更します。


        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: false,
            belowOrigin: true
        })

メニュー上にドロップダウン表示： belowOriginの記述を変更します。


        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: false
        })

ナビゲーションバーと組み合わせてドロップダウンも実装することが可能です。オプションで簡単なカスタマイズも出来るので使いやすいです。

参考文献
Materialize

dayjournal memo

Materialize #003 – ドロップダウン

Yasunori Kirimoto 2016/5/23

index.html

script.js