自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【jQuery】クリックでコンテンツ表示、pushbar.jsの使い方!!の解説になります!こんな方に読んでほしいjQueryを学び始めた方へプラグインのpushbar.jsを使って「クリックでコンテンツ表示」をしたい方向け今回はpushbar.jsについて解説しております。今回は、「クリックでコンテンツ表示」についての解説になります。「pushbar.js」になりますが、今でも簡単で使いやすいプラグインになっております。イメージ図は上記のようになります。4方向のボタンがあり、各方向のボタンをクリックするとコンテンツが表示します。コンテンツの中身は「ナビゲーション」、「サムネイル付きのブログ」など入れる事が可能です。下記のリンク先が公式サイトになります。Pushbar.js公式サイトはこちらから[記事の内容]Pushbar.jsについて必要なファイルについて記述場所について「クリックでコンテンツ表示について」の設定について「クリックでコンテンツ表示について」の設定についてまとめPushbar.jsについてPushbar.jsとは、「クリックでコンテンツ表示」のことを示します。jQueryが苦手な方でも問題ありません。下記のサイトから「Pushbar.js」をダウンロードしましょう。ZIP」ボタンをクリック3必要なファイルについてダウンロード後に必要なファイルについて解説していきます。ファイル名の「pushbar.js-master」をご確認ください。「pushbar.js」の2点を使用します。type="text/javascript"></script>また、「pushbar.js」を使用する際には、pushbarを使用する宣言をしなければなりません。以下のコードを合わせて指定しましょう。true,});</script>次に、jquery本体のプラグイン設置します。今回は2つ目のパターンを採用して解説します。2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。どちらでも問題ありません。true,});</script>必ず、jquery本体のプラグイン上、pushbarを下に設置しましょう。jqueryをダウンロードしたい方は、こちらのリンクから。記述場所について基本的にはbody内に指定するようにしましょう。基本構造の書き方は以下のようになります。コンテンツが入ります。true,});</script></body></html>「クリックでコンテンツ表示について」の設定について次に、「クリックでコンテンツ表示について」の設定について解説します。「クリックでコンテンツ表示について」の設定についてデモサイトはコチラから。基本構造の書き方は以下のようになります。下記はデフォルトになります。true,});今回は、4方向をbuttonタグを使っています。asideで囲み、コンテンツ(ナビゲーション)を作っています。data-pushbar-direction="left"になります。「id=”〇〇”」、「direction=”〇〇”」は方向に合わせるようにしましょう。注意ポイント!今回のCSSは「pushbar.js-master」のファイルの中身の「demo.css」を変更して載せております。ボタンのデザイン、コンテンツの背景色を変更する際には、「demo.css」を一度確認し変更して下さい。まとめ今回はこれで以上です。POINTPushbar.jsとは、「クリックでコンテンツ表示(4方向)」のことを示します。必要なファイルはpushbar.css、pushbar.jsの2点になります。CSSの変更をする際には、「pushbar.js-master」のファイルの中身の「demo.css」を確認して下さい。こちらにデモサイトを用意しました。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。