スマートフォンサイトのヘッダーによくある「横スライドメニュー」の設置方法をメモしておきます。

今回は2つJSプラグインを使用します。

  1. Slidebars
  2. Nicescroll 3

1.で横スライドメニューを設定し、2.でスライド要素にスクロールバーを付けます。

1.のみの場合は、スマートフォンサイトでスライド表示したメニューをタップでスクロールする際に、
背景画像が動くバグのような挙動が確認されました。
そのため、2.の設定を追加してメニュー部分をスクロールさせることで、挙動を押さえています。

また具体的な設定方法も後日メモしておきたいと思います