KYO

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日 jQuery , , , ,

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。
メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。

スライドメニューを作る

前回記事やコンテンツが流れていくスライダーのアレを作ってみたという記事を書いたのですが、これに追加しました。

参考サイトのリンクを貼っておきます
menu – header

というわけでまずはお決まりのデモページです。

ちょっとわかりづらいのですが、左上のボタンを押すと左からメニューが流れてきて、画面が薄暗くなります。

難しそうな印象がありましたが、jQueryでやることもクラスを付けたり取ったりするだけで、大したことはありませんでした。

HTMLを完成させる

sidebarという要素は、左側に隠しておきます。ただし、toggle-btnだけは表示させるように位置を調整します。
あとでcssでわかるのですが、overrayという要素は画面全体を黒色で囲います。

toggleSidebar()とcloseSidebar()というメソッドを呼び出すボタンがあります。
見ての通り、このボタンを押すとイベントが発火しますので、その2つの関数を定義しておきます。jQueryの方を見ていきます

ボタンを押すと、htmlにactiveクラスが付与されたり、削除されたりします。
ついでにoverrayを押してもactiveクラスが削除されるようにします

つまりhtmlにactiveクラスが付いている時は、スライドメニューが画面に表示されている状態ということです、jQueryはクラスを付けたり取ったりするだけです

CSSを完成させる

sidebarは初期値で画面左に幅の分だけ移動させておきます。
そしてhtmlにactiveクラスが付いている時はポジションを移動させます。

とまぁこんな感じでhtmlにactiveクラスが付いている時とそうでない時のコードを書いていけば良いので、続きも一気に書きます

overrayは普段はopacity: 0; visibility: hidden;にしておきます。activeクラスが付いた時にopacity: .65; visibility: visible;となって表示されるようになります。

toggle-btnは初期値では親要素が-200px動いているので、left:230px;で30px動いている感じです。
activeクラスが付いている時は、非表示にしています。

 

多くのサイトで使われている技術ですが、とても簡単に実装できました


関連記事

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。   なぜ0から作るかというと、オシャレなステ...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...

jQueryでフォームのバリデーション機能を実装する

2018年6月10日

最近は、phpとjQueryをメインに勉強しています。 今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。   ソースコードはgithub   完成するとこんな感じです       バリデーションフォームの概要 phpでバリデーション処理を書くと送信ボタンを...

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています   たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!       jquery...