CSSとJavaScriptでハンバーガーメニューを作る方法

写真でDevin Edwards on Unsplash
最近、私は特にCSSとアニメーションで、私のフロントエンド技術を改善することに多くの時間を投資していました.彼らが言うように、何か良いことをしたい場合は、多くの練習をする必要があります.私のポートフォリオに取り組んでいる間、私はハンバーガーメニューアイコンを必要としました.

必要条件

あなたが沿って従う必要があるすべての基本的なHTML、CSS、およびJavaScriptの知識です.

HTMLを書く

HTMLはとても簡単です.私達はアイコンのためのコンテナ、メニューのアイコンおよびそれの中にネストした3つのラインを有する.

<div class="container">
  <div class="menu-icon">
    <span class="line-1"></span>
    <span class="line-2"></span>
    <span class="line-3"></span>
  </div>
</div>

ページの基本的なスタイル

これは、アイコンを中心にして、すべてが素晴らしく見えるようです.

body {
  background: #09182F;
}

.container {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

メニューアイコンのスタイル

使用grid , メニューアイコンと入れ子になった行を簡単に配置できます.place-items: center つの機能を実行するスイスアーミーナイフですalign-items: center and justify-items: center .

.menu-icon {
  display: grid;
  place-items: center;
  height: 55px;
  width: 50px;
  cursor: pointer;
}

3行のスタイル

入れ子になった行を次のスタイルに追加します.我々は、アイコンをより一般的に見えさせるために、第1および第2の線異なる幅を与えています.

.menu-icon {
...

  & > span {
    width: 50px;
    height: 3px;
    background: red;
    display: block;
    transition: all 0.3s ease-in-out;
  }
}

.line-1 {
  width: 42px;
  justify-self: end;
}

.line-2 {
  width: 35px;
  justify-self: end;
}

ホバー効果

ホバー効果については、1行目と2行目の幅を変える.移行は、滑らかで継ぎ目のない幅の間でスイッチを作ります.

.menu-icon {
...

  &:hover span:nth-child(1) {
    width: 35px;
  }

  &:hover span:nth-child(2) {    
    width: 40px;
  }
}

アイコンをクリックする

ここで楽しい部分が来る.我々は、最初の行と3行目をクリックしてXを形成するときにクリックし、2行目を消すように回転させる.

.menu-icon {
...

  &.active span:nth-child(1) {
    transform-origin: center center;
    transform: rotate(-45deg) translate(-12px, 12px);
    width: 55px;
  }

  &.active span:nth-child(2) {
    transform: translateX(10px);
    opacity: 0;
  }

  &.active span:nth-child(3) {
    transform-origin: center center;
    transform: rotate(45deg) translate(-15px, -14px);
    width: 55px;
  }
}

時menu-icon をクリックします.active クラスが追加され、第1および第2lines をターゲットにし、rotate & translate Xを形成するプロパティ、また、それを使用して移動することによってtranslateX と不透明度を0に設定します.

JavaScriptの追加

残っている唯一のことは、少しのJSactive クラス.

const menuIcon = document.querySelector('.menu-icon');

function toggleMenuIcon() {
  menuIcon.classList.toggle('active')
}

menuIcon.addEventListener('click', toggleMenuIcon);

そして、あなたは行きます.私たち自身のカスタマイズハンバーガーメニューのアイコン.最終結果は以下です.
あなたが何か新しいことを学んだら親切にコメントを残す.