当サイトで採用している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でメニューの背景を半透明にしています。
動作確認
実装がうまくいけば下記のようになるはずです。
下にスクロールするとメニューが非表示になり、上にスクロールするとメニューが表示されます。
今回の機能を実装するにあたり、下記のサイトを参考にさせていただきました。
まとめ
- モバイルメニュー非表示用の「slide-menu.js」を作り、子テーマの「footer-insert.php」に読み込ませる。
- アニメーション用のCSSを作り、子テーマの「mobile.css」に記述する。
メニューの固定はいろいろと便利ですがブラウザの表示領域を占有してしまいます。記事を読む場合など、下にスクロールする時にメニューを非表示にすると、コンテンツ部分を広く表示できるのでスッキリします。
スクロール関係の操作はいろいろ問題が出やすいので、様子を見ていきたいと思います。
コメント