on:2011年7月20日sponsorsビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。Screensデモページ[ad#ad-2]デモではブラウザのサイズを変更することで、確認できます。デモページ:通常時の表示ブラウザのサイズを小さくすると、ナビゲーションが自動的にプルダウンに変更されます。以下は各ポイントを意訳したものです。実装これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。1まずは、nav要素内にul要素とselect要素の2つを記述します。※最終形は、異なります。</select></nav>CSS:MediaQueries通常時はselect要素は非表示にし、960pxより小さい場合はul要素を非表示、select要素を表示にします。}}[ad#ad-2]しかし、二つのHTMLを用意することは、メンテナンスの面で非常に手間となります。そこで、jQueryを使用して、二つの要素をダイナミックに変更します。select");});それから、ドロップダウンを機能させるJavaScriptも忘れずに。$(this).find("option:selected").val();});スクリプトを使用することで、最終的なHTMLはシンプルになります。