とりあえずの備忘録

備忘録(びぼうろく)。主にパソコンやインターネットに関する様々なことを個人的にメモしています。

はてなブログに「メガドロップダウンメニュー」を導入する(レンタルサーバー使用しない)

はてなブログに、jQueryで動く「メガドロップダウンメニュー」(jQuery Mega Drop Down Menu Plugin)を導入したときにメモです。

スキン無し、レンタルサーバー使用しない。動作確認は、こちらの「サンプルブログ」にパソコンでアクセスしてください。

レンタルサーバーを使用する方法は、こちらの「エントリー」を参照ください。

f:id:notei:20171009145606j:plain




「メガドロップダウンメニュー」に必要なファイルを準備する

サイトからダウンロードする

jQuery Mega Drop Down Menu Plugin – Downloads « Design Chemical Lab」にアクセスします。

赤い枠のリンクからzipファイルをダウンロードします。
f:id:notei:20170926135151j:plain

ダウンロードした「jquery-mega-drop-down-menu.1.3.3.zip」を解凍します。

必要なファイルだけ残す

必要なファイルは以下の3つになります。

  • jquery.dcmegamenu.1.3.3.min.js
  • jquery.hoverIntent.minified.js
  • dcmegamenu.css

残りのファイルは「スキン有り」で必要となるので、今回は使いません。

「dcmegamenu.css」を編集する

CSSファイル「dcmegamenu.css」をエディタで開きます。
先頭に記述してあるサイト全体をデザインする「/* Page */」(赤い枠で囲まれた)箇所を削除します。
f:id:notei:20170926140944j:plain

削除したら上書き保存します。

これで、「メガドロップダウンメニュー」に必要なファイルが準備できました。

はてなブログに必要なファイルを読み込む

管理画面の「詳細設定」を開く

はてなブログの管理画面を開きます。
左のメニューから「設定」を選んで、右の画面上部にある「詳細設定」タブを開きます。

「headに要素を追加」にjQueryの外部ファイルを記述する

「headに要素を追加」に、jQueryの外部ファイルを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

記述したら「詳細設定」画面の一番下にある「変更する」ボタンを押します。

管理画面の「デザイン」を開く

はてなブログの管理画面を開きます。
左のメニューから「デザイン」を選んで、PCデザイン設定タブ(カスタマイズ)を開きます。

「dcmegamenu.css」の中身を貼りつける

「デザインCSS」に「dcmegamenu.css」の中身を全部コピーして貼りつけます。

f:id:notei:20171009141223j:plain

「jquery.dcmegamenu.1.3.3.min.js」の中身を貼りつける

続けて「ヘッダ」の「タイトル下」に「jquery.dcmegamenu.1.3.3.min.js」の中身を全部コピーして貼りつけます。
そして、以下のようにjavascriptであることを示すタグで囲みます。

<script type="text/javascript">
「jquery.dcmegamenu.1.3.3.min.js」の中身
</script>

「jquery.hoverIntent.minified.js」の中身を貼りつける

続けて「ヘッダ」の「タイトル下」に「jquery.hoverIntent.minified.js」の中身を全部コピーして貼りつけます。
そして、以下のようにjavascriptであることを示すタグで囲みます。

<script type="text/javascript">
「jquery.hoverIntent.minified.js」の中身
</script>

記述したら「変更を保存する」を押します。
これで、「メガドロップダウンメニュー」を使用するための環境が整いました。

「メガドロップダウンメニュー」を追加する

管理画面の「デザイン」を開く

はてなブログの管理画面を開きます。
左のメニューから「デザイン」を選んで、PCデザイン設定タブ(カスタマイズ)を開きます。

土台を記述する

「ヘッダ」の「タイトル下」に、まず土台となるHTMLを記述します。

<ul id="mega-menu-1" class="mega-menu">
この土台のなかに各メニューを追加していく
</ul>

メニューを記述する

「この土台のなかに各メニューを追加していく」の位置に、以下の3パターンから選んでメニューを追加していきます。

  • サブメニューがない場合
<li><a href="URL">メニュー</a></li>
  • サブメニューの階層が1個の場合
<li><a href="javascript:void(0);">大メニュー</a>
  <ul>
    <li><a href="URL">中メニュー</a></li>
    <li><a href="URL">中メニュー</a></li>
    <li><a href="URL">中メニュー</a></li>
  </ul>
</li>
  • サブメニューの階層が2個の場合
<li><a href="javascript:void(0);">大メニュー</a>
  <ul>
    <li><a href="URL">中メニュー</a>
      <ul>
        <li><a href="URL">小メニュー</a></li>
        <li><a href="URL">小メニュー</a></li>
        <li><a href="URL">小メニュー</a></li>
      </ul>
    </li>
    <li><a href="URL">中メニュー</a>
      <ul>
        <li><a href="URL">小メニュー</a></li>
        <li><a href="URL">小メニュー</a></li>
        <li><a href="URL">小メニュー</a></li>
      </ul>
    </li>
  </ul>
</li>

動作用javascriptを記述する

さらに「ヘッダ」の「タイトル下」に、以下のjavascriptを追加します。

<script type="text/javascript">
  $(document).ready(function($){
    $('#mega-menu-1').dcMegaMenu({
      rowItems: '3', //サブメニューの列、数字で指定
      speed: 'fast', //サブメニューが開く速度、他に「slow」など
      effect: 'fade', //サブメニューが開く効果、他に「slide」「fade」など
      event: 'click', //サブメニューをクリックで開くときに指定
    });
  });
</script>

各オプションについては「こちら」を参照。

記述したら「変更を保存する」を押します。
これで、「メガドロップダウンメニュー」が動作します。

「メガドロップダウンメニュー」のサブメニューが一瞬だけ見切れる問題に対処する

ページを読み込んだときに、一瞬だけ以下のようにサブメニューが見切れてしまいます。
この問題を、「メガドロップダウンメニュー」を数ミリ秒経ってから表示することで回避します。

f:id:notei:20171008161930j:plain

管理画面の「デザイン」を開く

はてなブログの管理画面を開きます。
左のメニューから「デザイン」を選んで、PCデザイン設定タブ(カスタマイズ)を開きます。

「メガドロップダウンメニュー」をID付きの<div>タグで囲う

「ヘッダ」の「タイトル下」に追加した「メガドロップダウンメニュー」を、以下のように"box-menu"というIDを付けた<div>タグで囲います。

<div id="box-menu">
<ul id="mega-menu-1" class="mega-menu">
この土台のなかに各メニューを追加していく
</ul>
</div>

追加した<div>タグを非表示にする

続けて「デザインCSS」に以下の内容を追加します。

#box-menu {display: none;}

表示用javascriptを記述する

続けて「ヘッダ」の「タイトル下」に、以下のjavascriptを追加します。

<script type="text/javascript">
    $(function() {
      $('#box-menu').fadeIn(1000);
   });
});
</script>

記述したら「変更を保存する」を押します。
1000ミリ秒経過してから「メガドロップダウンメニュー」を表示することで、サブメニューが一瞬見切れてしまうのを防いでいます。

当ブログの「メガドロップダウンメニュー」(PCデザイン)はこの手順で設定して、あとから「デザインCSS」に貼りつけた「dcmegamenu.css」の中身を編集してデザインを整えました。



はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook