>CSSコピペで使える様々なハンバーガーメニューアニメーションHamburgersツイートスマホでは当たり前になってきているハンバーガーメニューですが、そのハンバーガーメニューをタップやクリックした時に少し変わったアニメーションを見せたい場合があるかと思いますが、Hamburgersを使うと手軽に実装できます。Suh氏によって作成されたものです。Hamburgersの使い方こちらからCSSデータをダウンロードします。https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.cssダウンロードしたデータをcssファイルに保存して読み込みます。href="humberger.css">ハンバーガーメニューを表示する部分です。「アニメーション一覧」からアニメーションさせたいクラス名を追記します。サンプルでは「hamburger–3dx」を追記しています。「-r」と付いているのはリバースアニメーションとなっています。hamburger–3dxhamburger–3dx-rhamburger–3dyhamburger–3dy-rhamburger–3dxyhamburger–3dxy-rhamburger–arrowhamburger–arrow-rhamburger–arrowalthamburger–arrowalt-rhamburger–arrowturnhamburger–arrowturn-rhamburger–boringhamburger–collapsehamburger–collapse-rhamburger–elastichamburger–elastic-rhamburger–emphatichamburger–emphatic-rhamburger–minushamburger–sliderhamburger–slider-rhamburger–spinhamburger–spin-rhamburger–springhamburger–spring-rhamburger–standhamburger–stand-rhamburger–squeezehamburger–vortexhamburger–vortex-r最後にJavaScriptを記入します。サイトにはこれを追記する案内がないですが、これがないと動きません。}</script>必要なソースのみを使うCSSソースを見ると、全てのアニメーションパターンの記述がなされていますが、使用したいアニメーションが決まっている場合には、そこだけを抜き出した方がファイルが軽くなります。1行目から56行目までが表示に必要な部分で、あとはコメントで「3DX」のように記述している箇所がアニメーションの必要箇所となります。初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方ツイート記事作成者の紹介マーツ(その他)ビールが好き。最近はワインと日本酒もいいなぁと思える今日この頃。プロモーションなど多数のキャンペーンサイトやランディングページの制作実績があります。×SNSでも情報配信中!ぜひご登録ください。Market花火大会シミュレーターSHARESHAREWeb制作・アプリ開発に関する、UI/UX情報、イラストテクニック、エンジニア向け情報をお届けしています。