【jQuery入門】実務でよくある！実装サンプル

今回記事では、実務におけるjQueryを使った実用的な例をCodePenで紹介します。

実装の詳細については、コード内にコメントを入れているので参照してください。

jQueryを初めて学習する方は入門編記事一覧を纏めているのでご覧ください！

ハンバーガーメニュー

レスポンシブデザインでは必須のハンバーガーメニューです。クリックしてナビゲーションメニューがスライドして出てくるものがほとんどです。

jQueryでの処理は単純で、ハンバーガーメニューをクリックすると、ハンバーガーメニューとナビゲーションメニューにopenクラスを付けたり外したりします。

openクラスが付く事で、ハンバーガーメニューの形を変え、ナビゲーションメニューの表示をします。

ナビゲーションメニューをクリックして該当するセクションへなめらかにスクロールします。

ポイントは以下の点になります。

$('a[href^="#"]')で、リンク先が#から始まる<a>要素(ページ内リンクボタン)全てをセレクタとすることができます。
ページ内リンクボタンから取り出したhref属性の値を用いて、$(href).offset().top;とし、リンク先のsection要素を取得し、且つそのスクロール位置を取得します。
<a>要素をクリックすると、通常はページの再読込が発生してしまいますが、クリックイベントの最後にreturn false;としてあげると、再読込をキャンセルすることが出来ます。

クリックすると、隠してある項目を表示することが出来ます。

取得した要素からトラバースで兄弟要素等を取得し、.slideToggle()メソッドでその要素の表示・非表示を切り替えています。

ポイントは$(this).next().stop().slideToggle();等、.slideToggle()をする前に、一度.stop()を挟むことです。

これが無いと、アコーディオンを連続でクリックした時に、表示・非表示のアニメーションがクリックした回数分最後まで動作してしまうこととなり、操作性が損なわれます。

クリックするとページトップまで滑らかにスクロールします。

ポイントは以下の点になります。

ネストされているナビゲーションメニューへカーソルを重ねるとスライドして表示します。

hoverイベントを使用して、表示・非表示を切り替える単純なものですが、一度stop()メソッドを挟んでアニメーションを停止することがポイントです。

スクロールイベントにて、要素が画面内のある程度の高さに来たら、ふわっと表示させたり、蛍光マーカー風の効果をつけます。

windowのスクロールイベントを使用し、windowのスクロール位置、各要素のwindowの上端からの高さから、各要素がwindowの高さの1/4まで来たかを判定し、showクラスを付けています。

showクラスを付けると、ふわっと表示したり、蛍光マーカーが引かれたりするよう、CSSを記述しています。

CSSだけでもホバーによるスプライトは実装できましたが、ここではクリックによるスプライトの実装になります。

CSS編でも、ホバーしたら二枚繋がっている画像の表示位置を変えるものがありましたが、これはjQueryからクリックイベントをきっかけに画像の表示位置を変えるactiveクラスを付けたり外したりするものです。

タブメニューによるコンテンツ切替です。

ポイントは以下になります。

タブメニューをクリックしたら、選択したタブメニューはselectクラスを付け、それ以外はselectクラスを外す。
クリックされたタブのhrefをセレクタとして、$(a.attr("href"))とし、表示するコンテンツを取得し、show()で表示、そのままメソッドチェーンで兄弟要素を非表示とする
初期状態では最初のタブが開かれた状態となるように、最初のタブにselectクラスを付けて、最初のコンテンツを表示します。