【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【jQuery】レンスポンシブな固定フッターメニューの作成方法

【jQuery】レンスポンシブな固定フッターメニューの作成方法

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

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

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

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

去年の年末くらいから、サイトでよく見られるハンバーガーメニューを使うことをやめたら
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>

ステップ2: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%;
}
}

ステップ3: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を考えていくことが大事だと思います。

本田

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+