JavaScript

CSSでハンバーガー（三本線）をバツ（×）に切り替える【スマホメニューに使える】

  /

ウェブサイトやアプリケーションでよく目にする「ハンバーガーメニュー」、つまり三本線のアイコンがクリックされると「バツ（×）」に変わるメニューを実装する方法をご紹介します。特にスマートフォンやタブレットなどのデバイスで、限られた画面スペースを効率よく使うためのメニューボタンとして非常に便利です。

今回の記事では、簡単に実装できるように、jQueryのtoggleClassを使ってメニューボタンを切り替える方法を解説します。このシンプルなスクリプトは、HTML、CSS、JavaScriptの基本的な知識さえあれば実装可能です。この記事を読めば、あなたもハンバーガーメニューの実装ができるようになります。スマートフォンサイトやレスポンシブデザインを採用したサイト制作に活用できるスキルを学びましょう。

Contents

ハンバーガー（三本線）とバツ（×）ボタンの仕組みとは？

まず、ハンバーガーメニューの基本的な仕組みを理解しましょう。三本線のハンバーガーメニューは、シンプルなデザインながらも非常に直感的に操作できます。これがクリックされると、×印に変わり、ユーザーに「メニューを閉じる」という意味を伝える役割を果たします。

このような視覚的な切り替えは、CSSでスタイルを変更し、JavaScriptでユーザーのアクションに応じてそのスタイルを動的に変更することで実現されます。具体的には、クリックイベントをトリガーにしてCSSクラスを付けたり削除したりすることで、三本線が回転して×印に変化します。実際のコードでどのようにこれが行われるのか、次のセクションで詳しく説明します。

ハンバーガーメニューのCSS設定方法

ハンバーガーメニューの外観をCSSで設定します。このCSSでは、三本線の状態と、クリックされた後にバツ印へ変化する状態の両方を定義します。まず、メニュー自体は50px四方のボックスで、各線はこの中に配置されます。線の太さや間隔などは、好みに応じて調整可能です。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:18px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
}

.menu{
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 0 auto;
    position: relative;
}
.menu span{
    display: block;
    margin: 0;
    border: none;
    width: 50%;
    height: 3px;
    background: #000;
    transform-origin:0% 50%;
    position: absolute;
    top: 12px;
    left: 25%;
    transition: .3s;
}
.menu span:nth-of-type(2){
    top: 21px;
}
.menu span:nth-of-type(3){
    top: 30px;
}
.close span{
    left: 30%;        
}   
.close span:nth-of-type(1){
    transform: rotate(45deg);
    width: 52%;
}
.close span:nth-of-type(2){
    opacity: 0;
}
.close span:nth-of-type(3){
    top: 30px;
    transform: rotate(-45deg);
    width: 52%;
}
</style>

このコードでは、.menuクラスが三本線の状態を表し、.closeクラスがバツ印の状態を表します。CSSのtransitionプロパティを使用することで、アニメーションのように線がスムーズに回転するように設定されています。nth-of-typeで特定の線の位置を指定し、それぞれが正確に配置されるように調整します。

HTMLでのメニューボタンの実装

次に、HTMLでのメニューボタンの実装方法を見ていきましょう。div要素の中にspanタグを3つ配置し、それぞれがハンバーガーメニューの線になります。

<div class="menu">
  <span></span>
  <span></span>
  <span></span>
</div>

このシンプルな構造がハンバーガーメニューの骨組みです。各spanタグがCSSでスタイリングされ、三本線を表現します。そして、JavaScriptのクリックイベントによって、このdiv要素にcloseクラスが追加されると、線が回転してバツ印に変化します。

JavaScriptでメニューボタンを操作する

次はJavaScriptでの操作方法です。ここでは、jQueryを使って簡単にハンバーガーメニューを操作できるようにします。まず、jQueryのライブラリ（jquery-2.2.0.min.jsファイル）を読み込み、クリックイベントが発生した際にクラスの切り替えを行います。

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

    $(".menu").click(function() {
        $(this).toggleClass("close");
    });

});
</script>

このスクリプトは非常にシンプルですが、強力です。$(“.menu”)でメニューボタンを選択し、.click()でクリックイベントを設定しています。toggleClass(“close”)によって、クリックするたびにcloseクラスが追加・削除され、CSSによって三本線がバツ印に変わるという仕組みです。

CSSでハンバーガー（三本線）をバツ（×）に切り替えるメニューボタンデモページ

実際にこのコードを試してみましょう。以下のリンクから、ハンバーガーメニューがどのように動作するか確認できます。このサンプルは、単純なハンバーガーメニューの実装にとどまらず、応用次第で多くの場面で役立つ機能を提供します。

CSSでハンバーガー（三本線）をバツ（×）に切り替えるメニューボタンデモ

ぜひご自身で確認し、このサンプルを基にさまざまなカスタマイズを試してみてください。例えば、線の色を変えたり、アニメーションの速度を調整したりすることで、よりユニークで魅力的なメニューボタンを作成できます。

まとめ

今回の記事では、CSSとJavaScriptを組み合わせて、シンプルなハンバーガーメニューを作成する方法を紹介しました。このようなメニューボタンは、スマートフォンサイトやアプリケーションのユーザーインターフェースにおいて非常に重要です。基本的な仕組みを理解することで、さまざまな場面で応用できるスキルを身につけることができます。

さらに、デザインやアニメーションを工夫することで、ユーザーにとって使いやすく、見た目もおしゃれなメニューボタンを作ることができます。今回のサンプルを元に、あなた自身のプロジェクトに活用してみてください。技術の基礎を押さえつつ、クリエイティブな発想でより魅力的なウェブサイトを作り上げていきましょう。

　
※流用される場合は自己責任でお願いします。
　headタグ内のGoogleアナリティクスタグは流用しないで下さい。

メニューボタン バツボタン ×css ハンバーガーメニュー
関連記事