[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック

ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。

Convert a Menu to a Dropdown for Small Screens
デモページ

[ad#ad-2]

デモではブラウザのサイズを変更することで、確認できます。

デモページ：通常時の表示

ブラウザのサイズを小さくすると、ナビゲーションが自動的にプルダウンに変更されます。

デモページ：スクリーンサイズが960pxより小さい時の表示

以下は各ポイントを意訳したものです。

実装

これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。

HTML：Step 1

まずは、nav要素内にul要素とselect要素の2つを記述します。
※最終形は、異なります。

<nav>
  <ul>
    <li><a href="/" class="active">Home</a></li>
    <li><a href="/collections/all">Books</a></li>
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
    <li><a href="/pages/about-us">About Us</a></li>
    <li><a href="/pages/support">Support</a></li>
  </ul> 

  <select>
    <option value="" selected="selected">Select</option> 

    <option value="/">Home</option>
    <option value="/collections/all">Books</option>
    <option value="/blogs/five-simple-steps-blog">Blog</option>
    <option value="/pages/about-us">About Us</option>
    <option value="/pages/support">Support</option>
  </select>
</nav>

CSS：MediaQueries

通常時はselect要素は非表示にし、960pxより小さい場合はul要素を非表示、select要素を表示にします。

nav select {
	display: none;
}

@media (max-width: 960px) {
	nav ul     { display: none; }
	nav select { display: inline-block; }
}

[ad#ad-2]

しかし、二つのHTMLを用意することは、メンテナンスの面で非常に手間となります。
そこで、jQueryを使用して、二つの要素をダイナミックに変更します。

JavaScript：ナビゲーションの要素の変更

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

それから、ドロップダウンを機能させるJavaScriptも忘れずに。

JavaScript：ドロップダウン用

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

スクリプトを使用することで、最終的なHTMLはシンプルになります。

HTML：最終版

<nav>
	<ul>
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#books">Books</a></li>
		<li><a href="#blog">Blog</a></li>
		<li><a href="#about">About Us</a></li>
		<li><a href="#support">Support</a></li>
	</ul>
</nav>