オーバーレイ表示ナビでページ内リンクを使う時2017年5月21日HTML+CSSスマホページのナビメニューというと、横からスライドしてくるドロワーナビやページ上部か下部に固定のナビが一般的ですが、スライドしてくるタイプは個人的に好きではないためあまり採用していません。固定タイプもアイコンを使用したりして視認性を高めても5+-2くらいしかメニューを盛り込めません。そこで、個人的に一番好きなのは、全画面にオーバーレイ表示するナビゲーションです。スライドタイプと似ていますが、基本的にメニュー一覧をど真ん中に表示させるため「押しやすい」というのが一番の利点です。いえ、やはりスマホはPCと比べると画面が小さいため制約はでてきますし、メニューが増えれば押しにくくなるのは同じです。スマホサイトのナビメニューは確立されているようで、バラバラです。最近ではCC3で動きをつけたり、ボタンを押すとさらに別のナビがでたり、レイヤー表示にしたりと凝ったものもありますね。オーバーレイタイプのナビ当サイトのテンプレートでも採用しているオーバーレイタイプのナビですが、仕組みとしてはjqueryのtoggleClass()を使用しclassを足してCSSで表示・非表示の切り替えを行っています。CSSにはheight:100vh;を使用し全画面に表示しています。※対応表サイト制作をしているとページ内リンクを使用するときもあると思います。別ページに遷移する時は問題ないのですが、ページ内リンクですと、指定した場所に移動はできますがオーバーレイされたナビがそのままのためUXを満たせません。そこで、改善案を用意しましたので掲載しておきます。});});windowサイズを取得し、640px以下なら.rwdを足します。.rwdが付与された.naviを押すとtoggleが反応するという仕組みです。サンプル途中でウィンドウサイズが変わると反応しないため、別の記述が必要ですが省いています。テンプレート販売「lopweb.net」マニュアル。