【jQuery】ハンバーガーメニュー・アコーディオン・ページTOPボタンを実装する上で、参考にすべきおすすめサイトまとめ。

今までは模写コーディングでサイトに動きを付ける際に、

プロゲートで習った事を元に自己流でjQueryなどを書いていましたが、

これから案件でサイトに動きを付ける際はそうはいかない。

自己流ではなくしっかりとしたものを実装しなければいけません。

そして、すぐに実装できるようにサンプルコードを用意しておいた方がいいと思うんですよね。

その為、

この3つに関しては、

技術系のサイト(ブログ等)で公開されているコードを参考に、サンプルコードを作っておくことにしました。

ググると沢山のやり方が出てきますが、色々調べた結果、自分が参考にする事にしたおすすめサイトをまとめてみました。

これは自分へのメモでもあります。

ハンバーガーメニューの作り方でおすすめサイト。

ハンバーガーメニューの作り方でおすすめのサイトはこちら↓

このサイト、かなりいいですよ。

メニューが、①ふわっと出てくるパターン②上から出てくるパターン③横から出てくるパターン、の3通りあるし、

ハンバーガーのアイコン自体(三本線)のアニメーションも7種類から選べます。

しかもコードもそれほど難しい訳ではない。

ありがたやありがたや。

アコーディオンの作り方でおすすめのサイトは、2つあります。

1つ目はこちら↓

こちらはシンプルなアコーディオンですね。

ナビゲーションで使うのではなく、Q&Aなどで使えそうです。

2つ目はこちら↓

こちらもシンプルなアコーディオンですが、「アコーディオンメニュー」なのでナビゲーションに使えそうです。

そしてjQueryを使わずにCSSだけで作っている所にも注目です。

ページTOPボタンの作り方でおすすめのサイトがこちら↓

こちらもシンプルなページTOPボタンですが、「ふわっ」と現れたり、丸バージョンと四角バージョンが選べたりと、うれしい内容となっています。

コードもとても簡単です。

いかがでしたか？

今回は、ハンバーガーメニュー、アコーディオン、ページTOPボタンを実装する上で参考にすべきおすすめサイトをご紹介しました。

これで、かっこいいアニメーションを付けることができます。

是非参考にしてみて下さい。

テックアカデミーが初心者向け副業コースを始めました↓