この記事はこんな悩みを解決します！
- Blogger ブログで上部にメニュー（ ナビゲーションバー ）を設置したい
- QooQ みたいなナビゲーションバーが欲しい
こんにちは HARU（ @HARU ）です。
今回は Blogger ブログの上部に設置できるメニュー（ ナビゲーションバー ）を作ってみました。
メニューの設置場所はトップなのか、サイドなのか、個人の趣味によって変わると思うので、こっちも作ってみようと思った次第であります。
サイドバーメニューが設置したい方はこちら
今回のナビゲーションバーは過去に作成した、サイドバーに設置できるメニューを流用して作ってあります。
なので、アコーディオンメニュー（ 階層メニュー ）も使えます。
私はテンプレート QooQ リスペクトなので、QooQ に実装されているナビゲーションバーに近い形で作成してみました。
違うテンプレートを使っている方にはもちろん、現在 QooQ を使っている方は、同じようなデザインですが、階層メニューも使えるのでオススメです。
ただし、QooQ のナビゲーションバーとは違い HTML の知識が多少ないとメンテナンスは難しいかもしれませんのでご注意を！
注意
テンプレートの編集（ ソースコード改変 ）するときは、必ずバックアップを取ってから編集しましょう。
不安な方は以下の関連記事を参照してください。
実装イメージ
PC 画面サイズで表示される場合
ブログ上部にナビゲーションバーが表示されます。
階層メニューにも対応です。
スマホ画面サイズで表示される場合
右上にメニューボタンが常時表示され、タップすることでメニューが開きます。
もちろんブログ内検索も実装
QooQ 標準のナビゲーションバーのカスタマイズをしたときにも実装した、ブログ内検索も実装しました。これがあるのと無いのでは、使い勝手が違いますからね。
サイドバーメニューとの考え方の違い
ナビゲーションバー（ トップに設置するメニュー ）は、各項目のクリック範囲が小さくなることが想定されます。
クリック範囲確保のため、階層メニューがある親要素にはリンクを貼らないように調整しました。
ナビゲーションバーの実装
実際にナビゲーションバーを実装してみましょう。
注意
サイドバーメニューを実装している方は、サイドバーメニューの CSS および HTML（ サイドバーのひな型 ）をバックアップ、削除してから実装してください。
ID 名、クラス名が被っている箇所があります。
JQuery の導入
JQuery を導入していない場合、以下の script を <head> の直下に記述します。
<!-- JQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
Font Awesome の導入
Font Awesome を導入していない場合、以下のコードを <head> の直下に記述します。
<!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
ナビゲーションバー 基本 CSS
以下の CSS を Blogger テンプレートの CSS 欄に記述します。
QooQ のテンプレートであればナビゲーション欄の近くに記述すると、メンテナンス性もいいと思います。
/* ナビゲーションバーメニュー */
/* 全体設定 */
#top-navi{
background-color: #696969;
padding:0 10px;
opacity: .9;
position: sticky;
top: 0;
z-index: 999;
}
#menu-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
#menu-wrapper {
display: none;
}
/* メニュー内容 */
#menu-container ul.menu-list {
font-size: 0;/* 横方向隙間を埋める */
}
#menu-container ul {
list-style: none;
overflow: hidden;
}
#menu-container li {
text-decoration: none;
text-align: center;
padding: 0 !important;
transition: all 0.3s ease;
display: inline-block;/* リスト横並び */
width: 16%;/* リストサイズ */
font-size: 16px;
}
#menu-container li:hover {
background-color: #808080;
}
#menu-container li a {
padding: 10px;
display: block;
transition: all 0.3s ease;
color: #fff;
}
#menu-container li a:hover {
color: #ffffff;
}
#menu-container .menu-link{
color: #fff;
display: block;
padding:10px;
}
.menu-link:after {
font-family: FontAwesome;
content: '\f107';
position: absolute;
right: 10px;
}
#menu-container li .menu-link:hover {
color: #ffffff;
}
.accordion-toggle, .accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
background-color: #696969;
}
#menu-container .accordion-content li{
width:100%;
}
/* 個別メニュー調整 */
#menu-container ul.menu-submenu1 {
position: absolute;
left: 16%; /* 表示位置調整 */
width: 25%;
}
#menu-container ul.menu-submenu2 {
position: absolute;
left: 32%; /* 表示位置調整 */
width: 25%;
}
#menu-container ul.menu-submenu3 {
position: absolute;
left: 48%; /* 表示位置調整 */
width: 25%;
}
#menu-container ul.menu-submenu4 {
position: absolute;
left: 64%; /* 表示位置調整 */
width: 25%;
}
/* open時ボタン+トグル色 */
.accordion-toggle.active-tab {
background: #808080;
transition: all 0.3s ease;
}
.menu-link.active{
color: #fff !important;
transition: all 0.3s ease;
}
/* ブログ内検索 */
#menu-container li.serach{
position: absolute;
right: 0;
top: 10px;
}
#search-box-form {
background: #fff;
position: relative;
}
#search-box-form::placeholder {
color: #aaa;
}
#search-box-text {
border: none;
outline: none;
width: 100%;
}
#search-box-submit {
color: #888;
font-size: 1em;
background: transparent;
position: absolute;
top:0;
right: 0;
border: none;
outline: 0;
}
#search-box-submit:hover {
cursor: pointer;
}
ナビゲーションバーのひな型実装
ナビゲーションバーを実装したい場所に、ナビゲーションバーのひな型を記述します。
基本的にはブログタイトルから見て上側か下側に設置します。
今回はテンプレート QooQ を例にし、QooQ 標準で実装されているナビゲーションバーの代わりに設置する解説をしていきます。
（１）以下のコードを検索します
（※）以下のコードは QooQ のナビゲーションバーです。
<div id='navigation'>QooQ 以外の場合は、ブログタイトルが header に記載されているので、それの上か下が実装位置になります。
（２）先ほど検索した <div id='navigation'> の直上に以下のコードを記述します
<!-- ナビゲーションバー -->
<div id='top-navi'>
<div id='menu-container'>
<div id='menu-wrapper'>
<div id='hamburger-menu'/>
<i class="fa fa-bars fa-2x"></i>
<span>Menu</span>
</div>
<ul class='menu-list accordion'>
<!-- submenuなし-->
<li><a href=''>Menu1</a></li>
<!-- submenuあり-->
<li class='toggle accordion-toggle'>
<span class='menu-link'>Menu2</span>
</li>
<ul class='menu-submenu1 accordion-content'>
<li><a href=''>Submenu1</a></li>
<li><a href=''>Submenu2</a></li>
<li><a href=''>Submenu3</a></li>
</ul>
<!-- submenuあり-->
<li class='toggle accordion-toggle'>
<span class='menu-link'>Menu3</span>
</li>
<ul class='menu-submenu2 accordion-content'>
<li><a href=''>Submenu1</a></li>
<li><a href=''>Submenu2</a></li>
</ul>
<!-- submenuあり-->
<li class='toggle accordion-toggle'>
<span class='menu-link'>Menu4</span>
</li>
<ul class='menu-submenu3 accordion-content'>
<li><a href=''>Submenu1</a></li>
<li><a href=''>Submenu2</a></li>
<li><a href=''>Submenu3</a></li>
<li><a href=''>Submenu4</a></li>
</ul>
<!-- submenuあり-->
<li class='toggle accordion-toggle'>
<span class='menu-link'>Menu5</span>
</li>
<ul class='menu-submenu4 accordion-content'>
<li><a href=''>Submenu1</a></li>
<li><a href=''>Submenu2</a></li>
<li><a href=''>Submenu3</a></li>
<li><a href=''>Submenu4</a></li>
</ul>
<!--検索ボックス-->
<li class='serach'>
<form action='/search' id='search-box-form' method='get'>
<input data-placeholder-end='' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' id='search-box-text' name='q' placeholder='ブログ内検索' type='text'/>
<button id='search-box-submit' title='検索' type='submit'><i class='fa fa-search'/></button>
</form>
</li>
</ul>
<div class='menu-back'/>
</div>
</div>
Script 追記
以下の Script を </body> の直上に記述します。
以下の Script はサイドバーを実装したときと同じものになります。
<!-- ナビゲーションバー -->
<script>
$(function() {
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({right: activeState ? "0%" : "-100%"}, 400);
}
$("#menu-wrapper,.menu-back").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list,.menu-back").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
}); // jQuery load
</script>
スマホ表示時のカスタマイズ
スマホで表示するためのカスタマイズをしましょう。
スマホ表示用 CSS 追記
以下の CSS を 先ほど追加した ナビゲーションバー 基本 CSS の下に記述します。
@media の値は任意の数値に変更してください。
@media screen and (max-width: 990px) {
#top-navi{
opacity: 1;
}
/* メニューアイコン */
#menu-wrapper {
width: 50px;
height: 50px;
background: #696969;
color:#fff;
opacity: 0.9;
text-align: center;
z-index: 999;
position: fixed;
right: 0;
top: 0;
cursor: pointer;
display: block;
}
#hamburger-menu {
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
/* メニューリスト */
#menu-container .menu-list {
padding-left: 0;
display: block;
position: fixed;
top:50px;
width: 100%;
max-width: 450px;
background: #ffffff;
box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
right: -100%;
}
#menu-container li {
display: block; /* リスト縦並び */
width: 100%; /* リストサイズ */
font-size: 16px;
border-top: 1px solid #dbdcd2;
}
#menu-container li a {
color:#000;
}
#menu-container li a,#menu-container .menu-link,#search-box-form {
padding: 15px;
}
.accordion-content {
background-color: #fff;
}
#menu-container ul.menu-submenu1 {
position: static;
width:100%;
}
#menu-container ul.menu-submenu2 {
position: static;
width:100%;
}
#menu-container ul.menu-submenu3 {
position: static;
width:100%;
}
#menu-container ul.menu-submenu4 {
position: static;
width:100%;
}
#menu-container .accordion-content li {
width:50%;
float:left;
border: none;
}
#menu-container .menu-link{
color:#000;
}
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list, li.serach {
border-top: 1px solid #dbdcd2;
}
/* 背景を黒くする */
#menu-container .menu-back.active{
background-color: #000000;
opacity: .7;
z-index: 998;
height: 100%;
width: 100%;
position: fixed;
transition: all 1s ease;
top: 0;
left: 0;
}
#menu-container li.serach{
position: static;
}
#search-box-submit{
position: static;
}
#search-box-text{
width:90%;
}
}
メニューの編集
ul タグや li タグを追加していくことで、メニューの編集を行うことができます。
階層メニューを必要としないの場合
<!-- submenuなし-->
<li><a href=''>Menu1</a></li>
階層メニューが必要な場合
サイドバーメニューと違い、コードを記述するだけではメニューのデザインが崩れてしまいます。
理由としては PC 表示にて階層メニューを、親要素から見て下側に表示するためです。
その調整方法の例を以下に示します。
階層メニューなし×２、階層メニューあり×１の場合
ナビゲーションバー
左から見て階層メニューなし×２、階層メニューあり×１の場合、以下のようになります。
注意しなければいけない点はmenu-submenu のクラス名についてです。
階層メニューは追加するたびに、クラス名を１、２、３と増やし区別する必要があります。
この例の場合、階層メニューが１つなので menu-submenu1 のみです。
<!-- ナビゲーションバー -->
<div id='top-navi'>
<div id='menu-container'>
<div id='menu-wrapper'>
<div id='hamburger-menu'/>
<i class="fa fa-bars fa-2x"></i>
<span>Menu</span>
</div>
<ul class='menu-list accordion'>
<!-- submenuなし-->
<li><a href=''>Menu1</a></li>
<!-- submenuなし-->
<li><a href=''>Menu2</a></li>
<!-- submenuあり-->
<li class='toggle accordion-toggle'>
<span class='menu-link'>Menu3</span>
</li>
<ul class='menu-submenu1 accordion-content'>
<li><a href=''>Submenu1</a></li>
<li><a href=''>Submenu2</a></li>
<li><a href=''>Submenu3</a></li>
</ul>
<!--検索ボックス-->
<li class='serach'>
<form action='/search' id='search-box-form' method='get'>
<input data-placeholder-end='' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' id='search-box-text' name='q' placeholder='ブログ内検索' type='text'/>
<button id='search-box-submit' title='検索' type='submit'><i class='fa fa-search'/></button>
</form>
</li>
</ul>
<div class='menu-back'/>
</div>
</div>
基本 CSS 変更
ひな型を変更した場合、前述した通り、階層メニューの表示位置を調整する必要があります。
/* 個別メニュー調整 */
#menu-container ul.menu-submenu1 {
position: absolute;
/* リストの width:16% のため、左に２つリストがあったら 16% × 2 の位置に変更 */
left: 32%; /* 表示位置調整 */
width: 25%;
}
テンプレート QooQ を使っている場合
標準で実装されているナビゲーションバーは、コードごと削除してしまえば簡単に消せます。
しかし、今後復旧したいことがあるかもしれませんので、コードは削除せず、CSS で非表示にさせておくことをオススメします。
#navigation {
display: none;
}
まとめ
レスポンシブ対応のナビゲーションバーって意味で言えば、いいのができたのではないでしょうか？
これはこのままうちにも実装予定です。
HTML の知識が少ないとメニューの調整に時間が掛かると思います。
もしわからない点がありましたらコメントください。できる範囲でサポートします！
こんにちは、とても役立つコードを示していただき、ありがとうございます。
返信削除階層メニューなし×２、階層メニューあり×１のタイプを検索BOXの左どなりから、右寄せにしようと思い、
#menu-container ul {
list-style: none;
overflow: hidden;
display: flex;
justify-content: flex-end;
margin-right:20%;
}
#menu-container ul.menu-submenu1 {
position: absolute;
/* リストの width:16% のため、左に２つリストがあったら 16% × 2 の位置に変更 */
left: 64%; /* 表示位置調整 */
width: 25%;
}
としてみました。
メインメニューは20%マージン位置からの右寄せができたのですが、サブメニューのレイアウトが崩れてしまいうまくいきません。
left: 64%; とwidth: 25%;の比率を動かしてみましたが、うまくいきません。
右寄せで並べる方法をお教え願えませんか。
返信が遅れてしまい申し訳ございません！！！
削除もう読まれないかもしれませんが、お返事させていただきます。
右寄せのCSSを作ってみますので、お時間頂ければ幸いです。