jQuery

【jQuery】ハンバーガーメニュー作ってみました

jQueryでアコーディオンメニューを作るときの方法についてまとめます。
私自身の備忘録として残しています。

ハンバーガーメニューをつくる

See the Pen ハンバーガーメニュー by momo (@momo-cha) on CodePen.light

HTMLを書く

アイコンにはFontAwesomeを起用

クリックするためのハンバーガーアイコンは
FontAwesomeのアイコンを利用しました。

私はダウンロードではなく、CDNで読み込む方法を利用しています。

Font Awesomeの使い方

①下記のURLをHTMLに貼り付けます。

<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>

②公式サイトのアイコン一覧から
使いたいアイコンを選んでクリック

③HTMLコードをコピー、貼り付け

CSSを書く

ポイントは下記の通り。

  • positionを使いこなす
  • アイコンは、z-indexで位置を一番上へ

jQueryを書く

ポイントは下記の通り。

  • デフォルトは「hide」で非表示
  • 「toggle」で表示