スマホメニューでページ内リンクをタップするとメニューが閉じないとき

jQueryでスマホメニューのコードを一から書くことはあまりありませんが、どこかのページで紹介してあるコードをコピペして設置するときに、ページ内リンクで問題が発生することがあります。

きちんと作ってあるスマホメニューも存在しますし、私が仕事でいじることの多いカラーミーショップのスマホメニューは問題が発生するタイプです。

今回は、ページ内リンクをタップしたときにメニューを閉じない場合の対応についてです。似たようなことで困っている方へ解決法を紹介します。

ページ内リンクではスマホメニューが閉じない

スマホメニューの項目にページ内リンク(アンカーリンク、#)を書いた場合は、条件によってはメニューが閉じないことがあります。

わかりやすいように、例を挙げてみましょう。
カラーミーショップのテンプレートは「特定商取引法に基づく表記」ページ(https://your-domain.shop-pro.jp/?mode=sk)に、いくつかページ内リンクが指定してあります。

アンカーが#deliveryの場合、「特定商取引法に基づく表記」ページの「配送・送料について」というタイトル行にジャンプします。

<a href="?mode=sk#delivery">配送・送料について</a>


ここで二つの条件を考えます。
一つは、「特定商取引法に基づく表記」ページを開いていない状態で、スマホメニューを開き、メニュー内で上URLをタップした場合。
メニューを閉じた状態で「特定商取引法に基づく表記」ページを開きますので、なんの問題もありません。

もう一つは、「特定商取引法に基づく表記」ページを開いている状態で、スマホメニューを開き、メニュー内で上URLをタップした場合。
すでに「特定商取引法に基づく表記」ページを開いていますので、「特定商取引法に基づく表記」ページを開き直すことはありません。メニューは開いたままです(これがマズイ)。
アンカーが指定されているので、ページ内の該当行にジャンプだけします。

スマホメニューでアンカーリンクを使いたいという要望は案外多いんですが、「特定商取引法に基づく表記」ページにかぎらず、どのページでも同じパターンでマズイことになります。

原因はシンプルで、必要な閉じるコード(jQueryなど)が書いていないためです。
メニュー項目をタップしたときには、ページ内リンク時もメニューを閉じてほしいですよね。対応方法を三つ紹介します。

カラーミーで常時SSLショップ向け

カラーミーショップの常時SSL化サイトは、httpでアクセスすると、サーバー側の設定でhttpsへリダイレクトしてくれます。

ブラウザ上の挙動としては、リダイレクトするときにメニューを閉じた状態でページを開きなおしてくれます。
これを利用して、httpの絶対パスで指定してやります。

<a href="http://your-domain.shop-pro.jp/?mode=sk#delivery">配送・送料について</a>

カラーミー以外でも使える別の方法

JavaScript(onclick="location.href~")でページを開くと、メニューを閉じた状態でページを開きなおしてくれます。

<a href="#" onclick="location.href='https://your-domain.shop-pro.jp/?mode=sk#info'">配送・送料について</a>

メニュー側にjQueryを書く

上二つはリンク側で対応する方法でしたが、メニュー側にjQueryを書いて対応する方法もあります。

一般的なスマホメニューは、メニューボタンをタップしたときに、メニュー展開していることを示すclass(open、activeなど)が付いています。これを取り払えばメニューは閉じます。

下記のように、タップ時にリンク先がページ内リンクの場合はメニューを閉じる、という風に書いてやるのがいいです。

$('a[href*="#"]').on('click', function() {  
  $('#drawer').removeClass('open');
});

スマホメニューのコード内に、上記のようなremoveClassがあれば、ページ内リンクを考慮したスマホメニューです。
なければ、ページ内リンクを考慮してありません。

おわりに

ちょっとしたことですが、参考にしたスマホメニューのコードがページ内リンクを考慮してなければ、閉じない不具合に遭遇します。

対応について参考にして下さい。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら