シンプルな左サイドのスライドメニューを作る【jQuery使用】

今回はシンプルなスライドメニューを作ってみます。PC⇒サイドメニュー、スマホ⇒スライドメニューというようなレスポンシブデザインではなく、スマホ向けですのでご了承ください。また、このサンプルではjQueryを使用しますが、jQueryプラグインは使用していません。

スライドメニューの方式

今回作るスライドメニューは、下図のような方式とします。初期表示時には画面外にサイドメニューを配置しておき、スライドするときはスライドメニューとメインコンテンツを同時に右に移動させます。こうすることで人の目には左からメニューがスライドしてきたように写ります。

slidein-1
slidein-2

デモ

まずはデモで動きを確かめてください。PCでもどの画面幅でも動きます。

デモページ

画面左上の≡(バーガーアイコン)をクリックすると画面幅の80%までメニューがスライドしてきます。メニュー以外あるいはメニュー内の閉じるボタンをクリックするとメニューが閉じます。

解説

HTML

今回は画面を丸ごと移動するため、動かす画面内のコンテンツすべてを囲むタグが必要になります。ヘッダーやフッターもです。メニューがラッパーの子要素以下にある場合は、本サンプルとは実装が変わってきます。HTMLのポイントはそれだけです。

CSS

CSSで必要な部分を解説します。

bodyタグに「overflow-x: hidden;」を指定することで、スライドを移動したときにはみ出した領域のスクロールを禁止しています。これが無いと、メニューを表示したときに横スクロールが発生して見た目も操作性も悪くなります。

ラッパーとなるタグには「position: relative;」を指定します。こうすることで、ラッパーのタグがラッパー以下の要素を配置したり動かしたりする際の基準点になります。「left: 0;」は初期位置の調整です。ラッパータグが(0, 0)の位置にくるようにします。本サンプルではラッパータグはbodyの直下にあるのでこの記述が無くても動きます。

メニューを囲むタグのCSSには「position: absolute;」を指定し、画面外に配置します。「display: none;」と初期非表示にしているのは、コンテンツよりメニューの方が高さがある場合、初期表示時に無駄な縦スクロールが出てしまうのを避けたためです。そのため、javascriptでメニューの表示/非表示を制御する必要が出てきています。

実は、メニューを出すだけならここまでの定義だけでOKです。今回は、メニューを開いたときに、「メニュー以外の場所をクリックしてもメニューが閉じる」ことをしています。

そのため、メニューを開いたときに見えている部分のコンテンツを操作できないよう、コンテンツすべてを覆い隠すようなオーバーレイ領域を表示させます。そのオーバーレイ領域をクリックすると、オーバーレイ領域が隠れ、メニューが閉じ、またコンテンツの操作を行うことができるようになります。そのオーバーレイ領域のスタイル定義が以下となります。

縦横100%の領域で、初期非表示です。また、コンテンツよりもz-indexを高くしていて、100%透過にしてコンテンツを見せています。

jQuery

スクリプト部分です。本サンプルではjQuery 2.1.4を使用しています。

このサンプルの課題

  • スクロールしてメニューを閉じた時の動作がダサい
  • コンテンツに「position: fixed;」された要素があるとそいつがコンテンツと一緒に動かない(大問題)

コンテンツを動かさずにメニューがオーバーレイしてくるものでいいならもっと簡単に実装できます。あと、CSS3アニメーションで実現する方法もあるみたいですね、いつかやってみようと思います。

広告
  • LINEで送る