codeazuki
@codeazuki

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

この特殊なハンバーガーメニューってどう作りますか?

実現したいこと

サイトこのようなハンバーガーメニューの処理はどのように記述すべきでしょうか?

ークリックすると右上から、円形の背景が出てくる
ー背景の出現後に、文字が傾いて出てきて、振り子のように反動でポジションにつく
ー文字ホバーで、1文字ずつ左から上に跳ねていく

0

3Answer

うまいことこのへんのを組み合わせるとそれっぽく出来ると思います.
サンプル的には"Pure CSS Fullscreen Navigation Menu"が一番手っ取り早いかな.

0Like

Comments

  1. @codeazuki

    Questioner

    cssと生のjsだけではきつかったので助かります!!!

  2. いやリンク先にある通り何ならCSSだけで実装できたりしますが……
    どれを使うかはお任せしますけれども.

ブラウザの機能 デベロッパーツール は活用されていますでしょうか?
デベロッパーツールでメニューボタンをクリックした後にどんなスタイルが適用されているか確認すれば、ある程度同じような動きを実装することができると思います。


背景の出現後に、文字が傾いて出てきて、振り子のように反動でポジションにつく

一例としてこちらの動きを実装してみました。
ほぼデベロッパーツールからスタイルをコピペしていくだけで、メニュー表示の動きを実装することができました。

See the Pen メニューの動き by yotty (@yotty) on CodePen.

0Like
  • ークリックすると右上から、円形の背景が出てくる

の組み合わせでどうでしょう。

  • ー文字ホバーで、1文字ずつ左から上に跳ねていく

はどうでしょう。

0Like

Your answer might help someone💌