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

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

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

Ads

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

こんな記事も書いています



オススメの本



Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

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

同じタグで検索

Ads
ページの先頭へ