
フッターメニューを作る

- オリジナルのフッターメニューを作りたい。
- スクロールアクションに合わせて、スライドイン・スライドアウトするメニューにしたい。
ココがポイント
結論:
ユーザーのスクロールバーアクションに合わせて、Webページの内容を変更したい場合は、JavaScriptの「scroll」を使用する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

皆様は、Webページを作成していると、画面スクロールに合わせて移動するフッターメニューを作ってみたいと思ったことはございませんか?そして、できれば、スクロールに合わせて隠れたり現れたりするものにしたい。
今回は、HTML・CSSで自作のフッターをデザインし、画面TOPでは隠れて、スクロールすると現れる、またページ最下部では隠れるという、動きのあるフッターメニューをご紹介しようと思います。
1.画面と一緒にスクロールするフッターメニュー
See the Pen
footer by 三好雄介 (@yusuke5028198)
on CodePen.
Webページの下に固定されたフッターメニューを作成しています。ページのトップでは画面外に隠れていて、スクロールすると画面内に表示されます。また、ページの最下部に来ると、時間を置いてから画面外に隠れるようにしています。「class="list"」内に項目を増やせば、自動で高さが変化し、横幅が均等に配置されるようになっております。
参考
CSSのコードの意味
#footerMenuBar-MobileTablet .list a{ text-decoration: none; color: #fff;/*文字色*/ flex: 1 1 auto;/*エリアを等分割*/ text-align: center; display: inline-block; }
このブロックで、フッターメニューのそれぞれのアイコンのスタイルを指定しています。
4行目:flex: 1 1 auto;
flexプロパティでは、順にflex-grow→flex-shrink→flex-basisの値を指定しています。今回は、flex-growとflex-shrinkに「1」を指定して、幅を均等に配分するようにしています。
プロパティ名 | 反映内容 |
flex-grow | フレックスコンテナの幅が十分に広くて、各フレックスアイテムのflex-basisプロパティの合計を上回っている場合、余った余白を個々のフレックスアイテムに配分します。 |
flex-shrink | フレックスコンテナの幅が狭くて、各フレックスアイテムのflex-basisプロパティの合計値を下回っている場合は、個々のフレックスアイテムの幅を縮めて、フレックスコンテナに収まるように表示されます。 |
flex-basis | フレックスアイテムの基準の幅を指定するプロパティです。 値として「auto」を指定すると、フレックスアイテムのwidthプロパティの値が使われます。 |
JavaScriptのそれぞれのコードの意味
$(window).on('scroll', function(){ var doch = $(document).innerHeight();/*ドキュメントの高さ*/ var winh = $(window).innerHeight();/*ウィンドウの高さ*/ var bottom = doch - winh;/*ページ最下部のスクロールトップの高さ*/ if (bottom <= $(window).scrollTop()){ /*一番下までスクロールした時に実行*/ setTimeout(function(){ $("#footerMenuBar-MobileTablet").css('transform','translateY(105%)'); },5000);/*5秒後に実行*/ }else if(100 <= $(window).scrollTop()){ /*ページトップからスクロールしたとき*/ $("#footerMenuBar-MobileTablet").css('transform','translateY(0%)'); }else{ /*その他の時*/ $("#footerMenuBar-MobileTablet").css('transform','translateY(105%)'); } });
1行目:$(window).on('scroll', function(){
ここで、画面がスクロールされたときに、以下の処理を実行しています。
2~3行目:var doch = $(document).innerHeight(); var winh = $(window).innerHeight();
この行で、それぞれのWebページの高さと、ユーザーのウィンドウの高さの値を、各変数に代入しています。
4行目:var bottom = doch - winh;
この行で、Webページの高さから、ユーザーのウィンドウの高さを引いた、ページ最下部までスクロールしたときのウィンドウ画面上部の位置を、変数「bottom」に代入しています。jQueryでは「scrollTop()」メソッドでウィンドウ画面上部の位置を取得できるので、「bottom」の値と比較して、アクションを場合分けできるようになります。
5行目:if (bottom <= $(window).scrollTop())
ページ最下部でのウィンドウ画面上部の位置以上、つまり最下部よりさらに下までスクロールした時の条件です。条件を「bottom - 100 <= $(window).scrollTop()」や「bottom * 0.9 <= $(window).scrollTop()」として値を小さくすることで、ページ最下部までスクロールする前から以下の関数を実行するといったことも行えます。
7~8行目:setTimeout(function(){},5000);
このメソッドでアクションを遅延させています。
9行目:if(100 <= $(window).scrollTop())
この条件は、Webページの最上部(ページトップ)から100px(ピクセル)以上スクロールしたときの条件になります。ここで、フッターメニューをウィンドウ画面の下から表示させています。
12行目:else
12行目で上の2つの条件以外で以下を実行する条件にしています。「ページ最下部」と「100px以上スクロールしたとき」、この2つの条件以外なので、ページトップで実行する条件になっています。
14行目:$("#footerMenuBar-MobileTablet").css('transform','translateY(105%)');
フッターメニューを、その高さの105%分下に移動させる命令になっています。
もっと詳しく
アクションを遅延する方法の詳しい記事:
スクロールアクションでページの最下部を判別する方法の詳しい記事:
2.ラジオボタンで複数のメニューボタンを連動させる
皆様は、片方のボタンをクリックしたら、もう片方のボタンで表示していた内容をたたんで隠しておきたい。そのように、メニューボタンを連動させたいと思ったことは、ございませんか?
次のリンクでは、input要素typeを「ラジオボタン」にすることで、複数のメニューボタンを連動させて、開閉できる方法について、解説しております。
フッターメニューを作成した後に、メニューボタンを連動させたいと思ったら、チェックしてみてください。
もっと詳しく
まとめ
お疲れ様でした。
フッターメニューはスマートフォンでは、よく見かけるメニューです。自作することで、いろいろなメニューを登録できるようになると、Webページのカスタマイズの幅が広がると思います。追加してみたいメニューをいれてみては、いかがでしょうか?
最後まで、ご一読いただきありがとうございました。