クリックするとバツ印になるアイコンをCSSで自作しました

以前まで画像や合同（≡）を使っていたのですが、今回初めて自作したのでメモです。やり方は意外と簡単。

仕組み

ざっくりとこんな流れでこんな動きが必要というものを書き出しました。

作成（コード）

３本の線を用意する

position:relativeを指定したdiv内で、spanとその疑似要素（before・after）を縦1pxと幅を指定して、absoluteで位置を指定し、メニューアイコンを作ります。

■HTML

＜div class="menu-open"＞
    ＜span class="menu-btn"＞＜/span＞
＜div＞

■CSS

.menu-open{
    width: 100px;
    height: 80px;
    padding: 10px;
    position: relative;
    cursor: pointer;
}
.menu-open span {
  height: 1px;
  width: 80px;
  background-color: #b6b6b6;
  display: block;
  position: absolute;
  top: 20px;
}

.menu-open span::before {
  height: 1px;
  width: 80px;
  background-color: #b6b6b6;
  display: block;
  position: absolute;
  content: '';
  top: 15px;
  -webkit-transition: .3s;
  transition: .3s;
}

.menu-open span::after {
  height: 1px;
  width: 80px;
  background-color: #b6b6b6;
  display: block;
  position: absolute;
  top: 30px;
  content: '';
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

ここで使用している「transition」は、同じ要素がなんらかの変化をする時のかかる時間を設定します。ざっくりいうとアニメーションのようなものですね。マウスホバーで色がじわっと変わるアレとかも。

CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。

カスケーディングスタイルシート | MDN　

個人的な体験なんですが、以前は何故か効かない！という場合も多かったのですが、transitionは基本的に「同じ要素」で、「開始と変化後」が必ずあることが条件で、動かない時はこれのどちらかが抜けていることが多いです。

jQueryでclassを操作する

今回はjQueryのメソッド「toggleClass」を使い、クラスの付与と削除で表示を変えました。

toggleClassはクリックなどで実行することで指定したクラス名を取り外しできる便利なメソッドです。

■jQuery

$(function(){
    $('.menu-open').click(function(){
	$('.menu-btn').toggleClass('close');
    });
});

一旦これで、クリックすることにより、クラスが追加され、クラス名が既についている場合は削除されます。

class付与後の動きを指定する

上図の2、3にあたる部分を、新たに付与したクラス名に当てていきます。

cssの順番は先程の物より後に書きます。

■CSS

.menu-open span.close {
  background-color: rgba(80, 80, 90, 0);
}

.menu-open span.close:before {
  top: 15px;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.menu-open span.close:after {
  top: 15px;
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}

まずは１番上の線(背景色)の透明度を0にして、消しているように見せてから、

線に角度をつけるため、「transform」を使用しました。

CSS Transformsは CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。

CSS変形 – CSS:カスケーティングスタイルシート｜MDN

今回は２次元の移動なのでrotateZを使用して45°傾けました。軸は要素の中央なので、最初に位置を合わせています。

実装

これらを合わせることにより、三本線のメニューが×になるアニメーションの完成です。

こんな感じになりました！

最終更新：2020.11.20