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

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

 

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

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

はじめに

 

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

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

 

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

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

 

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

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

 

 

実装の流れ

 

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

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

 

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

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

 

20180306082841

 

マウスホバーも動作するので、基本的に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」によるタップ検知を追加することで、タブレットで操作した場合もドロップダウンメニューを表示できるようになりました。

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

 

  1. タップされたら現在の状態を判定
  2. global-showクラスを持っていたら非表示
  3. ドロップダウンが表示されていなかったら表示する

 

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

 

20180306082853

 

たったこれだけ!

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

 

まとめ

 

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

 

 

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

ではまた。

過去にレビューしたアイテム