スマホだけメニューが開く設定にしたい

Dreamweaverを使っています。

レスポンシブルか、可変グリッドを使ってスマホサイトを作りたいのですが、
スマホとPCで初期状態を少し変えたいので　方法はないでしょうか

レスポンシブルではCSSは切り替えできても、HTMLは自動で切り替わらないので悩んでいます。

１．URLをスマホで別にせず同一にする

２．JQuery等を使って アコーデオン　メニューを作る
　　クリックしたら下にビョ～ンと広がるメニューです。
３．PCは初期状態でアコーデオンメニューは全部開いた状態
　　スマホはメニューは閉じた状態で　ファーストビューを始めたい

JQueryを使わなくても良いのですが、メニューを折りたたみ、スマホとで状態を自動で変えたいのが希望です。
良い方法がありましたらお願いします。

No.2 ベストアンサー 回答者： shockatz 回答日時： 2015/03/19 14:16

MediaQueryのスクリーン幅はjavascriptで簡単に取得できますから、容易にコントロールできますよ。

http://qiita.com/blogger323/items/ba66326badc172 …

仮にクラス名を付加しておき、jQueryで別の位置に定義したDOMの内容をゴッソリ移すとかすればスッキリすると思います。

この回答へのお礼

ありがとうございます。
jQueryでHTML、CSSの書き換えなどもできるようですね。
これがやりたかったことです。
難しそうですが調べてみます。

お礼日時：2015/03/21 11:55

No.1 回答者： ORUKA1951 回答日時： 2015/03/18 18:10

HTMLは一切変更しないでプレゼンテーションはスタイルシートですよ。

ちょっと長い引用ですがウェブサイトを作るときは絶対に知っておかなければならない重要なこと

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
2.4.1 構造とプレゼンテーションの分離
　HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

>レスポンシブルか、可変グリッドを使ってスマホサイトを作りたいのですが、
　何れかではありません。
　リキッドでデザインして、必要ならレスポンシブでデザインを変更するのですよ。
1) リキッドが適用され、
2) ウィンドウ幅が640px(例)以下になるとデザインが変わる。
　スタイルシートを別途上書きする。

>３．PCは初期状態でアコーデオンメニューは全部開いた状態
　　スマホはメニューは閉じた状態で　ファーストビューを始めたい
単純に、mediaqueryでmax-width:640px にて、dispaly:blockを一行追記するだけですけど・・・

この回答へのお礼

ありがとうございます。
＞絶対に知っておかなければならない重要なこと
CSSとHTMLは分離して、管理すべきということなのか・・
重要な点がどこかわかりかねるのですが、参考にさせていただきます。

＞単純に、mediaqueryでmax-width:640px にて、dispaly:blockを一行追記するだけですけど・・・
Jqueryのアコーデオンを作って試してみました。
css　の　dispaly:block　を変更することで開くことができました。

もう少し細かい処理を考えるときには
JQueryでスマホページだけHTMLなどを一部を変更することも、可能になりそうかと思いました。
そういった方法もできそうかまた検討してみます

お礼日時：2015/03/18 20:58