javascript

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はクリック操作によってWEBページの左側に格納できるサイドバーを実装していきます。

見え隠れするサイドバーを実装

javascript

HTMLを以下にまとめます。

全体がaside要素で囲まれており、
その中に3つのli要素が配置されています。

次に今回使用するCSSです。

ここで重要なのは、
.page-main > aside要素に指定しているleft:-350px;です。

これはサイドバー全体を画面外に移動するための指定です。

サイドバーの幅は350pxなので、
この指定によってサイドバーは初期状態では非表示になります。

最後にJavaScriptです。

$asideには、
.page-main>asideの要素を含むjQueryオブジェクトを格納しています。

また$asideButtonには、
変数$asideに格納されているjQueryオブジェクトの中から
さらにbutton要素に絞り込んだjQueryオブジェクトを格納しています。

この絞り込み処理にはfind()メソッドを使用します。

button要素がクリックされた際に実行される関数では、
最初に変数$asideに対してtoggleClass()メソッドを実行しています。

toggleClass()メソッドは
引数に指定されたクラス名(文字列)が、
jQueryオブジェクト内の要素のclass属性に指定されているかを確認し、
指定されていない場合は追加し、すでに指定されている場合は削除するメソッドです。

今回はtoggleClass()メソッドによって、
aside要素のclass属性にopenという文字列が追加または削除されます。

この処理は繰り返し実行されます。

続いてif文の条件にhasClass()メソッドを指定し、
条件分岐を行います。

hasClass()メソッドは「引数に渡したクラス名(文字列)が、
対象要素のclass属性に含まれていればtrueを返し、含まれていなければfalseを返す」メソッドです。

つまり、ボタンを押した時点でaside要素のclass属性にopenが指定されていない場合は
$aside.toggleClasss(‘open’)によってopenが追加されるため、
続いて実行されるhasClass()メソッドはtrueを戻します。

その結果、if文内の処理が実行されます。

一方、ボタンを押した時点でaside要素のclass属性にopenが指定されている場合は、
$aside.toggleClass(‘open’)によってopenが削除されるため、
続いて実行されるhasClass()メソッドはfalseを戻します。

その結果、if文内の処理は実行されず、
else内の処理が実行されます。

>>デモをチェックする

ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事