sounansa.net

PCサイトをレシポンシブ化!難所”メニューバー”を簡単にスマホ対応する

スポンサーリンク

Googleが2015年4月21日までにスマホ対応しないとスマホ検索の順位を下げるぞ!と警告を出しまくってますね。

ボクももらいました。たくさんのアラートメール。

個人で運営しているサイトならまだしも、企業の運営するサイトでは深刻な問題です。

恐らく国内の大部分のコーポレートサイト、商品・サービスの紹介サイトではスマホ対応できていないと思われますので、影響も大きいことでしょう。

もちろん、ウチの会社だってコーポレートサイトもサービス紹介サイトもLPもみんなスマホ対応してませんでした。だって面倒だったんだもんレシポンシブデザインのコーディングって。BtoBの商売だし、いいよねって現実から目をそらしてましたボク。

さすがに、もう逃げられませんね。

渋々、レシポンシブ化を実装することにしました。

Chromeのデベロッパーツール使いながら、えっちらほっちらとメディアクエリー用のCSSプロパティ変更をしたところまでは良かったんです。慣れればそんなに難しくないしね。

ただ、ヘッダーエリアのグローバルナビゲーションメニューバーが厄介でした。
スマホっぽい開閉式のメニューにするのは、ちょっと大変そう。ただ並びかえるだけは嫌だったのです。メインコンテンツがファーストビューで全く見えないなんて、ボクとしてはあり得ないと感じたわけです。

横からスライドでも良いし、ドロップダウンの開閉式でも、どっちでも良いから、とにかく初期状態はメニューは隠れている状態がモバイルサイトとしてのUXとして好ましいとボクは思ってますので。

ユーザーエージェント見て動的にメニュー部分のHTMLコードを出しわける方法もありますが、静的なHTMLで作ったコーポレートサイトにそこまで手をかけるのもどうかなとも。そもそも頑張るのが嫌いなボク向きではないし。

Bootstrapとか使って根本的に実装し直すとかも、かったるいので嫌です。

簡単な良い方法ないかなと探していたら、良いものを見つけました。

slicknav

slicknav

使い方は簡単です。

HEAD内にcssとjsの読み込みさせます。あとJQuery1.7以上も必要です。

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.slicknav.min.js"></script>

HTMLは普通にul、liタグで書かれていれば大丈夫。そのまま使えます。li内にimgタグとかごちゃごちゃしてても全然大丈夫。

<ul id="menu">
	<li><a href="#">item 1</a></li>
	<li><a href="#">item 2</a></li>
	<li><a href="#">item 3</a></li>
	<li><a href="#">item 4</a></li>
</ul>

jsの初期値セットも忘れずに。どこでも良いけど、HEAD内にでも書いといてね。
#menuの部分は、上記のulタグ内のidだから、必要あらば適当に書き変えといてね。自分はもともとのHTMLのulにidを既にstyle用に振ってたからそいつをそのまま初期値としてセット。

<script>
	$(function(){
		$('#menu').slicknav();
	});
</script>

 

 

 

できあがりはこんな感じで、スマホで開くと画面の上部に開閉式のメニューが勝手に作られます。

元あったナビゲーションメニューバーの場所ではなく、なんとbodyタグ直後に自動でメニューが動的に作成されているのです!

もちろん元のナビゲーションメニューバーはdisplay:none;でスマホで開いたときは自動で非表示化されてます。
slicknavの実装イメージ

 

MENUをタップするとヌルッと開きます。実にスマホっぽいですね。

slicknavの実装イメージ(開いたとき)

メニューがulの入れ子になっていても全然大丈夫です。ちゃんと対応してくれてます。
ちなみに、メニューバーへ画像を使っている場合は、画像も持ってきてしまいます。自分はこれがカッコ悪かったので、元のhtmlに少し手を加えてPCとモバイルでCSSで表示を分岐させましたけど。

ね、簡単でしょ。
おかげさまで、15ページ程度のコーポレートサイトのレシポンシブ対応が1日かからず完了しました。

めでたし、めでたし。

え?このサイトは?ほっといて!それどころではないのよね。

スポンサーリンク

comments powered by Disqus