ハンバーガーメニューの作り方【jQuery】

この記事では，ハンバーガーメニューの作り方について紹介します．

ハンバーガーメニューと言っても，ハンバーガー屋のメニューのことではありません．

と〜げ

webサイトの幅を狭めると，ヘッダーのメニューが消えて，ハンバーガーのように三本線が現れて，これをクリックするとメニューが表示されるやつです．

↓↓↓↓↓↓↓↓↓↓↓

via GIPHY

では，上のようなハンバーガーメニューを作っていきます．

と〜げ

すべてのファイル（html，css, jsファイル）に関しては，最後に貼っておきます．必要に応じてコピペしてください．

ハンバーガーメニューの作り方

See the Pen
GLvVad by Shinji Goto (@YOSHITAKA3)
on CodePen.

ポイント

PC幅のときは，ハンバーガー3本線（class=”humberger-wrap）は非表示
SP（スマホ）幅のときは，ハンバーガ3本線（class=”humberger-wrap）を表示，ヘッダーメニュ（nav）ーを非表示させます．
jQueryで，ハンバーガー3本線（.hunmberger-wrap）をクリックすると，ハンバーガ3本線（class=”humberger-wrap）と，ヘッダー（header）にopenedというクラスを追加する
ハンバーガー3本線をクリックしたときopenedクラスを利用して，cssで，3本線の変化やメニューの形を整える．

htmlファイル


<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--css-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">

    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body class="home">
    <!--header-->
    <header>
      <div class="inner">
        <!--ハンバーガー3本線-->
        <div class="humberger-wrap">
          <div class="humberger-border-1"></div>
          <div class="humberger-border-2"></div>
          <div class="humberger-border-3"></div>
        </div>
        <!--一般的なヘッダーメニュー-->
        <nav>
          <ul class="header-navigation">
            <li class="header-navigation">
              <a href="#"><span>メニュー1</span></a>
            </li>
            <li class="header-navigation">
              <a href="#"><span>メニュー2</span></a>
            </li>
            <li class="header-navigation">
              <a href="#"><span>メニュー3</span></a>
            </li>
            <li class="header-navigation">
              <a href="#"><span>メニュー4</span></a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <!--js-->
    <script src="script.js"></script>
  </body>
</html>

<!doctype html>

<head>

</head>

</div>

<nav>

</li>

</li>

</li>

</li>

</ul>

</nav>

</div>

</header>

</body>

</html>

cssファイル


* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body {
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.67;
    overflow: hidden;
    letter-spacing: .05em;
    color: #333;
    background: #fff;
}
a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
}
ol, ul {
  list-style:none;
}

/*--header--*/
header {
    font-size: 15px;
    font-size: .9375rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    letter-spacing: .05em;
    background:#f1f1f1;
}

header .inner {
    display: flex;
    width: 100%;
    height: 60px;
    flex-flow: row wrap;
    justify-content: center;
}

/*ハンバーガー3本線を非表示*/
header .humberger-wrap {
  display:none;
}

header nav {
  position:relative;
}

header nav, header ul {
  display:flex;
}

header nav li {
  cursor:pointer;
}

header nav a {
  line-height:60px;
  display:block;
  height:60px;
  padding:0 30px;
}

@media screen and (max-width:901px) {


  /*3本線の表示*/
  header .humberger-wrap {
    display:block;
  }

  /*3本線の位置*/
  header .humberger-wrap {
    position: absolute;
    top: 0;
    right: 20px;
    width: 40px;
    height: 100%;
    cursor: pointer;
  }

  /*humberger-border1,2,3の線*/
  header .humberger-wrap [class*=humberger-border]  {
    position: absolute;
    width: 40px;
    height: 2px;
    transition: .4s all ease;
    transform-origin: center center;
    background: #333;
  }
  /*1本目の線*/
  header .humberger-wrap .humberger-border-1 {
    top:20px;
    right:0;
  }
  /*2本目の線*/
  header .humberger-wrap .humberger-border-2 {
    top:30px;
    right:0;
  }
  /*3本目の線*/
  header .humberger-wrap .humberger-border-3 {
    top:40px;
    right:0;
  }

  /*開閉ボタンopen時の横線1本目*/
	header .humberger-wrap.opened .humberger-border-1 {
		top: 30px;
		transform: rotate(45deg);
	}
	/*開閉ボタンopen時の横線2本目*/
	header .humberger-wrap.opened .humberger-border-2 {
    top: 30px;
		transform: rotate(-45deg);
	}
	/*開閉ボタンopen時の横線3本目*/
	header .humberger-wrap.opened .humberger-border-3 {
    top: 30px;
		transform: rotate(-45deg);
    opacity:0;
	}
  /*メニューを非表示*/
  header nav {
    display:none;
  }

  /*open時に一番上のヘッダーの背景色を変化*/
  header.opened {
    background: #fff;
  }

  header.opened nav {
    display: block;
    min-height: 100vh;
    opacity: 1;
    top:60px;
  }

  header nav ul.header-navigation {
    flex-flow: column nowrap;
  }

  header nav ul.header-navigation li a {
    display: block;
    height: auto;
    margin: 0;
    padding: 10px 0;
  }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

* {

box-sizing: border-box;

margin:0;

padding:0;

}

body {

font-size: .9375rem;

font-weight: 400;

line-height: 1.67;

overflow: hidden;

letter-spacing: .05em;

color: #333;

background: #fff;

}

a {

cursor: pointer;

text-decoration: none;

color: #000;

}

ol, ul {

list-style:none;

}

/*--header--*/

header {

font-size: 15px;

font-size: .9375rem;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 60px;

letter-spacing: .05em;

background:#f1f1f1;

}

header .inner {

display: flex;

width: 100%;

height: 60px;

flex-flow: row wrap;

justify-content: center;

}

/*ハンバーガー3本線を非表示*/

header .humberger-wrap {

display:none;

}

header nav {

position:relative;

}

header nav, header ul {

display:flex;

}

header nav li {

cursor:pointer;

}

header nav a {

line-height:60px;

display:block;

height:60px;

padding:0 30px;

}

@media screen and (max-width:901px) {

/*3本線の表示*/

header .humberger-wrap {

display:block;

}

/*3本線の位置*/

header .humberger-wrap {

position: absolute;

top: 0;

right: 20px;

width: 40px;

height: 100%;

cursor: pointer;

}

/*humberger-border1,2,3の線*/

header .humberger-wrap [class*=humberger-border] {

position: absolute;

width: 40px;

height: 2px;

transition: .4s all ease;

transform-origin: center center;

background: #333;

}

/*1本目の線*/

header .humberger-wrap .humberger-border-1 {

top:20px;

right:0;

}

/*2本目の線*/

header .humberger-wrap .humberger-border-2 {

top:30px;

right:0;

}

/*3本目の線*/

header .humberger-wrap .humberger-border-3 {

top:40px;

right:0;

}

/*開閉ボタンopen時の横線1本目*/

header .humberger-wrap.opened .humberger-border-1 {

top: 30px;

transform: rotate(45deg);

}

/*開閉ボタンopen時の横線2本目*/

header .humberger-wrap.opened .humberger-border-2 {

top: 30px;

transform: rotate(-45deg);

}

/*開閉ボタンopen時の横線3本目*/

header .humberger-wrap.opened .humberger-border-3 {

top: 30px;

transform: rotate(-45deg);

opacity:0;

}

/*メニューを非表示*/

header nav {

display:none;

}

/*open時に一番上のヘッダーの背景色を変化*/

header.opened {

background: #fff;

}

header.opened nav {

display: block;

min-height: 100vh;

opacity: 1;

top:60px;

}

header nav ul.header-navigation {

flex-flow: column nowrap;

}

header nav ul.header-navigation li a {

display: block;

height: auto;

margin: 0;

padding: 10px 0;

}

javascriptファイル


$(function(){

	$(".humberger-wrap").on("click",function(){
		$(".humberger-wrap").toggleClass("opened");
		$("header").toggleClass("opened");
	});

	$(".header-navigation > a").on("click",function(){
		$(".humberger-wrap").removeClass("opened");
		$("header").removeClass("opened");
	})

});