たけるのプログラミング

作ったものとか、気ままにアップします。

ハンバーガーメニューを作ってみた【jQuery】

こんにちは。

大学の期末テストやレポートが落ち着いて、やっとコーディングできます!

今回は、レスポンシブデザインにおいて必須と言っても過言ではない「ハンバーガーメニュー」を作っていきたいと思います!

こちらの記事を参考にさせてもらいました。
ハンバーガーメニュー(ドロワーメニュー)の作り方 | KUBOGEN

完成品


See the Pen
by sk (@sk232423)
on CodePen.


ソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
      <div class="hamburger_and_logo">
        <div class="hamburger">
          <span></span><!--ハンバーガーの棒たち-->
          <span></span><!--ハンバーガーの棒たち-->
          <span></span><!--ハンバーガーの棒たち-->
        </div>
        <img src="https://cdn.pixabay.com/photo/2017/11/10/05/05/youtube-2935416_1280.png" alt="" style="height:50px"><!--ヘッダーのロゴ-->
      </div>
        <nav class="menu"><!--横からでてくるメニュー-->
            <div class="menu_bottom_border"><!--線引くためのクラス-->
            <div class="menu-hamburger"><!--横からでてくるハンバーガー-->
                <span></span><!--横からでてくるハンバーガーの棒たち-->
                <span></span><!--横からでてくるハンバーガーの棒たち-->
                <span></span><!--横からでてくるハンバーガーの棒たち-->
            </div>
            <img src="https://cdn.pixabay.com/photo/2017/11/10/05/05/youtube-2935416_1280.png" alt="" style="height:50px"><!--ヘッダーのロゴ-->
            </div>
          <ul class="menu-content"><!--横からでてくるメニューの内容-->
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
          </ul> 
        </nav>
    <div class="menu-background"></div><!--ハンバーガー押されたら、背景をグレーにする-->
    </header>
    <p>テスト</p>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    //toggleは表示していたら非表示に、非表示の場合は表示にしてくれる!!!
   $(function(){
  $('.hamburger').click(function(){
    $('.menu').toggleClass('open');
    $('.menu-background').toggleClass('menu-background2');
  });
  $('.menu-hamburger').click(function(){
    $('.menu').toggleClass('open');
    $('.menu-background').toggleClass('menu-background2');
  });
  $('.menu-background').click(function(){
    $('.menu').toggleClass('open');
    $('.menu-background').toggleClass('menu-background2');
  });
});
</script>
</html>

CSS

body {
    margin: 0;
    background-color:rgb(248, 248, 248);
  }
  /*----------------------------ハンバーガーメニュー----------------------------*/
  header{
      height:50px;
      position: relative;
      background-color: white;
  }
  .hamburger_and_logo{
    display: flex;
  }
  .hamburger {
    width: 30px;
    height: 30px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .hamburger:hover {
    cursor: pointer;
  }
  .hamburger span {
    background: black;
    width: 20px;
    height: 2px;
    position: absolute;
  }
  .hamburger span:nth-of-type(1) {
    top: 19px;
  }
  .hamburger span:nth-of-type(3) {
    bottom: 19px;
  }
  /*---------------------メニュー-----------------------*/
  .menu {
    z-index:3;
    width: 300px;
    height: 100vh;
    background-color: white;
    color: black;
    position: absolute;
    top:0;
    transform: translate(-300px);
    transition: 0.3s ease-out;
  }
  .menu_bottom_border{
    display: flex;
      height:50px;
      border-bottom: 1px solid rgb(225, 225, 225);
  }
  .menu-hamburger{
    width: 30px;
    height: 30px;
    padding: 10px;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-hamburger:hover {
    cursor: pointer;
  }
  .menu-hamburger span {
    background: black;
    width: 20px;
    height: 2px;
    position: absolute;
  }
  .menu-hamburger span:nth-of-type(1) {
    top: 19px;
  }
  .menu-hamburger span:nth-of-type(3) {
    bottom: 19px;
  }
  .menu-content{
      margin-top: 50px;
  }
  li {
    margin-bottom: 10px;
  }
  /*----------------------メニューにopenクラスがついたときのスタイル------------------------*/
  .menu.open {
    transform: translate(0);
    transition: 0.3s ease-out;
  }
  /*--------------背景を黒くする、押したらメニューを閉じる--------------------*/
  .menu-background {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  opacity: 0; /* 透明度を0にすることで隠す */
  transition: opacity 0.3s; /* 透明度の0→1になる速度 */
}
.menu-background2{
  width: 100%;
  height: 100%;
  opacity: 1; /* メニューが表示されているときには背景が表示 */
}

感想

jQuery書きやすい!今回作ったヘッダーのデザインはYouTubeを参考にしました。ハンバーガーメニューは、三を押すと×に変化するデザインが多いですが、
YouTubeハンバーガー自体にアニメーションが無いんですよね。
最近、色々なサイトを見る際にこのサイトbootstrap使ってるな!と感じることが増えてきました。bootstrapでヘッダーを作りたい際はこちらから↓
getbootstrap.jp