【SWELL】ページ内リンクをタップした際に、スマホ用開閉メニューが閉じない時の対応
WordPressテーマ「SWELL」のスマホ用の開閉メニューは、リンクをタップ(クリック)すると、自動的にメニューが閉じる仕様になっている。しかし、メニューにページ内リンクが設定されていると、タップしてもメニューが閉じない場合がある。jQueryで簡単に修正できるので参考になれば幸いだ。
グローバルナビやSPメニューにページ内リンクを設定する
例えばLP型のサイトで、グローバルナビゲーションメニューのほとんどはトップページ内のコンテンツへのリンク(ページ内リンク)だが、一部プライバシーポリシーや問い合わせフォーム等を別ページにしているケースが該当する。
カスタムリンク:#contents1
カスタムリンクで「#コンテンツID(HTMLアンカー)」を入力すると、メニューにページ内リンクを設定することができる。
この場合、トップページを閲覧中にクリックする分には問題ないが、その他のページでクリックすると機能しない。
他のページからトップページ内のコンテンツへリンクするには、カスタムリンクの頭に「/(スラッシュ)」をつけてルート相対パスを利用するか、http〜の絶対パスを指定する等してトップページを明示する必要がある。
カスタムリンク:/#contents1
こうすることで、他のページからトップページ内のコンテンツ(ページ内リンク)が機能するようになる。一方で、SWELLのスマホ用開閉メニューで当該リンクをクリックしても閉じなくなる。
SWELLのSPメニューの開閉をコントロールする
SWELLのスマホ用開閉メニューは、html
要素のdata-spmenu
属性で開閉をコントロールしている。data-spmenu
がopened
で開いてclosed
で閉じる。つまり、リンクをクリックした際に、data-spmenu
をclosed
にすることでメニューを閉じることができる。
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-spmenu
がclosed
になるが、HTMLはopened
のままになる。DOMの要素を書き換える必要がある場合は、attr()メソッドを使う。