dayjournal | Materialize #002 – ナビゲーションバー

Materializeでナビゲーションバーを構築するには下記のように記述します。

Materializeのサイト内のNavbarを確認すると色々なサンプルがあります。今回は、「Mobile Collapse Button」を実装してみます。

前回作成した「index.html」の修正と、新規で「script.js」を作成してjQueryを少し記述します。

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>

    <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 href="collapsible.html">Javascript</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();

    });
})(jQuery);

作成したindex.htmlを実行すると下記のように表示されます。

デフォルトでレスポンシブ対応もされています。

バーの色を変更： navの記述を変更します。


<nav class="light-blue darken-1">

文字を内側にオフセット： div class=“nav-wrapper”の記述を変更します。


<div class="nav-wrapper container">

色々な種類のナビゲーションバーを手軽に実装できます。細かいカスタマイズは別としてCSSとjsを意識しないで実装可能です。

参考文献
Materialize

dayjournal memo

Materialize #002 – ナビゲーションバー

Yasunori Kirimoto 2016/5/19

index.html

script.js