」を理念に掲げてコツコツと頑張っています。PENGINコーディング初学者の多くがつまづくハンバーガーメニュー!今回はハンバーガーメニューを2パターン作成してくよ★この記事はjQueryについて学ぶステップの4ステップ目です。【jQueryとは?】Webデザイナーを目指す人向けの基礎知識この記事ではjQueryを使用したハンバーガーメニューの実装方法について学んでいきます。フェードインで現れるハンバーガーメニューまずはこんな感じのハンバーガーメニューを作っていきます。ハンバーガーメニュー完成像の確認ハンバーガーメニューの完成像のコードは以下になります。CodePen.ファイルとフォルダの確認まずは、こちらのリンクからファイルをダウンロードします。フォルダの中身を確認しましょう!以下のファイルが格納されています。index.htmlstyle.cssreset.cssscript.jsindex.htmlをブラウザで表示しましょう。現状は、SP版のヘッダーのCSSは記述されていない状態です。HTMLにボタンを追記しようそれでは、まずHTMLにハンバーガーボタンのパーツとなる要素を書いていきます。headerの閉じタグの前に以下の記述をしましょう。bar_bottom"></span></button>このHTML要素をCSSで装飾してハンバーガーボタンの見た目を作っていきます。CSSでボタンを装飾しようそれではCSSでハンバーガーボタンの見た目を作っていきます。今回は3本線があるだけなので、style.cssのSP版の記述の中に以下のCSSを追記しましょう。middle;}先にブラウザにデフォルトで当たっているbuttonタグのスタイルをリセットしておきます。base_spと記載されてる下あたりに追記しましょう。10px;}次にハンバーガーボタンのスタイルは上の通り。humberger-menuとコメントアウトしている下あたりに追記してください。none;にしてるのは、PC版で表示されないようにするためです。CSSでハンバーガーメニューが開いたときの見た目をつくろうそれでは次に、ハンバーガーメニューが開いたときの見た目をつくっていきましょう。ハンバーガーメニューが開いたときは以下2点が見た目の変化をして現れます。ボタンが3本線から☓印になるメニューが非表示から全画面表示になる3本線が☓印になるCSS3本線に対して、closeというclassを付加したときにばつ印になるようにCSSを書いていきます。(closeというclassの付加はjQueryを後ほど使用します)style.cssのSP版、先ほどハンバーボタンのスタイルを書いた下あたりに以下のCSSを追記しましょう。.3s;}これで、「.burger-btn」にcloseというclassが追加されたときに、3本線がばつ印になるCSSはOKです。transitionは時間の指定です。詳しくはこちらの記事をご覧ください。【CSS】transitionプロパティの使い方解説!(アニメーション基礎)ハンバーガーメニューを全画面表示にする次にハンバーガーメニューを全画面表示にするCSSを書きます。さきほどのハンバーガーボタンの下あたりに追記していきましょう。hiddenとopacity:0のコメントアウトを外してメニューを非表示にしておきます。opacity:0を指定しているのは表示・非表示のためというより、オープン時にふわっと表示させるアニメーションのために指定してます。下部のfadeクラスは、jQueryで切り替えるメニューオープン時のスタイルです。値をhiddenからvisibleにして非表示を表示させる指定に変えます。hiddenを使ってるのは、アニメーション効果を適用させるためです(displayプロパティにはtransitionが効きません!)jQueryでクリックイベントを設定しようそれでは最後にjQueryでクリックイベントを設定して、ハンバーガーメニューが開閉するようにしましょう。index.htmlのbodyの閉じタグの直前でjQueryとscript.jsを読み込みます。});});上記の記述を日本語であらわすと以下のような感じです。2行目:.burger-btnをクリックすると3行目:.burger-btnにcloseというclassを追加/削除する4行目:.nav-wrapperにfadeというclassを追加/削除するこちらの記事もチェックjQueryのclickイベントとは?on()との違いも解説!jQueryのtoggleClassって?toggleメソッドについて解説!ここでブラウザの状態を確認すると、ハンバーガーメニューが表示されたときにスクロールできてしまうことがわかるかと思いますので、style.cssとscript.jsに以下の記述を追記します。hidden;}記述はどこでもいいですが、わかりやすいようにハンバーボタンのスタイルの下あたりに追記しておきましょう。overflowは表示画面外の領域を指定するプロパティで、hiddenは隠す値です。この指定で画面に表示されてない箇所はスクロールできないようになります。})});クリックイベントの中、4行目で、用意したnoscrollのクラスをbodyにつけ外しする指定を追加します。これで、ハンバーガーメニューが開いたときにスクロールを固定できます。次に以下のような横からニュっと出てくるメニューを作りましょう!ハンバーガーメニュー完成像の確認ハンバーガーメニューの完成像は以下のような感じです!ボタンを押すと右からメニューが出てきます。CSSを変更しようまずは.nav-wrpperのCSSをすべて下記内容に変更します。translateX(100%)になった点です。これでメニューはX(横)方向に100%分(画面幅分)移動したことで、画面外に消えてます。※transitionのプロパティもopacityからtransformに変えてます。次に、メニューが表示されたときの見た目もつくっておきましょう。なるように設定しておきます。translateX(0);}※さきほどメニューオープン時のスタイルを記述していた.fadeクラスの箇所を上書きすればOKです。これで、jQueryのtoggleClassでclassの追加/削除するたびに、0.3秒かけてtransform:translateX();の値が100から0に変わります。jQueryの記述を変更しようつぎにscript.jsを書き換えましょう。fadeToggleで表示/非表示を切り替えていた箇所を以下のように書き換えます。$('body').toggleClass('noscroll');});これで、横からニュっと出てくるハンバーガーメニューができました!最後に当記事はjQueryについて学ぶステップの4ステップ目でした。他記事も見てくれると嬉しいです!JavaScriptとは?何ができるか解説!(js学習ステップ第一弾)【Webデザイナー向け】JavaScriptsの文法講座(js学習ステップ第二弾)【これだけ覚えて!】jQueryの書き方(js学習ステップ第三弾)【コピペOK】ハンバーガーメニューの作り方(js学習ステップ第四弾)(この記事です)記事内のハンバーガーメニューはかなり簡易的ものですが、ひとまずjQueryを使った動きのあるUIを実装する体験ができたと思います。|プロデューサーマーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。