*

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

公開日: : 最終更新日: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

関連記事

EC CUBEはバージョン2.13がオススメ

過去にインストールして試してみたCMSは数知れず。Movable Typeに始まり、XOOPS、Dr

記事を読む

CGIとSSL

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

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

記事を読む

no image

初心者は安易にワードプレスを使うな

脆弱性(ぜいじゃくせい)の話です。脆弱性とは、簡単にいえば弱点のこと。その弱点をつかれても、軽い痛み

記事を読む

ルミーズ配布終了

ルミーズ・ショッピングカートCGI配布終了

http://www.remise.jp/news/20141015.htm フリーショッピン

記事を読む

電話予約

「ご予約はお電話で?」「ご予約のご変更はお電話で?」はっ????

※http://support.biglobe.ne.jp/ask/konzatu.html

記事を読む

モーダルウィンドウ

スマホサイトで新規ウィンドウを立ち上げずその場でちびウィンドウ(小窓)

target="_blank" パソコンサイト用では、何の疑問もなく多用するリンクのターゲット

記事を読む

トップページ用テンプレート

ヤフーストア・トップページ用のテンプレートを作ってみた。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあ

記事を読む

CSVファイルのカンマを置換

CSVファイルを変な区切り文字に変換する方法

エクセル(今回はOpenOffice)を使えば、任意の区切りでCSVファイルを作れると思ったらできま

記事を読む

EC CUBE HETEML

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

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

記事を読む

スライダーで賑わい感

紙芝居のように画像が入れ替わるパーツの正体は「スライダー」

ネットショップのヘッダーなどで、同じ場所で写真が自動的に入れ替わるパーツを「スライダー」と言います。

記事を読む

Adsense

Adsense

協会ビジネス
「個人事業主」「株式会社」以外に「一般社団法人○○協会」という選択

イギリス人と言えば紳士。フランス人と言えば個人主義。イタリア人

メルカリより「ヤフオクのほうがダンゼン熱い」場合が多いかも。

「出品するとすぐ売れる」メルカリが気持ち良くて、不要品が出ると

普通に便利なアプリ3選

スマホって画面が小さいから「ガッツリ仕事」をするには向いてない

共感するの?信じるの?
え?そんな話に共感するの?信じるの?まさか!

「会社員をやっているけど(商社勤め33歳男)、子供もいて、今の収入

ガイドライン
対岸の火事ではない!楽天のサムネイル・ガイドライン変更

誰しも、楽天のショッピングで「イラっ」とした経験がありますよね。

→もっと見る

PAGE TOP ↑