WordPressテーマの「Simplicity」で固定表示されるモバイルのメニューを、スクロールで非表示するようにしてみた

技術情報

当サイトで採用しているWordPressテーマの「Simplicity」は非常に高機能で、カスタマイズでモバイルのメニューをブラウザのトップに表示して固定する機能があります。

ただ、モバイルのメニューをブラウザのトップに固定すると、コンテンツの表示領域が狭くなってしまいます。記事を読む時など、少しでも表示領域が広い方がよいと思い、スクロールでメニューを非表示するようにしてみました。

js

下記のjsを「slide-menu.js」などとして、「Simplicity」の子テーマにアップロードします。

var startPos = 0;

jQuery(window).scroll(function() {
    var currentPos = jQuery(this).scrollTop();
    if (currentPos > startPos) {
        if (jQuery(window).scrollTop() >= 200) {
            jQuery("#footer-mobile-buttons").css("top", "-55px");
        }
    } else {
        jQuery("#footer-mobile-buttons").css("top", 0 + "px");
    }
    startPos = currentPos;
});

モバイルメニューの「#footer-mobile-buttons」に対して、非表示をする処理を施しています。

「-55px」の「55px」はモバイルメニューの高さと同じにします。同じ高さを指定しないと、メニューをしっかり非表示にさせることができません。

footer-insert.php

子テーマの「footer-insert.php」に下記の記述をします。

<?php if(is_mobile()): ?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/slide-menu.js"></script>
<?php endif; ?>

「<?php if(is_mobile()): ?>」により、モバイルにのみ「slide-menu.js」が読み込まれます。

css

子テーマの「mobile.css」に下記のスタイルを記述します。

#footer-mobile-buttons {
    transition: .3s;
    background: rgba(255,255,255,.8);
}

モバイルメニューの「#footer-mobile-buttons」に、transitionプロパティでメニューの非表示をアニメーションさせています。backgroundのrgbaでメニューの背景を半透明にしています。

動作確認

実装がうまくいけば下記のようになるはずです。

下にスクロールするとメニューが非表示になり、上にスクロールするとメニューが表示されます。

今回の機能を実装するにあたり、下記のサイトを参考にさせていただきました。

jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー | Webpark
ウェブサイト作成に役立つことをいろいろと

まとめ

  • モバイルメニュー非表示用の「slide-menu.js」を作り、子テーマの「footer-insert.php」に読み込ませる。
  • アニメーション用のCSSを作り、子テーマの「mobile.css」に記述する。

メニューの固定はいろいろと便利ですがブラウザの表示領域を占有してしまいます。記事を読む場合など、下にスクロールする時にメニューを非表示にすると、コンテンツ部分を広く表示できるのでスッキリします。

スクロール関係の操作はいろいろ問題が出やすいので、様子を見ていきたいと思います。

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
PC ウェブログ

コメント