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

f:id:gharuto:20201004224834j:image

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

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

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

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

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

その為、

  • ハンバーガーメニュー
  • アコーディオン
  • ページTOPボタン

この3つに関しては、

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

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

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

スポンサーリンク

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

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

【2020年最新!コピペだけ!】おしゃれなハンバーガーメニュー【21個まとめ】 | 世界一わかりやすいWeb制作

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

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

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

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

ありがたやありがたや。

アコーディオンの作り方でおすすめのサイト。

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

1つ目はこちら↓

【jQuery】矢印付きアコーディオンメニュー3選【コピペOK】 – ブログの設置

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

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

2つ目はこちら↓

CSSでアコーディオンメニューを作成する方法【初心者向け】 | TechAcademyマガジン

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

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

ページTOPボタンの作り方でおすすめのサイト。

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

【コピペOK!】ページトップボタンを簡単に実装する方法

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

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

まとめ。

いかがでしたか?

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

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

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

コメント

タイトルとURLをコピーしました