【SWELL】ページ内リンクをタップした際に、スマホ用開閉メニューが閉じない時の対応

WordPressテーマ「SWELL」のスマホ用の開閉メニューは、リンクをタップ(クリック)すると、自動的にメニューが閉じる仕様になっている。しかし、メニューにページ内リンクが設定されていると、タップしてもメニューが閉じない場合がある。jQueryで簡単に修正できるので参考になれば幸いだ。

グローバルナビやSPメニューにページ内リンクを設定する

例えばLP型のサイトで、グローバルナビゲーションメニューのほとんどはトップページ内のコンテンツへのリンク(ページ内リンク)だが、一部プライバシーポリシーや問い合わせフォーム等を別ページにしているケースが該当する。

カスタムリンク:#contents1

カスタムリンクで「#コンテンツID(HTMLアンカー)」を入力すると、メニューにページ内リンクを設定することができる。

この場合、トップページを閲覧中にクリックする分には問題ないが、その他のページでクリックすると機能しない。

他のページからトップページ内のコンテンツへリンクするには、カスタムリンクの頭に「/(スラッシュ)」をつけてルート相対パスを利用するか、http〜の絶対パスを指定する等してトップページを明示する必要がある。

カスタムリンク:/#contents1

こうすることで、他のページからトップページ内のコンテンツ(ページ内リンク)が機能するようになる。一方で、SWELLのスマホ用開閉メニューで当該リンクをクリックしても閉じなくなる。

SWELLのSPメニューの開閉をコントロールする

SWELLのスマホ用開閉メニューは、html要素のdata-spmenu属性で開閉をコントロールしている。data-spmenuopenedで開いてclosedで閉じる。つまり、リンクをクリックした際に、data-spmenuclosedにすることでメニューを閉じることができる。

jQueryでリンクのクリック時にdata-spmenuをclosedにする

jQuery(function($){
  $('#sp_menu a[href*="#"]').on('click', function() {  
    $('html').attr('data-spmenu','closed');
  });
});

カスタムCSS&JSの「JS用コード」に記載する。
なおjQueryを使用する場合は、SWELL設定でjQueryの読み込みを有効化(チェック)しておくこと。

data()メソッドではDOMの要素は変更されないので注意

jQuery(function($){
  $('#sp_menu a[href*="#"]').on('click', function() {  
    $('html').data('spmenu','closed');
    console.log($('html').data('spmenu'));
  });
});

data属性の変更なのでdata()メソッドでもいけそうな気がするが、data()はjQuery上のキャッシュを書き換えるのみでHTMLは変更されない。上記のコードの場合、console上はdata-spmenuclosedになるが、HTMLはopenedのままになる。DOMの要素を書き換える必要がある場合は、attr()メソッドを使う。

  • URLをコピーしました!
  • URLをコピーしました!

WHO WROTE

komadairaのアバター komadaira 代表社員・COO

地方テレビ局、歯科コンサル、中堅SIerを経て独立。ダイヤルアップ接続の時代にHTMLに魅せられ、なんだかんだ10年以上WEB制作に関わり続けている。