グローバルナビゲーションに各カテゴリーを設定するサンプルコード

グローバルナビゲーションの各項目にカテゴリーを設定するサンプルコードです。当サイト作者が作成したテンプレートである valid-seo-3c のver1.0.0についてです。

追記:グローバルナビゲーションで展開される項目をカスタムする方法の方がカスタマイズ性が良いと思います。

サンプルのHTMLコード

  1. valid-seo-c3 のHTML部分の<!-- ▼▼▼ ページ上部のナビゲーション 開始 ▼▼▼ -->から<!-- ▲▲▲ ページ上部のナビゲーション 終了 ▲▲▲ -->までを次のコードに入れ替えると、ナビゲーションの1段目がカテゴリー0~7へのリンクになります。

    
    
    <!-- ▼▼▼ ページ上部のナビゲーション 開始 ▼▼▼ -->
    <div id="nav-wrapper">
    <ul class="round" id="nav">
    
    <!-- ▼左端(左側が角丸です) 開始 -->
    <li class="round-l"><a href="<%url>blog-category-0.html" class="category-0 round-l">cate0</a></li>
    <!-- ▲左端 終了 -->
    
    <!-- ▼左から2番目 開始 -->
    <li>
    <a href="<%url>blog-category-1.html" class="category-1">cate1 <span class="small">&#9660;</span></a>
    <!--
    ※ マウスオーバーで2段目まで展開されるサンプルです
    ※ 3行上にある「&#9660;」は、下向き黒ぬり三角(▼)を表示するための「文字実体参照」です。
    ※ マウスオーバーで下に何かでるかも、という暗黙的な目印です。
    ※ 同様に、後ででてくる「&#9658;」は右向き黒ぬり三角です。
    -->
    <!-- 2段目開始 -->
    <ul>
    <li><a href="/">2-1(2段目)</a>
    </li>
    <li><a href="/">2-2</a>
    </li>
    <li><a href="/">2-3</a>
    </li>
    </ul><!-- 2段目終了 -->
    </li>
    <!-- ▲左から2番目 終了 -->
    
    <!-- ▼左から3番目 開始 -->
    <li>
    <a href="<%url>blog-category-2.html" class="category-2">cate2 <span class="small">&#9660;</span></a>
    <!-- 2段目開始 -->
    <ul>
    <li><a href="/">3-1(月)</a>
    </li>
    <li><a href="/">3-2(火)</a>
    </li>
    <li><a href="/">3-3(水)</a>
    </li>
    <li><a href="/">3-4(木)</a>
    </li>
    <li><a href="/">3-5(金)</a>
    </li>
    <li><a href="/">3-6(正)</a>
    </li>
    <li><a href="/">3-7(日)</a>
    </li>
    </ul><!-- 2段目終了 -->
    </li>
    <!-- ▲左から3番目 終了 -->
    
    <!-- ▼左から4番目 開始 -->
    <!--
    ※ マウスオーバーで3段目まで展開されるサンプルです
    ※ 上2つのサンプルのように、サンプルの文章として数字とハイフンを入れても良かったのですが、
    ※ 2段目と3段目の関係が分かりやすそうな文章を入れてみました。
    -->
    <li><a href="<%url>blog-category-3.html" class="category-3">cate3 <span class="small">&#9660;</span></a>
    <!-- 2段目開始 -->
    <ul>
    <li><a href="/">デブだけど運動したい <span>&#9658;</span></a>
    <!-- 3段目A開始 -->
    <ul>
    <li><a href="/">唐揚げ食いながら</a>
    </li>
    <li><a href="/">できるスポーツ</a>
    </li>
    <li><a href="/">教えてくれ</a>
    </li>
    </ul><!-- 3段目A終了 -->
    </li>
    <li><a href="/">あれほどワクワクする事はない <span>&#9658;</span></a>
    <!-- 3段目B開始 -->
    <ul>
    <li><a href="/">九九の9の段の</a>
    </li>
    <li><a href="/">「今まで倒してきたボスが復活して襲いかかってきた」感</a>
    </li>
    </ul><!-- 3段目B終了 -->
    </li>
    <li><a href="/">魚肉ソーセージのように <span>&#9658;</span></a>
    <!-- 3段目C開始 -->
    <ul>
    <li><a href="/">ぷりぷり怒る</a>
    </li>
    </ul><!-- 3段目C終了 -->
    </li>
    <li><a href="/">マックにヤクザが来たんだよ <span>&#9658;</span></a>
    <!-- 3段目D開始 -->
    <ul>
    <li><a href="/">レジ打ちするとき、会計が893円でおもいっきし笑っちった。</a>
    </li>
    <li><a href="/">そのヤクザはメチャクチャ俺のこと睨みながら1,003円出したんだけど、</a>
    </li>
    <li><a href="/">そしたらお釣りが110円でさらに爆笑</a>
    </li>
    </ul><!-- 3段目D終了 -->
    </li>
    </ul><!-- 2段目終了 -->
    </li>
    <!-- ▲左から4番目 終了 -->
    
    <!-- ▼左から5番目(1段目のみ) 開始 -->
    <li><a href="<%url>blog-category-4.html" class="category-4">cate4</a></li>
    <!-- ▲左から5番目 終了 -->
    
    <!-- ▼左から6番目(1段目のみ) 開始 -->
    <li><a href="<%url>blog-category-5.html" class="category-5">cate5</a></li>
    <!-- ▲左から6番目 終了 -->
    
    <!-- ▼左から7番目(1段目のみ) 開始 -->
    <li><a href="<%url>blog-category-6.html" class="category-6">cate6</a></li>
    <!-- ▲左から7番目 終了 -->
    
    <!--
    ※ 5番目や6番目など、そんなにリンクが必要ない場合はコメントごと削除可能です。
    ※ 逆に、7番目・8番目とコピペで増やせますが、
    ※ IE8以下で表示が崩れやすいので、非推奨です。
    ※ それでも増やす場合は、ナビゲーションが1行で収まるように
    ※ 「#nav li」のwidthを調整してみてください。
    ※
    ※ また、1段目が2行にならないように、次のような調整をしてください。
    ※ 文字数を少なくする、widthを広げる、もしくは文字を小さくする。
    ※
    ※ なお、ブラウザがIE8以下だと角丸が表示されません(CSS3非対応だからです)。
    -->
    
    <!-- ▼右端(右側が角丸です) 開始 -->
    <li class="round-r"><a href="<%url>blog-category-7.html" class="category-7 round-r">cate7</a></li>
    <!-- ▲右端 終了 -->
    
    </ul><!-- /#nav -->
    </div><!-- /#nav-wrapper -->
    <!-- ▲▲▲ ページ上部のナビゲーション 終了 ▲▲▲ -->
    
    
    valid-seo-100-global-nav.png
関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)