固定フッターメニューを作成する

弊社がある滋賀県ですが、今月雪が降る日が多く冷え込んでいます。

お陰様でしもやけに悩まされておりまして、仕事に集中できません。。。
辛いです。。。

はい！ということで皆様いかかがお過ごしでしょうか。サポート部の本田です。

去年の年末くらいから、サイトでよく見られるハンバーガーメニューを使うことをやめたら
PVが増えたとか、再訪問が増えたとか色んなメリットがあるという記事が話題になっていました。

確かに、見てもらいたいコンテンツや機能を初めから隠すこと理由はあるんでしょうか。
そう言われればそうですね。

ということで今回はページのフッターに固定されるメニューの作成方法をご案内します。
HTML・CSS・jQueryの3つを使って実装していきます。
動きの確認はこちらのページからお願い致します。サンプルページ

ステップ1：HTMLの実装

まずはHTMLです。今回はリストタグを使います。

<<div class="sysFuncText footermenu">
<div class="sysContent">                            
<div class="footer-menu">
<ul><a href="#photo1"><li class="fm">PHOTO1</li></a>
<a href="#photo2"><li class="fm">PHOTO2</li></a>
<a href="#photo3"><li class="fm">PHOTO3</li></a>
</ul></div>
</div>
</div>

ステップ２：CSSの実装

次にCSSです。

レスポンシブにするために、[width]指定は％で指定しています。

li.fm {
    float: left;
    width: 33%;
    background: white;
    text-align: center;
    border: 1px solid black;
    border-radius: 4px;
    padding: 1%;
    margin-right: 1px;
}
.footer-menu {
    width: 100%;
    display: block;
    position: fixed;
    bottom: 2px;
    left: 6px;
    opacity: 1!important;
}
.sysFuncText.footermenu {
    max-width: 100%!important;
    margin-left: 1%!important;
}
@media screen and (max-width:480px){
.footer-menu {
    left: 2px;
}
li.fm {
    padding: 5%;
}
}

ステップ３：jQueryの実装

最後にjQueryの実装です。コードは短いです。

上から200pxの位置に移動スクロールするとフッターメニューが現れます。

jQuery(function() {
    var topBtn = jQuery('.footer-menu');
    topBtn.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) { // 200pxで表示
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
});
</script>

終わりに

サイトに見られるハンバーガーメニューなどのデザインやUIは何かしらの
意味を持って設置されています。

ただよく考えてみると違う方法が良かったりもします。
よく見かけるから、何となくお洒落だからではなく

ユーザーにとって良い経験を与えれるサイトにするために
最適なUIを考えていくことが大事だと思います。

本田