【はてなブログ】ドロップダウンメニューをタブレットに対応させる！クリックで表示・非表示！

先日「はてなブログのグローバルヘッダーをドロップダウンにする方法」を紹介しました。

その記事の中で、マウスカーソルが乗った時の動作を実装したのですが、これだと「タブレット」によるアクセスに対応できていませんでした。

そこで今回は、ドロップダウンをタップした時にも動作させる方法を紹介します。

はじめに

今回は「はてなブログのグローバルヘッダーをタブレットに対応させる方法」です。

私のサイトは、スマホとPCで別々のスタイル（CSS）を用意しているのですが、タブレットの場合は「PC用のCSS」が適用されるようになっています。

先日紹介した「ドロップダウン形式のグローバルヘッダー」もPCデザインで表示されます。

タブレットの場合、基本的にマウスカーソルという概念が存在しないため、ドロップダウンメニューがうまく動作しないんですよね。

そこで、過去に紹介したドロップダウンメニューのコードに「タップ処理」を追加しました。

ドロップダウンメニューの設置方法は、こちらの記事で紹介したコードを元に処理を追加していきます。

【はてなブログ】ドロップダウンのグローバルヘッダーを設置する方法！カテゴリーが多い時にオススメ！

2018.2.24

今回は「はてなブログのグローバルヘッダー（ヘッダーメニュー）をドロップダウン形式で表示させる方法」を紹介します。 ドロップダウンで表示させることで、カテゴリーの数が多い場合でもスッキリした見た目になるので試してみてください。...

実装の流れ

今回のカスタマイズした結果、ドロップダウンのグローバルヘッダーはどのように動作するようになるのか、先に把握しておきましょう。

PCからアクセスした場合（マウスカーソルがある場合）は、グローバルヘッダーにカーソルを合わせたタイミングで子要素が表示されます。

それに加えて、タブレットからアクセスした場合はマウスカーソルは存在しないので、タップしたら子要素が表示されるようにしました。

結果的に、PCでアクセスした時も「クリックによる表示・非表示」を操作可能になりました。

マウスホバーも動作するので、基本的にPCの動作はこれまで通りです。

では、実際に「JavaScript」からドロップダウンのタップ処理を追加していきましょう。

jQueryを調整する

以前の記事で紹介した「HTML」と「CSS」はそのままでOK。

書き換えが必要になるのは「JavaScript（jQuery）」だけです。

ドロップダウンメニューには、以下のようなコードを記述してありました。

<script>
document.addEventListener("DOMContentLoaded", function(){
    $('.dropdown-menu').hover(function() {
        $(this).find(".global-contents").addClass('global-show');
      },
      function() {
        $(this).find(".global-contents").removeClass('global-show');
      }
    );
});
</script>

この部分を書き換えていきましょう。

<script>
document.addEventListener("DOMContentLoaded", function(){
    $('.dropdown-menu').hover(function() {
        $(this).find(".global-contents").addClass('global-show');
      },
      function() {
        $(this).find(".global-contents").removeClass('global-show');
      }
    );
    $('.dropdown-menu').click(function() {
      if ($(this).find(".global-contents").hasClass("global-show")) {
        $(".dropdown-menu").find(".global-contents").removeClass("global-show");
      } else {
        $(".dropdown-menu").find(".global-contents").removeClass("global-show");
        $(this).find(".global-contents").addClass("global-show");
      }
    });
});
</script>

このように「.click」によるタップ検知を追加することで、タブレットで操作した場合もドロップダウンメニューを表示できるようになりました。

ざっくりとコードの解説をしておきます。

こんな感じの流れになっており、「global-show」クラスがある場合は表示・無い場合は非表示になります。

たったこれだけ！

見た目やHTMLはそのままで良いので、簡単に実装できたかと思います。

まとめ

今回紹介した方法を使えば、先日の記事で紹介した「ドロップダウンのグローバルヘッダー」をより便利・幅広いユーザーに対応できるようになりました。

【Karabiner-Elements】任意の文字列を普段使わないキーから入力できるようにしてみた！-

2018.3.2

今回は「Karabiner-Elements」を使って、特定のキーを「任意の文字列」に変更する方法を紹介します。 insertやhomeキーなど、普段使わないようなキーを入力することで、自分で設定した文字列を入力できるようになるので、頻繁に使うテキストがある方にオススメです。...

回遊率もアップする可能性があるので、ぜひ試してみてください。

ではまた。