スライドメニューの開発 - paulbarre/RssReader GitHub Wiki

このレッスンでは、メニューをスライドメニューに変更します。サンプルの通りに開発していきましょう。

CSSの準備

メニューにHTMLでidを付けます。

<aside id="menu">
    <h2>メニュー</h2>
    ...
</aside>

menu.cssというメニューの設定するCSSファイルをcss/フォルダーに追加して、index.htmlのヘッダーに反映します。

<head>
    ...
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    ...
</head>

メニュー位置の固定

メニューをブラウザーの左側に固定します。そのためにmenu.cssにこの定義を記述します。

#menu {
    background-color: green;
    opacity: 0.5;
    height: 100%;
    width: 500px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
}
  • background-color: 仮の色を設定、開発中にわかりやすくするため
  • opacity: 一旦メニューを透明にし、ページの本文がどこにあるか確認できるようにする
  • height: メニューをブラウザーの高さと同じにする
  • width: 仮の横幅を設定する
  • position: 位置を固定にする
  • z-index: メニューを開く時に、本文の上に表示するためのプロパティー
  • top: メニューを一番上に配置する
  • left: メニューを一番左に配置する

ブラウザーで確認します。フイードをダウンロードしてページをスクロールしても、メニューがずっと同じ場所に固定されるはずです。

メニューボタン

ブラウザーでページをロードするした段階ではメニューは非表示にします。ボタンをクリックしたらメニューを開きます。

メニューに仮の値を設定します。デフォルトの横幅は0にしておきます。

#menu {
    ...
    opacity: 1;
    width: 0;
    ...
}

確認すると、メニューは非表示になっていますが、まだテキストが残っています。テキストも非表示にするため、下記を追加します。

#menu {
    ...
    overflow-x: hidden;
}

これで完全にメニューが非表示になります。

あとは、メニューが開いている状態のためのクラスを追加します。

#menu.opened {
    width: 40%;
}

メニューにopenedのクラスを付けると、幅がページの40%の割合で表示されます。

開くボタン、閉じるボタンも必要なので、index.htmlにボタンを追加します。

<header>
    <nav>
        <button class="menu-btn"><i class="fa fa-bars"></i></button>
    </nav>

    <h1>RSS Reader</h1>
</header>

<aside id="menu">
    <nav>
        <button class="menu-btn"><i class="fa fa-close"></i></button>
    </nav>

    <h2>メニュー</h2>
    
    ...
</aside>

２つのボタンに同じクラスを設定し、main.jsにある関数でボタンのクリックイベントを設定します。

$('.menu-btn').click(function () {
    $('#menu').toggleClass('opened');
});

jQueryのtoggleClassメソッドで、タグにクラスがあるか確認して、表示を切り替えます。

ブラウザーでメニューを確認します。

アニメーション

ボタンをクリックしてメニューを表示する際にアニメーションを追加します。menu.cssに定義を記述します。

#menu {
    ...
    transition: .5s;
}

menuに設定されているプロパティが変わるタイミングで、上記のスタイルシートを適用します。

ブラウザーで確認します。メニューのテキストを改行禁止にするため、下記を追加します。

#menu {
    ...
    white-space: nowrap;
}

もう一度確認しましょう。

フィードのダウンロード

メニューがページ本文の上部にあるため、フィードをダウンロード際にメニューが邪魔になります。

そのためフィードをダウンロードする時にメニューを閉じるようにしましょう。

favorite.jsで追加します。

function displayFavorites() {

    ...

    $('.download-btn').on('click', function () {

        ...
        $('#menu').toggleClass('opened');
    });
    
    ...
}
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️