グローバルナビゲーションを2行にカスタムする方法

更新
2012年06月15日(金)

グローバルナビゲーションを2行にカスタムする方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 1行のグローバルナビゲーションを2つ設置し、2行にカスタムする方法です。

  2. 1行につき各テンプレートのデフォルト数まで1段目を設置できます。2行にすると1行目のデフォルト数と2行目のデフォルト数の合計で、デフォルト数の2倍を設置できます。たとえば、customtemplate (ver1.1.0)なら7つがデフォルトなので2行にすることで14こまで設置できます。

  3. このページでは、最初からあるグローバルナビゲーションの上部にもう一つ設置する方法を述べます。新しく設置する方は、1段目が3つで、2段目が展開しないシンプルなものとします。4つ以上に増やす場合や2段目が展開されるようにするには、次のページが参考になります。

メリットとデメリット

メリット

  1. スクロールしなくてもいい位置にリンク先を複数設置でき読者に親切かもしれません。

  2. 1行目はホバーしても展開しないシンプルなものにすると次のデメリットを最も簡単に防げます。

デメリット

  1. 1行目の1段目をホバーし1行目の2段目を展開すると、2行目のナビゲーションに被ってしまいます。この状態で2行目のナビゲーションにカーソルを合わせようとすると、カーソル捌きが若干必要です。つまり、ユーザビリティがあまりよくないということです。こんな感じです。

  2. 対抗策としましては、1行目の2段目の展開位置をずらせば、2行目ナビゲーションへの被せ具合がましになります。

テンプレートのHTMLを編集

  1. テンプレートのHTML内で次のコードを見つけます。下図で反転している部分です。

    
    <ul class="round" id="nav">
    
    customtemplate-110-multiple-global-navigations-1.png
  2. 上記コードを次のコードに置き換えます。下図で反転している部分が置き換えた後のコードです。

    
    <!-- ▼▼1行目 開始 -->
    <ul class="nav round" id="nav2">
    <!-- ▼左端(左側が角丸です) 開始 -->
    <li class="round-l"><a href="/">左端</a></li>
    <!-- ▲左端 終了 -->
    <!-- ▼左から2番目 開始 -->
    <li><a href="/">左から2</a></li>
    <!-- ▲左から2番目 終了 -->
    <!-- ▼右端(右側が角丸です) 開始 -->
    <li class="round-r"><a href="/">右端</a></li>
    <!-- ▲右端 終了 -->
    </ul><!-- /#nav2 -->
    <!-- ▲▲1行目 終了 -->
    
    <!-- ▼▼2行目(元からあったグローバルナビゲーション) 開始 -->
    <ul class="nav round" id="nav">
    
    customtemplate-110-multiple-global-navigations-2.png
  3. この段階でプレビューすると下図のようになっています。ナビゲーションが増えました。現段階では装飾が甘いです。CSSで調整しますのでご安心下さい。

    customtemplate-110-multiple-global-navigations-3.png
  4. HTML内の下図で赤丸で4箇所示した #nav(先頭がシャープ)を .nav(先頭がドット) に変更します。これにより、増設した方のナビゲーション内でも、現在ページへのリンクの背景色変化が機能するようになります。

    customtemplate-110-multiple-global-navigations-8.png
  5. 変更しました。

    customtemplate-110-multiple-global-navigations-9.png

テンプレートのCSSを編集

  1. CSSコード内のすべての#nav(先頭がシャープ)を .nav(先頭がドット)に変更します。一つ一つ探しだして変更していると大変です。メモ帳などのテキストエディタにCSSコードをコピペし、一括置換をします。

    customtemplate-110-multiple-global-navigations-4.png
  2. 下図のとおりに入力し すべて置換(A) をクリックします。

    customtemplate-110-multiple-global-navigations-5.png
  3. 置き換えしなくてもいい#nav-wrapper.nav-wrapperになっています。それを元に戻します。下図のとおりに入力し すべて置換(A) をクリックします。

    customtemplate-110-multiple-global-navigations-6.png
  4. 置換後にテンプレートのCSSにコピペします。この段階でプレビューするとデモその1のようになります。CSSを調整して次の2点を改善します。

    • グローバルナビゲーションの1行目と2行目が密着しています。
    • 2行目の右端が角丸になっていません。
  5. テンプレートのCSS内で次のコードを見つけます。

    
    #nav-wrapper{min-height:24px;}
    
    customtemplate-110-multiple-global-navigations-7.png
  6. 上記コードを次のコードに置き換えます。下図で反転している部分が置き換えた後のコードです。

    
    #nav-wrapper{min-height:49px;}
    #nav2{padding-bottom:1px;}
    
    customtemplate-110-multiple-global-navigations-10.png
  7. 次のとおり改善されました。デモその2

    • グローバルナビゲーションの1行目と2行目の間に1pxの隙間を挿入しました。
    • 2行目の右端が角丸になりました。

その他

  1. このページではできるだけ工程を少なくし、簡単に2行にできるように解説しました。その結果、グローバルナビゲーションの1行目の id が nav2 で、2行目の id が nav となっています。直感的に分かりやすいのは、1行目が nav ・2行目が nav2 だと思います。コピペの回数がより少なくて済むように上述のようにしました。ご了承願います。

  2. お気づきの点がありましたらご指摘いただけますと幸いです。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)