-
ID:HKdPsF さんの質問

レスポンシブでサイトを作るのですが、下記のような条件を満たせるメニュー(グローバルナビ)のコーディング方法(jQueryでも)があれば教えていただきたいです。
•PCではナビゲーションのボタンを画像で表示し、ドロップダウン表示する。
•スマホでは画面右上にボタンを表示し、ボタン押下でメニューを表示。各メニューのボタンでは画像を使わずテキストで表示する。多階層表示する。
•後にWordPress化する予定あり

色々調べてみたのですが、どれが良いのか判断しづらかったため、質問させていただきました。
よろしくお願いします。

みんなの回答 6 件

ID:TV9kbj さんの回答

PCとスマホでJS切り分ければいいから、グロナビのJSは何でもいいかなと。
WordPress化するならローカルサーバー立てて、ルートパスで作っておくと後々簡単でいいよ。

ID:oMaih3 さんの回答

ん? CSSで書き分けるだよね?

ID:7EgP.d さんの回答

wp_is_mobile()で条件分岐させてheader.phpを分けたらどうでしょう

ID:KzCgX8 さんの回答

PCのターゲットブラウザにもよるけど、ドロップダウンはCSSだけでも実装できるし、js使う使わないはお好みになると思う。

だから、CSSのMedia Queriesでも、jsでユーザーエージェント判定してCSSやjs出し分けどちらでもいいと思う。
最初からWPに組み込むならis_mobile()関数使えば簡単。

どれがいいかって話だけど、

  • ウィンドウサイズ変われば、どんな環境でも可変する
     ⇒Media Queries
  • デバイスによって可変ありなし切り分ける(PC環境下はスマホ用のレイアウト表示させないとか)
     ⇒ ユーザーエージェント判定してcssやjs読み込み出し分け or WPのis_mobile()関数

って感じじゃないの?

デバイス毎にCSSやjs切り替えたいのなら、ユーザーエージェントの判定必要だけど、cssだけでも実装は十分可能だよ。

ID:COuUyk さんの回答

つか、WordPressに最初から入ってるTwentyFourteenテーマがそんな感じ。
メニューの画像化はしてないけど、レスポンシブでリンクとボタン切り替えを使い分けてる。

ID:Fu/aIK さんの回答

FlexNavは?CSSを多少改変すれば、その条件を満たせるよ

最終更新日:2014-11-13 (3,763 views)

関連するトピックス

ページ上部に戻る