>  >  >  > 

スマホサイト、アプリでおなじみのドロワーメニューを作ってみた

スマホサイト、アプリでおなじみのドロワーメニューを作ってみた

こんにちは。
普段使っているメガネのレンズが外れしまったので、昔使っていたメガネを引っ張りだしたウラカワです。

地味に度が合ってないと辛いですね・・・
メガネをつけたまま寝るのはやめましょう!(戒め)

さて本題。

最近ドロワーメニューを実装する機会があったので、自由にカスタマイズ出来るようプラグインに頼らず作ってみました。

ドロワーメニューってなんぞ?って方も一度は見たことあるはず!
スマホのサイト、アプリでよく見かける画面横からニュッと出てくるメニューのことです。

目次

  1. デモ
  2. html
  3. css
  4. script
  5. 最後に

デモ

今回はヘッダーを上部に固定しつつ、メニューがある程度長くなることを想定して実装しています。

アイコンは手っ取り早くFont Awesomeを使いました。

html

サンプルから余計な部分を除外していますが、必要なのは大きく分けて3つの要素です。

  • メニュー
  • コンテンツを表示するエリア
  • メニューを開くボタン(必要であれば閉じるボタンも)

css

cssで重要なのはメニューの位置とアニメーション部分になります。

縦に長くなった場合も考え、メニューに overflow-y: auto も設定します。

これでメニューが画面右の外側になりました。

今回はメニューが表示されたとき、他の要素の上に半透明の黒レイヤーを重ねているので、その分のスタイルも用意します。

script

ここからが本番。

まずは上に重ねるレイヤーを挿入しておきます。

メニューを開くとき、閉じるときの処理を用意します。

表示するときは画面外にあるメニューを内側に入れ、閉じるときは外側に戻します。

このときコンテンツ部分もメニュー横幅分ずらします。

ボタンをクリックしたときに実行します。

また、メニューを開いた状態のときはメニュー外をクリックすると閉じるようにします。

まとめるとこんな感じです。

最後に

動作は単純ですね。メニューの位置をずらすというのが基本になります。

色々と応用はきくと思いますのでデザインによって柔軟に対応出来るはずです!

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング