*

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

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

関連記事

レスポンシブWEBデザイン

レスポンシブ・デザインへの移行に際し学んだこと(その1)

自分のサイトをスマホで見た時の残念感・・・なんとかしたい。でもやる気ない・・・そんなこんなで数年が経

記事を読む

モーダルウィンドウ

ページの移動なしその場で子ウィンドウを表示できる「モーダルウィンドウ」

modalは英語で「形式上の」「形態上の」という意味ですが、modal window(モーダルウィン

記事を読む

スマホ対応レスポンシブ化

コーポレートサイト(会社ホームページ)のレスポンシブWEBデザイン化で儲ける方法

今ではほとんどの企業やお店がウェブサイトを持っているのは周知のこと。 そして、それぞれ

記事を読む

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

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

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

記事を読む

モーダルウィンドウ

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

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

記事を読む

最強のメルマガCGI

メルマガCGI、こんなに素晴らしい最強のCGIがあったのを忘れていた・・・

2018年からの傾向なんですが、通販システムを借りているショップサーブ(運営はEストアー)が、顧

記事を読む

認証キー

EC CUBE プラグイン用の認証キーの場所

納期が迫っているのに、ついついサボってEC CUBEでお遊びです。EC CUBEもバージョン3.0に

記事を読む

電話予約

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

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

記事を読む

CSSでレイアウト

ショップページをCSSでレイアウトするコツ

TABLEに慣れてるるので、レイアウトもついついTABLEを使ってしまいます。でも、そろそろCSSで

記事を読む

ウェブテクニック

ショップオーナーが知っておくと役に立つWEBテクニック

ネットショップを始めるのにHTMLやCSSとかの知識は、とりあえずいらないです。アプリを借りたなら、

記事を読む

Adsense

Adsense

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

リファラル採用
ECサイトのパート・アルバイト採用は低コストなリファラル採用

リファラル採用(Refarral recruitment)とい

送料を安くする
灯台下暗し!?送料を普通に安くする方法

個人事業主として契約して以来、「安いから」という理由で使い続けてい

→もっと見る

PAGE TOP ↑