スマホオーバーレイ表示ナビでページ内リンクを使う時

2017年5月21日 HTML+CSS

スマホページのナビメニューというと、横からスライドしてくるドロワーナビやページ上部か下部に固定のナビが一般的ですが、スライドしてくるタイプは個人的に好きではないためあまり採用していません。
固定タイプもアイコンを使用したりして視認性を高めても5+-2くらいしかメニューを盛り込めません。
そこで、個人的に一番好きなのは、全画面にオーバーレイ表示するナビゲーションです。
スライドタイプと似ていますが、基本的にメニュー一覧をど真ん中に表示させるため「押しやすい」というのが一番の利点です。
とはいえ、やはりスマホはPCと比べると画面が小さいため制約はでてきますし、メニューが増えれば押しにくくなるのは同じです。
スマホサイトのナビメニューは確立されているようで、バラバラです。
最近ではCC3で動きをつけたり、ボタンを押すとさらに別のナビがでたり、レイヤー表示にしたりと凝ったものもありますね。。

オーバーレイタイプのナビ

当サイトのテンプレートでも採用しているオーバーレイタイプのナビですが、仕組みとしてはjqueryのtoggleClass()を使用しclassを足してCSSで表示・非表示の切り替えを行っています。
CSSにはheight:100vh;を使用し全画面に表示しています。
※対応表
サイト制作をしているとページ内リンクを使用するときもあると思います。
別ページに遷移する時は問題ないのですが、ページ内リンクですと、指定した場所に移動はできますがオーバーレイされたナビがそのままのためUXを満たせません。
そこで、改善案を用意しましたので掲載しておきます。（前置きが長くなりましたが、これがトピックの本旨）

$(function() {
var w = $(window).width();
var x = 640;
if (w <= x) { $(".navi a").addClass("rwd"); } }); $(function() {$(".rwd").click(function () { $(".navi").fadeToggle("slow", "linear"); $(".menu-trigger").toggleClass('active'); });});

windowサイズを取得し、640px以下なら.rwdを足します。
.rwdが付与された.naviを押すとtoggleが反応するという仕組みです。

サンプル

途中でウィンドウサイズが変わると反応しないため、別の記述が必要ですが省いています。
さらに良い記述がありましたら、改良してご使用くださいm(__)m