SWELL不具合｜スマホメニューのアンカーリンクをタップしてもメニューが閉じない

ペラサイトなどでは1ページの中にアンカーリンクを複数設置して、メニューにはアンカーリンクを並べるのが一般的だと思います。

SWELLでメニューにアンカーリンク設定した時のとことです。SWELLスマホメニューから同じページのアンカーに飛ぶときに、モーダルで表示されるメニューが自動的に閉じません。

メニューを閉じるには、×をタップしないと閉じません。

これはSWELLの不具合だと思います。

SWELLのスマホメニューにある同じページのアンカーリンクをタップしてもスマホメニューが閉じない原因

理由は簡単です。

SWELLのスマホメニューの開閉操作は、ユーザーがハンバーガーのタップでメニューを開くか、ユーザーがメニューを閉じるかで行います。

メニュー内のリンクをタップした時にもメニューが閉じるように思いますが、ページ遷移する時に勝手に閉じているだけです。

ページ遷移を行わない場合はSWELLのスマホメニューは明示的に閉じられないので、開いたままになります。

SWELLのスマホメニューは全画面ではなく、カスタマイズもできないので、メニューの外をタップすればメニューを閉じることができます。

そのようなことから、あまり大きな問題になっていないのかもしれません。

ページ内アンカーリンクをタップした時にもスマホメニューを閉じるには？

SWELLはSPメニューの開閉を管理しています。

htmlタグのdata-spmenu属性がopenedかclosedかでスマホメニューの開閉の状態を管理しています。

特定のイベントの時に、スマホメニューを閉じたければ、data-spmenu属性をclosedにしてあげればいいです。

そのためには、Javascriptのカスタマイズが必要です。

スマホメニュー内部のアンカーリンクをタップしたら、スマホメニューを閉じるように属性を書き換えます。

add_action('wp_footer',function(){
?>
<script>
	document.querySelectorAll('#sp_menu a[href*="#"]').forEach(function(link) {
		link.addEventListener('click', function() {
			document.documentElement.setAttribute('data-spmenu', 'closed');
		});
	});
</script>
<?php
},9999);

まとめ

SWELLのスマホメニューはどのサイトも同じで面白みに欠けますよね。

SWELLのスマホメニューは、ページ内遷移をするアンカーリンクをタップした時には閉じません。

SWELLのスマホメニューをカスタマイズして、全画面表示にした時に今回の不具合に気が付きました。

もし、アンカーリンクをスマホメニューに並べている場合には、今回のカスタマイズで不具合を解消してください。