LABWebフロントエンドコピペで使える様々なハンバーガーメニューアニメーションHamburgersマーツ2020.01.21Webフロントエンドスマホでは当たり前になってきているハンバーガーメニューですが、そのハンバーガーメニューをタップやクリックした時に少し変わったアニメーションを見せたい場合があるかと思いますが、Hamburgersを使うと手軽に実装できます。Suh氏によって作成されたものです。Hamburgersの使い方こちらからCSSデータをダウンロードします。ダウンロードしたデータをcssファイルに保存して読み込みます。href="humberger.css"&gt;[/sourcecode]ハンバーガーメニューを表示する部分です。「アニメーション一覧」からアニメーションさせたいクラス名を追記します。サンプルでは「hamburger–3dx」を追記しています。「-r」と付いているのはリバースアニメーションとなっています。hamburger–vortex-r最後にJavaScriptを記入します。サイトにはこれを追記する案内がないですが、これがないと動きません。false);});}&lt;/script&gt;[/sourcecode]必要なソースのみを使うCSSソースを見ると、全てのアニメーションパターンの記述がなされていますが、使用したいアニメーションが決まっている場合には、そこだけを抜き出した方がファイルが軽くなります。1行目から56行目までが表示に必要な部分で、あとはコメントで「3DX」のように記述している箇所がアニメーションの必要箇所となります。初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方SHARE記事作成者の紹介マーツWebフロントエンドSONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep!にてeizとして記事執筆中。公式XWeb制作・アプリ開発に関する、UI/UX情報、エンジニア向け情報、イラストテクニックをお届けしています。