Help us understand the problem. What is going on with this article?

【ハンバーガーメニュー】CSSだけでハンバーガーメニューの実装

CSSだけでハンバーガーメニューの実装

ここでは、CSSだけでハンバーガーメニューを実装していきます!

html
<header>
      <input id="menu-cb" type="checkbox" value="off">
      <label id="menu-icon" for="menu-cb"></label>
      <div id="ham-menu">
        <ul class="header-items-sp">
          <li class="header-item-sp">Home</li>
          <li class="header-item-sp">Works</li>
          <li class="header-item-sp">Contact</li>
        </ul>
      </div>
      <ul class="header-items">
        <li class="header-item"><a href="">Home</a></li>
        <li class="header-item"><a href="">Works</a></li>
        <li class="header-item"><a href="">Contact</a></li>
      </ul>
</header>
css
* {
    padding: 0;
    margin: 0;
  }
  li {
    list-style:none;
  }

  /* header */
  header {
      background-color: rgb(30,40,54);
      height: 50px;
      display: flex;
      justify-content: center;
  }
  .header-items {
      display: flex;
      align-items: center;
      padding-right: 3%;
  }
  .header-item {
      margin-left: 65px;
  }
  .header-item a {
      text-decoration: none;
      color: #fff;
      font-weight: bold;
  }

  /* header hamburger */
  #ham-menu,
  label#menu-icon {
      display: none;/*768px以上のWindow幅の場合は表示しないようにする*/
  }
  #ham-menu {
      background-color: #fff; /*メニュー背景色*/
      box-sizing: border-box;
      height: 100%;
      padding: 10px 40px; /*メニュー内左右上下余白*/
      position: fixed;
      right: -100%; /*メニュー横幅 width と合わせる*/
      top: 0;
      transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
      width: 100%; /*メニュー横幅*/
      z-index: 1000;
      text-align: center;
  }
  #menu-icon {
      background-color: rgb(30,40,54); /*アイコン部分 ハンバーガー中央色*/
      border-radius: 10px; /*角丸*/
      color: #333; /*アイコン(フォント)色*/
      cursor: pointer;
      display: block;
      font-size: 50px; /*アイコン(フォント)サイズ*/
      height: 5px; /*アイコン縦高さ*/
      line-height: 50px; /*縦位置中央化*/
      position: fixed;
      right: 10px;
      text-align: center;
      top: 20px;
      width: 30px; /*アイコン横幅*/
      transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
      z-index: 1001;
      transition: 1s;
  }
  #menu-icon::before {
      content: '';
      background-color: rgb(30,40,54); /*アイコン部分 ハンバーガー中央色*/
      border-radius: 10px; /*角丸*/
      display: block;
      height: 5px;
      width: 30px;
      position: absolute;
      top: -10px;
      transition: 1s;
  }
  #menu-icon::after {
      content: '';
      background-color: rgb(30,40,54); /*アイコン部分 ハンバーガー中央色*/
      border-radius: 10px; /*角丸*/
      display: block;
      height: 5px;
      width: 30px;
      position: absolute;
      top: 10px;
      transition: 1s;
  }
  #menu-cb {
      display: none; /*チェックボックス本体は見えないようにしている*/
  }
  #menu-cb:checked ~ #ham-menu {
      transform: translate(-100%); /*メニュー本体横幅 width と合わせる*/
      text-align: center;
  }
  #menu-cb:checked ~ #menu-icon,
  #menu-cb:checked ~ #menu-icon::before,
  #menu-cb:checked ~ #menu-icon::after {
      background-color: rgb(30,40,54); /*開示の際に、バーの色を黒色に変化させる*/
  }
  #menu-cb:checked ~ #menu-icon { 
      background-color: #fff;  /*中央バーを白色にして不可視に*/
  }
  #menu-cb:checked ~ #menu-icon::before {
      transform: rotate(135deg);
      transition: 1s;               /*上方バーを黒色にして傾ける*/
      top: 0px;
  }
  #menu-cb:checked ~ #menu-icon::after {
      transform: rotate(-135deg);
      transition: 1s;              /*下方バーを黒色にして傾ける*/
      top: 0px;
  }

  @media screen and (max-width: 768px) {
      /* hewder */
      header {
          position: absolute;
      }
      .header-items {
          z-index: 10;
          display: none;
      }
      /* header hamburger */
      #ham-menu,
      label#menu-icon {
          display: block;
      }

      /* firstview */
      .firstview {
          height: 100vh;
      }
      .firstview-imagearea {
          width: 55%;
          background: red;
          height: 300px;
          position: absolute;
          top: 100px;
          left: 50px;
      }
      .firstview-infoarea {
          position: absolute;
          top: 230px;
          right: 40px;
          width: 46%;
      }
  }

以下のような感じになります!

See the Pen ハンバーガーメニュー by Kazuhito Nakayama (@kazuhito-nakayama) on CodePen.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした