趣味を楽しむDIYな暮らし

手作りのくふうを活かした日常生活ブログ

レスポンシブ対応のグローバルナビゲーションをドロップダウン表示する方法!はてなブログ

2021年1月16日更新

https://cdn-ak.f.st-hatena.com/images/fotolife/s/sikinomori117/20201129/20201129075721.png

 

こんにちは いつもご訪問下さいましてありがとうございます。

 

当ブログではテーマストアからインストールしたBrooklynを使わせて頂いています。

 

今回は、はてなブログで私が参考にさせて頂いた記事を元にレスポンシブ対応のグローバルナビゲーションをドロップダウン表示する方法についてお伝えして行きます。

 

※この設定をすることで以下の事が出来るようになります。

 

①PCではグローバルメニューにカーソルを移動すると各項目毎に登録された記事がドロップダウンで表示されます。(カテゴリー毎4記事)

 

②スマホではトグルメニューで表示されますがPCで表示される各ナビゲーションの先頭記事が表示されます。

 

目次

 

 

 

 

参考にさせていただいた記事

 

テーマストアからインストールしたBrooklyn制作者様の記事を参考にさせていただきました。  

 

尚、PCへのグローバルナビゲーション設置やスマホのトグルメニュー設置方法に関してもBrooklyn制作者様が書かれた記事で詳しく解説されています。

 

参考にさせていただいた記事はこちらです ↓ ↓

www.notitle-weblog.com

 

ドロップダウン表示の効果

 

このドロップダウン表示が出来るようになると、注目記事では表示されない部分の記事(おすすめ記事)等を任意に表示させることが出来るようになります。

 

ブログに訪問された方に、トップメニューから移動しなくても、興味のあるカテゴリーにある記事を探してもらうことも簡単に出来ます。

 

以前から使わせて頂いているカッコイイデザインテーマのBrooklynが更に便利に使えるようになります。

 

ドロップダウン表示登録手順

 

➀参考にさせて頂いた記事内のナビゲーションコードを一旦メモ帳等にコピー

 

➁グローバルメニューに表示させたい①~⑤の各カテゴリーを決める

 

➂ドロップダウン表示させたいカテゴリー毎の先頭になる記事タイトルとLURを貼り付けます。

 

④各カテゴリー毎に3記事を選んで記事タイトルとURLを貼り付けます。

 

※貼り付ける部分等の細かい説明も全て参考にさせて頂いた記事内に書かれていましたので大変助かりました。

 

⑤各カテゴリーや記事のタイトル・URL貼り付けが終わったら、コード全体をコピーしてデザイン⇒カスタマイズ⇒ヘッダー⇒記事下へ貼り付け

 

以上の方法でグローバルナビゲーションがドロップダウンで表示出来るようになります。

 

参考にさせて頂いた記事のコードに自分が表示させたい記事タイトルやURLを入れることで、自由に編集が出来ます。

 

当ブログのグローバルメニューコード

 

下の票は、実際に当ブログで使っているグローバルメニューのコードです。

 

記事のURLを入れる部分タイトルを入れる部分が分かり易いように色分けして表示させてみました。

 

ナビゲーションコードを作って行く場合は下の表の様に分けておくと作業がし易くミスも発生し難いと思います。

  

f:id:sikinomori117:20200214033623p:plain

 

グローバルメニューの固定とスマホトグル表示

 

上に表示させた図の半分から下の部分には、グローバルメニューを上にスクロールした時に固定させる部分スマホでトグルメニューを表示させるのに必要なコードになっています。 

 

グローバルナビゲーションの固定と併せてスマホのトグル機能も使ってみたい方は下記のコードをナビゲーションコードの下へ貼り付けてみることで再現出来ます。

 

※このコードは上で示した図の下半分に書かれているコードになります。

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function (){
// 変数に代入
var $nav = $('#global-menu');
var $content = $('#content');
var $offsetTop = $('#trigger-point').offset().top;
// 固定メニューの設定
function fixedNav() {
if($(window).scrollTop() > $offsetTop){
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
};
$(window).scroll(fixedNav);
$('body').on('touchmove', fixedNav);
// Toggle メニューの設定
$('#nav-toggle').click(function (){
$nav.toggleClass('open');
});
$('#content').click(function (){
if($nav.hasClass('open')){
$nav.removeClass('open');
}
})
});
</script>

 

スポンサーリンク

 

レスポンシブにチェックを!

 

スマホのトグルメニューが一旦表示されて直ぐに消えてしまう問題については

 

 
ダッシュボード→デザイン→スマホ→ヘッダー→詳細設定欄→レスポンシブにチェックを入れる。

 

にこの設定をしておけば問題は解決します。

 

まとめ

 

はてなブログのテーマストアでBrooklynをお使いの方でPCやスマホにも対応出来るグローバルメニューの設置やドロップダウン表示させたいと思っている方の参考になれば幸いです。