サイトのヘッダー部分について、よく使用するコードをスニペットとして置いておきます。
動作イメージ
スマホではハンバーガーメニューで動作。
- クリックするとアイコンがアニメーションで ✕ になる
- 画面中央から広がるようにメニューが展開
パソコンではロゴが左、メニューが右に表示される。
- メニューをマウスホバーすると下線が引かれる
前提条件
jQueryを使うので、<head>タグ内に以下の記述が必要。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>コード
See the Pen Untitled by sakabonji (@-hiro60) on CodePen.
※パソコン版を確認する場合は、「0.25x」をクリックするか、コードを非表示にして「0.5x」以下をクリック。
コメント