超簡単！ハンバーガーメニューの導入

  <div id="header">
    <h1>レスポンシブハンバーガーメニューサンプル</h1>
    <nav>
    <ul id="navi">
      <li><a href="#">メニュー1</li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
      <li><a href="#">メニュー6</a></li>
    </ul>
    </nav>
    
    <!-- ボタン部分ここを後で追加するだけ-->
    <div class="nav_btn" id="nav_btn">
      <span class="hamburger_line hamburger_line1"></span>
      <span class="hamburger_line hamburger_line2"></span>
      <span class="hamburger_line hamburger_line3"></span>
    </div>
    <div class="nav_bg" id="nav_bg"></div>
    <!-- /ボタン部分ここを後で追加するだけ-->
      
  </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<h1>レスポンシブハンバーガーメニューサンプル</h1>

<nav>

</ul>

</nav>

</div>

</div>

/* bager menu */

#header #navi {
  transition: all .6s;
  overflow-y: auto;
  padding-top: 40px;
  width: 300px;
  height: 100vh;
  z-index: 200;
  top: 0;
  right: -320px;
  background-color: #fff;
  position: fixed;
}

#header .nav_btn {
  width: 44px;
  height: 44px;
  z-index: 300;
  top: 7px;
  right: 7px;
  cursor: pointer;
  position: absolute;
}

.hamburger_line {
  transition: all .6s;
  width: 34px;
  height: 2px;
  left: 5px;
  background-color: #000;
  position: absolute;
}

.hamburger_line1 { top: 10px; }
.hamburger_line2 { top: 21px; }
.hamburger_line3 { top: 32px; }

.nav_bg {
  opacity: 0;
  transition: all .6s;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  top: 0;
  left: 0;
  visibility: hidden;
  background-color: #000;
  cursor: pointer;
  position: fixed;
}

/* 表示された時用のCSS */
.nav_open #header #navi { right: 0; }

.nav_open .nav_bg {
  opacity: .8;
  visibility: visible;
}

.nav_open .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
}

.nav_open .hamburger_line2 {
  width: 0;
  left: 50%;
}

.nav_open .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

/* bager menu */

#header #navi {

transition: all .6s;

overflow-y: auto;

padding-top: 40px;

width: 300px;

height: 100vh;

z-index: 200;

top: 0;

right: -320px;

background-color: #fff;

position: fixed;

}

#header .nav_btn {

width: 44px;

height: 44px;

z-index: 300;

top: 7px;

right: 7px;

cursor: pointer;

position: absolute;

}

.hamburger_line {

transition: all .6s;

width: 34px;

height: 2px;

left: 5px;

background-color: #000;

position: absolute;

}

.hamburger_line1 { top: 10px; }

.hamburger_line2 { top: 21px; }

.hamburger_line3 { top: 32px; }

.nav_bg {

opacity: 0;

transition: all .6s;

width: 100vw;

height: 100vh;

z-index: 100;

top: 0;

left: 0;

visibility: hidden;

background-color: #000;

cursor: pointer;

position: fixed;

}

/* 表示された時用のCSS */

.nav_open #header #navi { right: 0; }

.nav_open .nav_bg {

opacity: .8;

visibility: visible;

}

.nav_open .hamburger_line1 {

transform: rotate(45deg);

top: 20px;

}

.nav_open .hamburger_line2 {

width: 0;

left: 50%;

}

.nav_open .hamburger_line3 {

transform: rotate(-45deg);

top: 20px;

}

(function ($) {


  /* ------------------------------- */

})(jQuery);


  /* SP menu */
  function toggleNav() {
  var body = document.body;
  var hamburger = document.getElementById('nav_btn');
  var blackBg = document.getElementById('nav_bg');

  hamburger.addEventListener('click', function() {
    body.classList.toggle('nav_open'); //メニュークリックでnav-openというクラスがbodyに付与
  });
  blackBg.addEventListener('click', function() {
    body.classList.remove('nav_open'); //もう一度クリックで解除
  });
}
toggleNav();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

(function ($) {

/* ------------------------------- */

})(jQuery);

/* SP menu */

function toggleNav() {

var body = document.body;

var hamburger = document.getElementById('nav_btn');

var blackBg = document.getElementById('nav_bg');

hamburger.addEventListener('click', function() {

body.classList.toggle('nav_open'); //メニュークリックでnav-openというクラスがbodyに付与

});

blackBg.addEventListener('click', function() {

body.classList.remove('nav_open'); //もう一度クリックで解除

});

}

toggleNav();

デモ1