はてなブログテーマ「Innocent」はナビゲーションバーを内蔵しています。面倒なCSSを記述することなく、簡単にナビゲーションバーを表示できます。
設置の手順
jQuery をフッターに記述する
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
$(".menu-toggle").on("click", function() {
$(".main-navigation").toggleClass("toggled");
});
})(jQuery);
</script>
スマートフォン・タブレット閲覧時のメニュー展開ボタンを動作させるために必要なコードになります。フッター上のカスタマイズエリアに貼り付けて下さい。jQuery 本体は既に読み込んでいる場合は不要です。
HTML をヘッダーに記述する
<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">プロフィール</a></li>
<li><a href="#">アーカイブ</a></li>
<li>
<a href="#" class="has-child">カテゴリー</a>
<ul>
<li><a href="#">子カテゴリ1</a></li>
<li><a href="#">子カテゴリ2</a></li>
</ul>
</li>
<li><a href="#">リンク</a></li>
</ul>
</div>
</nav>
次に、上記の HTML をヘッダー下のカスタマイズエリアに貼り付けます。メニューのリンクとなる <a> 直下に <ul> タグを記述すると、最大で4階層（曾孫）までのサブメニューが表示できます。
<a> に .has-child を指定すると、1階層目では下向きの矢印が、2階層目以降では右向きの矢印が表示されます。指定しなくてもサブメニューは表示されますが、指定したほうが「このメニューにはサブメニューがある」と理解しやすいでしょう。
デザイン
スマートフォン・タブレット
スマートフォン・タブレットでは、「メニュー」ボタンをタップすると開く展開式メニューになります。
PC
PC（幅1024px～）では横並びのナビゲーションバーになります。
カスタマイズ
色の変更
.main-navigation,
.main-navigation ul ul {
background-color: #66cdaa;
}
.main-navigation と .main-navigation ul ul に背景色を指定するとナビゲーションバーの色が変わります。
中央寄せにする
@media screen and (min-width: 1024px) {
.main-navigation {
text-align: center;
}
}
.main-navigation に text-align: center を指定すると、ナビゲーションバーがセンタリングされます。
