Nov 10, 2013

【WordPress】jQueryスライドメニューを実装した際にハマったこと

ずっと先延ばしにしてたんですが、ようやくスマホ対応しました。スライドメニューの導入にあたって参考にしたのはこちら。

JavaScript – Googleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ]

ページ下部のリンクからgithubに飛び、その右端にある「Download ZIP」からjs本体とサンプルhtml/cssを入手できます。

  • slidemenu_01
  • slidemenu_02


プレビューにはGoogle Web Developer Toolsがおすすめ

設置の仕方や手順は一般に配布されている他のjQueryプラグインと大差ないので、サンプルそのまま真似すれば難しくないと思います。

プレビューは手持ちのスマホからになりますが、どうしてもPCのブラウザで確認したい場合はタッチアクションに対応したエミュレータ（そんあのあるのか？）が必要です。とりあえず私は普段から使っているGoogle Web Developer Toolsをおすすめします。もちろんChromeでしか使えませんが、ベンダープレフィックスの問題でFireBugよりも有効です。

スマホやタブレットでの表示確認はGoogle Web Developer Toolsで

設置して初めて気付く、ありがちな問題点

  • スクロールバーが二重になった
    • サンプルから該当部分のHTMLとCSSだけをコピペしたので、ネスト構造の関係で縦スクロールバーが二重に表示されてしまいました。これはbodyの高さをautoに指定したら直りました。

  • 他のプラグインが動かなくなった
    • スライドはちゃんと動く代わりに、サイドバーの要素をスクロール中も固定するscrollFixが動かなくなりました。実行順を入れ替えることであっさり解決したんですが、ちょっとググったらまるっきり同じところで躓いた方が原因を究明しておられました。
    jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。 | iPhone・Macの情報発信ブログ~Number333~

  • カテゴリを自動で反映させられない
    • テンプレートタグとかいろいろ試したんですが上手くいかず、結局手動で各カテゴリのURLをリンク貼りました。これはかなり不便なのでもっと調べたいと思います。

そして反省

こういう機能をサイトが出来た後に追加するとややっこしいトラブルに発展しがちです。しかも元々はスマホベースで作ったレスポンシブ・フレームにも関わらず、なぜか作業の順序が逆になったため四苦八苦；；　なんとかならないことはないんですが、本当にサイトは基礎設計、大げさに言えばグランドデザインが大事だなと痛感しました。

制作期間の8割を設計に充てても多すぎはしない

いつも僕自身がクライアントさんに言ってることなんですけどね…。


サイト内検索

  • Author

  • Twitter

      Follow @jay0926 ( followers)

    1. Facebook