アコーディオンパネル
WEB先案内
WEB先案内 ITブログ
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
今回はハンバーガーメニューをクリックした時のアニメーションを作りました。
ハンバーガーメニューを使う目的と使いどころはこんな感じです。 目的:ナビゲーションを収納し、パネルの開閉を明示 使いどころ:クリック
See the Pen 3本線が「×」に by Web Navigator (@web-navigator) on CodePen.
See the Pen 2本線が「×」に by Web Navigator (@web-navigator) on CodePen.
See the Pen 3本線が1本線に by Web Navigator (@web-navigator) on CodePen.
See the Pen MENUがCLOSEに by Web Navigator (@web-navigator) on CodePen.
See the Pen MENUが「×」に by Web Navigator (@web-navigator) on CodePen.
See the Pen 3本線が回転して「×」に by Web Navigator (@web-navigator) on CodePen.
See the Pen 3本線が奥行きを持って回転して「×」に by Web Navigator (@web-navigator) on CodePen.
See the Pen 3本線が横方向に回転して「×」に by Web Navigator (@web-navigator) on CodePen.
See the Pen 3本線がジャンプして「×」に by Web Navigator (@web-navigator) on CodePen.
ユーザーを的確に情報に導くテキストナビゲーションを作ってみようと思います\\\\٩( ‘ω’ )و ////