通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ネットショップの作り方 > 中級ノウハウ > スマホサイトにフローティングメニューをつける方法

スマホサイトにフローティングメニューをつける方法

フローティングメニューアニメ

フロートとは「浮く」という意味です。スマホ画面をスクロールさせても、いつも一番上や一番したに浮いているナビゲーションやボタンのことをフローティングメニューと言います。

このフローティングメニューをつけることで、お客さんはヘッダーまで戻らなくても、見たいページをすぐにタップすることができます。

今回はショップサーブのスマホサイトへの導入方法ですが、HTMLやCSSはそのままカラーミーやメイクショップ、ヤフーショッピング(トリプル)などにも、そのまま使えます。

目次

1.メニューボタンなど作成
2.ヘッダーやフッターに配置
3.CSSを使ってフローティングの設定をする
4.ちょっとスクロールしてから表示させる方法

まずはメニューボタンなどの作成

フローティングさせるのを「上に戻る」ボタンにするのか「ナビゲーション」にするのか。あるいは、いわゆるCALL TO ACTIONの「お問い合せは今すぐお電話で」といったバナーにするのかは、自由に決めます。今回はヘッダー部分に4つのメニューをつけます。

home zakka mizugi kagu

今回はこの4つのボタンを作ってみました。使った画像ソフトはお馴染みホームページ・ビルダーに付属している「ウェブアート・デザイナー」というシンプルなソフトです。配置するのはフッター、つまり画面の一番下の予定です。

今回のボタンに使った無料素材
http://webworkkit.minibird.jp/button/cute/buttoncute1pink_dl.html

ヘッダーやフッターに配置

これをスマホサイト作成画面の「共通フッタ」のところに配置します。その際に、CSS用のIDやCLASSなどをあらかじめ指定しておきます。

HTMLは次のように書きます。

<div id="floatingmenu">
<a href="リンク1><img src="ボタン1"></a>
<a href="リンク1><img src="ボタン1"></a>
<a href="リンク1><img src="ボタン1"></a>
<a href="リンク1><img src="ボタン1"></a>
</div>

ここまでできたら、いったんプレビューに反映させてちゃんと表示されるかどうか確認します。問題なければ「お店ページに反映する」ボタンを押します。この段階ではフローティングではなく固定された状態です。


※フッターのフリーエリアのチェックをしておきます。

CSSを使ってフローティングの設定をする

今回新しく追加したメニューはIDに「floatingmenu」と指定しました。この部分のCSSを記入します。記入するのは、スマホサイト作成画面の「各種設定」→「スタイルシート編集(上級者用)」の箇所です。

CSSはこれをコピペです。CSSの一番下に付け足す形がわかりやすくで良いでしょう。

#floatingmenu {
display: block;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 9999;
text-align: center;
padding: 0 auto;
}

「お店ページに反映する」を押せば完了です。

で、スマホで確認してみたところ、画面の下にぴったりくっついてるので、ちょっと上に上げてやりました。変更する箇所はCSSの「bottom:0px;」と言うところです。bottomは「底」という意味です。底から10pxのところに配置(レイアウト)せよ」という設定に変えました。

レイアウト調整
スマホイラスト(http://01.gatag.net/0004112-free-illustraition/)

ちょっとスクロールしてから表示させる方法

いきなりフローティングメニューを出さずに、ちょっとスクロールさせてから表示させたい場合は、メニューのHTMLの下に次のコードを入れておきます。ただし、これはjQueryというやつなので、<HEAD>内でJqueryを読み込んでおきます。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
~</head>

<div id="floatingmenu">メニュー</div>
<script>
jQuery(function() {
var topBtn = jQuery('#footerFloatingMenu');
topBtn.hide();
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 220) { // 220pxスクロールで表示させる
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
</script>

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP