CSSでハンバーガーメニューをアニメーションさせるときに参考になるサイト7選

このエントリーをはてなブックマークに追加

CSSでハンバーガーメニューをアニメーションさせるときに参考になるサイト7選

主にスマートフォンサイトを制作するときに使われる、開閉ボタンの三本選ですね。そこの開閉のアニメーションをCSSと簡単なjQueryでできます。その際作り方や動きの参考にいくつかサイトを紹介しますね。

CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ | NxWorld

http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

ひたすらハンバーガーアイコンを作ったので9種のソースを公開します! | 株式会社LIG

http://liginc.co.jp/180293

http://liginc.co.jp/180293

jQueryとCSS3でマテリアルデザインのハンバーガーメニューを実装してみる | Creator Clip

http://creatorclip.info/2015/01/material-design-hamburger-menu/

http://creatorclip.info/2015/01/material-design-hamburger-menu/

Hamburgers by Jonathan Suh

https://jonsuh.com/hamburgers/

https://jonsuh.com/hamburgers/

Three Line Menu Navicon | CSS-Tricks

https://css-tricks.com/three-line-menu-navicon/

https://css-tricks.com/three-line-menu-navicon/

Animating CSS-Only Hamburger Menu Icons

http://speckyboy.com/2015/04/02/animating-css-only-hamburger-menu-icons/

http://speckyboy.com/2015/04/02/animating-css-only-hamburger-menu-icons/

Animating CSS-Only Hamburger Menu Icons – Call Me Nick

http://callmenick.com/post/animating-css-only-hamburger-menu-icons

http://callmenick.com/post/animating-css-only-hamburger-menu-icons

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ