Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@facultyoflaw11

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

More than 1 year has passed since last update.

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.

4
Help us understand the problem. What is going on with this article?
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
facultyoflaw11
GeeksalonというプログラミングコミュニティでRailsやWeb開発のメンターをしていました。 ソフトウェアエンジニアの畑で日々農作をしてます 将来は、世界の人々の生活をより豊かにできるプロダクトを開発したいです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?