*

スマホランディングページに最適なドロワーメニュー

公開日: : 最終更新日:2018/06/10 CSSやHTML、CGI

この記事は約4分で読むことができます。

ショップサーブのスマホページにドロワーメニューを取り付けるために大奮闘していました。というのも、理想的なドロワーメニューがなかなか見つからなかったんです。

ドロワーメニューとは↓こんなやつです。

ドロワーメニュー
(出典:http://git.blivesta.com/drawer/)

いろんなタイプを試してみたんですが、スマホのランディングページに使うには、もう一息のものばかりです。

そのもう一息はこれです。

ページ内リンクに飛んだときにメニューが消える

どのドロワーメニューもリンクをクリックしてページ変遷があると、ちゃんと消えてくれます。でも、ランディングページのような1枚もののページの場合、メニューはhogeとするのですが、出てきたメニューのリンクをクリックすると、該当箇所には飛ぶのですが、メニューが出たままになるんです。

もちろん、メニュー以外の場所をタップすると消えますが、それをお客さんにやらせてしまうのは、ユーザーフレンドリーじゃないですよね。UIに難点ありってやつです。

そこで、探しに探しまくってたどり着いたのがSlicknavというドロワーメニューです。これも簡単に導入できると良かったのですが、CSSだけで構成されているかのようなシロモノで、CSS苦手さんにとっては難関中の難関でした。しかも、Javascriptもからんでくるので、書き方もわからないし挫折寸前まで行きました。

でもなんとか、解説してくれているサイトが1つだけあって、なんとか理想的なドロワーメニューをつけることができました。

あとひとつ難題がありました。それは、メニューを上部に固定(position:fixed)するために、ページ内でリンク変遷したとき、該当個所(id=***)が一番上に行って、メニューに隠れてしまう点です。

これもお悩みの方がたくさんいるようで、紹介されている定番の解決方法は「padding-topでメニューの高さ分ずらして、margin-topでマイナスの値をいれる」と、なんともややこしい方法です。やってみたけど、とりあえず初回失敗したので、あきらめて次のような解決策を取りました。

LPのリンク先はすべてタグにidを入れてラベルにするわけですが、それをしてしまうと見出しがページトップで隠れるわけです。だから、タグの前に<div id=”hoge” style=”height: 100px;”></div>と、メニューの高さ分スペースを作ったところにラベルを貼りました。

「リンク先が空白」と構造的におかしなことになってしまうのですが、表面上はきれいにハマるので問題ないでしょう。各見出しのブロック間も適度に開いて見やすくなります。



Adsense

関連記事

カウントダウン

繁盛感の演出~注文が入りました!自動スクロール~

楽天ショップなどでよく見かける「注文が入りました!」逆スクロールをショップサーブに導入しよう!企画?

記事を読む

CGIとSSL

ショッピングカートCGI利用時はSSLに

SSLとは通信の暗号化のこと。お客さんが個人情報やカード情報を送信するときは、必ず暗号化通信にするこ

記事を読む

レスポンシブ・ウェブ・サイト

レスポンシブ・ウェブ・サイトの仕組み

もっともレスポンシブ・サイトを作りやすいのは、コンテンツがデータベースに記録されているケースですね。

記事を読む

Youtube

動画の再生は可能か?(埋め込み手順)

ショップサーブでは、トップページや商品ページへの動画の貼り付けは、他のサービスに比べると、比較的簡単

記事を読む

EFO

ショッピングカートCGI復活か

10年前は全盛だったショッピングカートCGIですが、もはや絶滅かという域に達しつつあります。

記事を読む

売れてる本の表紙デザイン

売れている本は表紙デザインが秀逸

ショッピングカートを作りたい! APIを使えるようになりたい! マッシュアップサイトを作

記事を読む

納品書

ショップサーブの納品書のフォントを明朝体に変更する方法

納品書のフォントの初期設定はゴシック体です。「このフォントを変えたい!」と思っている方もいるでしょう

記事を読む

ヘッダー看板

ヤフーショップのヘッダー画像HTMLの編集方法

開店申請にパスしたなら、とりあえず商品を登録して行くわけですが、ヘッダーを作ってお店らしくしたい人も

記事を読む

EC CUBE HETEML

EC CUBEを使う場合の注意点(共用SSL)

「EC CUBEを使ってお店を作りたい。お店サイトは独自ドメインで、カード部分は共用SSLを使いたい

記事を読む

儲かりまっせ

ただで仕入れたモノを5万円で売る。

ITの世界は「ボロ儲けできる」というのが垣間見れるサービスが、ショップサーブのオプションサービスにあ

記事を読む

Adsense

Adsense

no image
「フレーミング効果」の事例や活用方法

ネット販売をするなかで、◯◯の法則だの、△△効果など、よく使います。キ

常時SSL
常時SSL化(https://)進めていますか?

ショップサーブのクライアントさんは少なめですが、すでに関わっていな

ネットショップは電話対応しない
「ネットショップは電話対応しないのが基本」の法則

ネットショップが電話を受け付けない3つの理由といった定番記事があります

トップセラー
ここへきて、トップセラーの新規ユーザー急増中

ドロップシッピングの先駆けであり老舗の「トップセラー」を始める人が

SAKURA internet
sakura internetへのwordpress引っ越しと常時SSL化

気づけば「そんなブログやってたの!?」というブログを2つ発掘。それ

→もっと見る

PAGE TOP ↑