【実用的】サイトでよく見るjQueryで作れる機能5選

web制作
スポンサーリンク

こんにちは。はるです。

今回は、jQueryの学習を始めようと思っている方に向けて、jQueryを使うとどのような機能が作れるのかを紹介していこうと思います。
具体的な学習イメージの支えになればいいなと思います。

ハンバーガーメニュー

小さな画面やモバイルデバイス向けに、ナビゲーションメニューを省スペースに表示できる機能です。
メニューを開くボタンの三本線のロゴがハンバーガーに似ていることが由来です。

下のアイコンをクリックすると、、

このようにナビゲーションメニューが表示されます。
ほとんどのサイトで採用されているのを見たことがあると思います。

主に利用される場面: スマートフォンでのナビゲーションメニュー

アコーディオン

折りたたみ式のメニューを実装し、クリックで展開・折りたたみができるようにする機能です。

プラスを押すと下に開きます。

主に利用される場面: F&Qなどのセクション

スライドショー

数枚の画像がスライドで表示される機能です。

主に利用される場面: 情報の整理・切り替え表示

タブメニュー

タブを切り替えるインターフェースです。

主に利用される場面: 情報の整理・切り替え表示

モーダルウィンドウ

ポップアップ式のモーダル表示をする機能です。

主に利用される場面: 重要な通知、ユーザー入力、追加情報の表示

ここまで説明した機能のほかにもさまざまなものが表現できます。
ちなみに僕はハンバーガーメニューを最初に作りました。
ぜひ簡単な物から作ってみてください。

このブログにはほかにもweb制作に関する記事を載せています。
ぜひ参考にしてみてください!

コメント