レスポンシブサイトを構築する際、意外と引っかかるのが「グローバルナビ」

ページの横幅（キャンバス）いっぱいに表示させることが多い関係上、キャンバス幅が一定でなくなるレスポンシブWebデザインでは一筋縄ではいきません。

慣れない内は考えるのが面倒で「スマホ専用のナビゲーションを別途用意」したり、「グローバルナビをまるごと非表示にしてしまう」ということをされた方の少なくないのではないかと思います。

今回は「レスポンシブWebデザインで使えるグローバルナビ」をまとめました。

１：【CSS】Table-cellで１行表示

「グローバルナビは絶対に１列固定。それ以外は認めない」という方向けの方法。
これを使うと間違いなく１列のグローバルナビが作れます。
原理は簡単で、１列だけのtableを作るというだけのことです。
CSSでtableにするため、マークアップとスタイルはこんな感じになります。

<nav class="globNav-row">
<a>HOME</a>
<a>メニュー１</a>
<a>メニュー２</a>
<a>メニュー３</a>
</nav>

.globNav-row{
 display: table;
 width: 100%;
}

.globNav-row > a{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

この方法の最大のメリットは「高さ揃え不要」というところです。

aタグがtdタグと同じ振る舞いをするため、これだけのコードで高さを揃えたグローバルナビが作ることができます。

２行の項目・１行の項目が混在する場合でも高さも文字位置も自動で調整されるので、非常に便利です。

一方デメリットは、「融通が効かないこと」です。

tableタグと同じ振る舞いになるため、tableでできないことはすべてNGになります。

改行禁止処理を入れたりすると、デバイス幅によってはレイアウト崩れが起きることもありますのでご注意ください。

おすすめシチュエーション：メニュー項目数が４つ以下の時

２：【Javascript+CSS】Toggleでスマートフォン対応

BootstrapやGumbyFrameworkなどのCSSフレームワークでよく採用されている方法です。

CSSとJavaScriptでスマートフォン幅ではトグルメニューに変化します。

マークアップは「トグルボタン」と「メニュー項目」の２要素に分割するタイプが主流です。

<nav class="globNav-row">
 <span class="globNav-toggle">MENU+</span>
 <ul class="globNav-inner">
  <li><a>HOME</a></li>
  <li><a>メニュー１</a></li>
  <li><a>メニュー２</a></li>
  <li><a>メニュー３</a></li>
 </ul>
</nav>

タブレット以上ではspanが非表示に、スマートフォンではulが非表示になるようにCSSが設定されています。

.globNav-toggle { display: none;}
.globNav-inner{ overflow: hidden;}
.globNav-inner > li { float: left;}

@media only screen and (max-width: 480px){
.globNav-toggle { display: block;}
.globNav-inner{ display: none}
.globNav-inner > li { float: none;}
}

@media only screen and (min-width: 481px){
.globNav-inner{ display: block!important;}
}

あとはJavascriptでspanをクリックした際にulの表示を切り替える構文を記述するだけです。

<script>
    $(function(){
        $(".globNav-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
</script>

こちらのメリットは「項目数を気にしなくても良い」ということにあるかなと思います。

画面幅が狭いスマートフォンではトグルメニュー化するため、項目数が多くとも見た目が変化することはあまりありません。

そしてデメリットは「スタイルの制約が多いこと」です。

スマートフォン表示とPC表示、どちらも同じソースを使用しているため、マークアップが複雑になるようなスタイルやスクリプトを組むことはお勧めできません。

どうしてもリッチなデザインを採用したい場合は、この次の方法を採用することをおすすめします。

おすすめシチュエーション：メニュー項目数が５つ以上の時

３：【WordPress+Javascript+CSS】「メニュー」で専用タグ作成

メニュー項目を管理画面で事前に作成し、PHPでスマートフォン・PCそれぞれにタグを出力させるというやり方になります。

WordPressなどのCMSを使用している人限定の実装方法ですね。

WordPressでは「wp_is_mobile();」を使用することでスマートフォン・PCでの出力タグを切り替えることができます。

ですのでスマートフォンでのみ表示させる場合は

<?php if ( wp_is_mobile() ) {
    スマートフォンで表示させるコンテンツ
} ?>

反対にスマートフォン以外で表示させる場合は

<?php if ( !wp_is_mobile() ) {
    スマートフォン【以外】で表示させるコンテンツ
} ?>

となります。

設置位置は一緒だけど、マークアップを変えたい場合は

<?php if ( wp_is_mobile() ) {
    スマートフォンで表示させるコンテンツ
} else {
    スマートフォン【以外】で表示させるコンテンツ
} ?>

で対応できます。

メリットは「デザインが自由自在」ということです。

そもそもタグ自体が別物になりますので、出力方法さえわかればだいたいのことは実装可能です。

タグの出し方だけを変えているので、メニュー項目は１・２同様一括管理できるのもメリットですね。

しかしその反面、「コーディング知識が必要」「PHPを組むのが面倒」というデメリットもあります。

WordPressなどのオープンソース系CMS共通のデメリットですが、「自由にできる分全部自分で設定する必要がある」ということですね。

おすすめシチュエーション：こういうことをしたい時

仕様をしっかり確認し、正しくお使いください

まとめます。

• メニュー項目が少ない＆１列表示・・・table-cell
• メニュー項目が多い＆手軽に対応・・・toggle
• スマートフォン・PCで大きく変えたい・・・wpismobile

それぞれの特性をしっかり理解し、状況に合わせて正しく使い分けることが大事です。

ご指摘ありがとうございます。