作成方法：メニューアイコン

CSSでメニューアイコンを作成する方法を学びます。

アイコンライブラリを使用していない場合、CSSで基本的なメニューアイコンを作成することができます：

メニューアイコン：

自分で試してみてください

アニメーションメニューアイコン（クリックすると）：

自分で試してみてください

メニューアイコンを作成する方法

第1ステップ - HTMLの追加：

<div></div>
<div></div>
<div></div>

第2ステップ - CSSの追加：

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

自分で試してみてください

例説明：

width および height 属性は各バーの幅と高さを指定します。

各バー間のスペースを作成するために、黒い背景色と上下のマージンを追加しました。

アニメーションアイコン

CSSとJavaScriptを使用して、クリック時にメニューアイコンを「キャンセル/削除」アイコンに変更します：

第1ステップ - HTMLの追加：

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

第2ステップ - CSSの追加：

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* 最初のバーを回転 */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* 第二のバーをフェードアウト */
.change .bar2 {opacity: 0;}
/* 最後のバーを回転 */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

第3ステップ - JavaScriptの追加：

function myFunction(x) {
  x.classList.toggle("change");
}

自分で試してみてください

例説明：

HTMLとCSS：前回と同じスタイルを使用しましたが、今回は各<div>要素にコンテナ要素を囲み、各要素にクラス名を指定しました。

ユーザーがdiv（ライン）にマウスオーバーしたときに指標シンボルを表示するためのコンテナ要素です。クリックされたときには、JavaScript関数が実行され、新しいクラス名が追加され、各水平ラインのスタイルが変更されます：最初のラインと最後のラインは「x」の文字に変形し、回転します。中央のラインは徐々にフェードアウトし、見えなくなりまします。