lorem-co-ltd0ハンバーガーメニューの作り方でググると表示方法はたくさん見つかるのですが、閉じる方法については解説されていないことが見られます。閉じる方法はとても簡単な仕組みで実現できるので今回紹介するものをコピペで保存してもらえると良いかと思います。動画もあるので必要に応じて使ってください。クリックしたらハンバーガーメニューを閉じる方法まずHTMLとCSSでハンバーガーメニューを簡単に作っておきます。100px;}赤い背景になっている部分がメニューが表示されるエリアとして、ボタンをクリックすると閉じることを目指します。「閉じる」と考えるので難しそうに思えるのですが、「画面の外に移動させる」とすれば非常に簡単になります。プログラミングあるあるなんですが、どストレートに実現したい内容を探すのも良いのですが「正攻法の他にルートがないか?」という発想も非常に大事になってきます。CSSでは「移動」にtransformという関数が用意されています。CSSを以下のように修正してみます。100px;}画面の外にメニューを移動させることができました、左端に少しだけ残っているのですが分かりやすくするためにしているためです。)とすると「要素の移動」を実現できます。引数は2つあって、第一引数に水平方向の移動数、第二引数に垂直方向の移動数をpxや%で指定することになっています。左方向に500px移動させる。0);}~省略~translateに動きをつけることでアニメーションにするtranslateで移動させることで「画面から消えているように見える」ことが分かりました。あとはアニメーションっぽい動きをつけるだけです。今回は「ボタンをクリックするとtranslateで移動させる」という形を作ります。HTMLは特に変更なしで大丈夫です。</body></html>続いてCSSは以下のようにコードを追加します。100px;}まず先ほどのtranslateのコードですが「.box」ではなく「.box.hide」という新しいセレクタ名を作って、そちらに移動させました。「boxというclass名がある要素に、hideというクラス名を追加したときにメニューを閉じる」ということを行うためです。)を実行する」としました。transitionプロパティについては別の記事でも解説しているのでご覧ください。【アニメーション】JavaScriptをtransitionの後に実行したい続いてJSファイルを新規で作成して以下のようにコードを作成します。}});ボタンをクリックするという仕組みはaddEventListenerのclickイベントで作っています。条件分岐でboxというクラス名の要素に「hideが無ければhideを追加する」ということを行います。先ほどのCSSで「.box.hide」に対してtranslateで移動させることを記載していたので、こちらで上手く動作するはずです。ブラウザをリロードして実行してみましょう。ボタンをクリックするとメニューが画面の外に移動して「消えたように見える」ことになっていますね。CSSでtransitionを追加していたので、アニメーションっぽい動きにもなっています。説明の都合で画面に若干だけ見切れさせていますが、translateの引数の数字を変えれば画面から完全に消えさせることができるので調整してみてください。