【はてなブログ】ドロップダウンメニューをタブレットに対応させる!クリックで表示・非表示!
こんにちはクリアメモリです!
先日「はてなブログのグローバルヘッダーをドロップダウンにする方法」を紹介しました。
その記事の中で、マウスカーソルが乗った時の動作を実装したのですが、これだと「タブレット」によるアクセスに対応できていませんでした。
そこで今回は、ドロップダウンをタップした時にも動作させる方法を紹介します。
はじめに
今回は「はてなブログのグローバルヘッダーをタブレットに対応させる方法」です。
私のサイトは、スマホとPCで別々のスタイル(CSS)を用意しているのですが、タブレットの場合は「PC用のCSS」が適用されるようになっています。
先日紹介した「ドロップダウン形式のグローバルヘッダー」もPCデザインで表示されます。
タブレットの場合、基本的にマウスカーソルという概念が存在しないため、ドロップダウンメニューがうまく動作しないんですよね。
そこで、過去に紹介したドロップダウンメニューのコードに「タップ処理」を追加しました。
ドロップダウンメニューの設置方法は、こちらの記事で紹介したコードを元に処理を追加していきます。
実装の流れ
今回のカスタマイズした結果、ドロップダウンのグローバルヘッダーはどのように動作するようになるのか、先に把握しておきましょう。
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クラスを持っていたら非表示
- ドロップダウンが表示されていなかったら表示する
こんな感じの流れになっており、「global-show」クラスがある場合は表示・無い場合は非表示になります。
たったこれだけ!
見た目やHTMLはそのままで良いので、簡単に実装できたかと思います。
まとめ
今回紹介した方法を使えば、先日の記事で紹介した「ドロップダウンのグローバルヘッダー」をより便利・幅広いユーザーに対応できるようになりました。
回遊率もアップする可能性があるので、ぜひ試してみてください。
ではまた。