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について記事にしています。

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