レスポンシブにも対応した簡単にコーディングする３パターンのメニュー

<div class="wrapper">
  <div id="header">
      <div class="menu-btn" id="menu-btn"></div>
  </div>
  <div class="global-menu-wrap">
    <div class="global-menu-inner">
      <ul class="global-menu-link">
        <li>
          <a href="#">リンク１</a>
        </li>
        <li>
          <a href="#">リンク２</a>
        </li>
        <li>
          <a href="#">リンク３</a>
        </li> 
        <li>
          <a href="#">リンク４</a>
        </li> 
        <li>
          <a href="#">リンク５</a>
        </li> 
      </ul>
    </div>
  </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

24

25

26

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

#header {
  height: 124px;
  position: relative;
}

#header .menu-btn {
  width: 60px;
  height: 60px;
  position: absolute;
  display: block;
  top: 35px;
  right: 20px;
  cursor: pointer;
  z-index: 9999 !important;
}

#header .menu-btn:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 6px;
  background: #666;
  left: 17px;
  transition: all 200ms;
  top: 22px;
}

#header .menu-btn:after {
  content: "";
  position: absolute;
  width: 26px;
  height: 6px;
  background: #666;
  left: 17px;
  transition: all 200ms;
  top: 32px;
}

.show-global-menu {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.show-global-menu #header .menu-btn:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 27px;
}

.show-global-menu #header .menu-btn:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 27px;
}

.show-global-menu .global-menu-wrap {
  z-index: 10;
  opacity: 1;
}

.global-menu-wrap {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 400ms;
  padding: 124px 0 0;
}

.global-menu-wrap .global-menu-inner {
  height: 100%;
  position: relative;
  text-align: center;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li {
  display: block;
  margin-bottom: 20px;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #666;
  display: inline-block;
  position: relative;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a:after {
  position: absolute;
  bottom: -5px;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #666;
  left: 0;
}

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

#header {

height: 124px;

position: relative;

}

#header .menu-btn {

width: 60px;

height: 60px;

position: absolute;

display: block;

top: 35px;

right: 20px;

cursor: pointer;

z-index: 9999 !important;

}

#header .menu-btn:before {

content: "";

position: absolute;

width: 26px;

height: 6px;

background: #666;

left: 17px;

transition: all 200ms;

top: 22px;

}

#header .menu-btn:after {

content: "";

position: absolute;

width: 26px;

height: 6px;

background: #666;

left: 17px;

transition: all 200ms;

top: 32px;

}

.show-global-menu {

width: 100%;

position: fixed;

top: 0;

left: 0;

}

.show-global-menu #header .menu-btn:before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

top: 27px;

}

.show-global-menu #header .menu-btn:after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

top: 27px;

}

.show-global-menu .global-menu-wrap {

z-index: 10;

opacity: 1;

}

.global-menu-wrap {

position: fixed;

width: 100%;

height: 100vh;

z-index: -1;

background: rgba(255, 255, 255, 0.8);

top: 0;

left: 0;

opacity: 0;

transition: all 400ms;

padding: 124px 0 0;

}

.global-menu-wrap .global-menu-inner {

height: 100%;

position: relative;

text-align: center;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li {

display: block;

margin-bottom: 20px;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a {

text-align: center;

font-size: 28px;

font-weight: bold;

margin-bottom: 10px;

color: #666;

display: inline-block;

position: relative;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a:after {

position: absolute;

bottom: -5px;

content: '';

width: 100%;

height: 2px;

background-color: #666;

left: 0;

}

  $('#menu-btn').click(function() {
    $('.wrapper').toggleClass('show-global-menu');
  });

1

2

3

$('#menu-btn').click(function() {

$('.wrapper').toggleClass('show-global-menu');

});

#header {
  position: relative;
  z-index: 20;
  height: 124px;
}

#header .menu-btn {
  width: 60px;
  height: 60px;
  position: absolute;
  display: block;
  top: 35px;
  right: 50px;
  cursor: pointer;
  z-index: 9999 !important;
}

#header .menu-btn:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 6px;
  background: #666;
  left: 17px;
  transition: all 200ms;
  top: 22px;
}

#header .menu-btn:after {
  content: "";
  position: absolute;
  width: 26px;
  height: 6px;
  background: #666;
  left: 17px;
  transition: all 200ms;
  top: 32px;
}

.show-global-menu {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.show-global-menu #header .menu-btn:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 27px;
}

.show-global-menu #header .menu-btn:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 27px;
}

.show-global-menu .global-menu-wrap {
  z-index: 10;
  opacity: 1;
}

.show-global-menu .global-menu-wrap .global-menu-inner {
  right: 0;
}

.global-menu-wrap {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 400ms;
  padding: 124px 0 0;
}

.global-menu-wrap .global-menu-inner {
  height: 100%;
  width: 300px;
  position: fixed;
  background: #fff;
  transition: all 400ms;
  right: -300px;
  z-index: 15;
  text-align: center;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li {
  display: block;
  margin-bottom: 20px;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #666;
  display: inline-block;
  position: relative;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a:after {
  position: absolute;
  bottom: -5px;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #666;
  left: 0;
}

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

#header {

position: relative;

z-index: 20;

height: 124px;

}

#header .menu-btn {

width: 60px;

height: 60px;

position: absolute;

display: block;

top: 35px;

right: 50px;

cursor: pointer;

z-index: 9999 !important;

}

#header .menu-btn:before {

content: "";

position: absolute;

width: 26px;

height: 6px;

background: #666;

left: 17px;

transition: all 200ms;

top: 22px;

}

#header .menu-btn:after {

content: "";

position: absolute;

width: 26px;

height: 6px;

background: #666;

left: 17px;

transition: all 200ms;

top: 32px;

}

.show-global-menu {

width: 100%;

position: fixed;

top: 0;

left: 0;

}

.show-global-menu #header .menu-btn:before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

top: 27px;

}

.show-global-menu #header .menu-btn:after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

top: 27px;

}

.show-global-menu .global-menu-wrap {

z-index: 10;

opacity: 1;

}

.show-global-menu .global-menu-wrap .global-menu-inner {

right: 0;

}

.global-menu-wrap {

position: fixed;

width: 100%;

height: 100vh;

z-index: -1;

background: rgba(0, 0, 0, 0.5);

top: 0;

left: 0;

opacity: 0;

transition: all 400ms;

padding: 124px 0 0;

}

.global-menu-wrap .global-menu-inner {

height: 100%;

width: 300px;

position: fixed;

background: #fff;

transition: all 400ms;

right: -300px;

z-index: 15;

text-align: center;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li {

display: block;

margin-bottom: 20px;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a {

text-align: center;

font-size: 28px;

font-weight: bold;

margin-bottom: 10px;

color: #666;

display: inline-block;

position: relative;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a:after {

position: absolute;

bottom: -5px;

content: '';

width: 100%;

height: 2px;

background-color: #666;

left: 0;

}

  $('#menu-btn').click(function() {
    $('.wrapper').toggleClass('show-global-menu');
  });

1

2

3

$('#menu-btn').click(function() {

$('.wrapper').toggleClass('show-global-menu');

});

#header {
  position: relative;
  z-index: 20;
  height: 124px;
}

#header .menu-btn {
  width: 60px;
  height: 60px;
  position: absolute;
  display: block;
  top: 35px;
  right: 50px;
  cursor: pointer;
  z-index: 9999 !important;
}

#header .menu-btn:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 6px;
  background: #666;
  left: 17px;
  transition: all 200ms;
  top: 22px;
}

#header .menu-btn:after {
  content: "";
  position: absolute;
  width: 26px;
  height: 6px;
  background: #666;
  left: 17px;
  transition: all 200ms;
  top: 32px;
}

.show-global-menu {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.show-global-menu #header .menu-btn:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 27px;
}

.show-global-menu #header .menu-btn:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 27px;
}

.global-menu-wrap {
  position: absolute;
  display: none;
  z-index: 10;
  width: 100%;
}

.global-menu-wrap .global-menu-inner {
  height: 100%;
  background: #fff;
  text-align: center;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li {
  display: block;
  margin-bottom: 20px;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #666;
  display: inline-block;
  position: relative;
}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a:after {
  position: absolute;
  bottom: -5px;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #666;
  left: 0;
}

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

#header {

position: relative;

z-index: 20;

height: 124px;

}

#header .menu-btn {

width: 60px;

height: 60px;

position: absolute;

display: block;

top: 35px;

right: 50px;

cursor: pointer;

z-index: 9999 !important;

}

#header .menu-btn:before {

content: "";

position: absolute;

width: 26px;

height: 6px;

background: #666;

left: 17px;

transition: all 200ms;

top: 22px;

}

#header .menu-btn:after {

content: "";

position: absolute;

width: 26px;

height: 6px;

background: #666;

left: 17px;

transition: all 200ms;

top: 32px;

}

.show-global-menu {

width: 100%;

position: fixed;

top: 0;

left: 0;

}

.show-global-menu #header .menu-btn:before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

top: 27px;

}

.show-global-menu #header .menu-btn:after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

top: 27px;

}

.global-menu-wrap {

position: absolute;

display: none;

z-index: 10;

width: 100%;

}

.global-menu-wrap .global-menu-inner {

height: 100%;

background: #fff;

text-align: center;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li {

display: block;

margin-bottom: 20px;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a {

text-align: center;

font-size: 28px;

font-weight: bold;

margin-bottom: 10px;

color: #666;

display: inline-block;

position: relative;

}

.global-menu-wrap .global-menu-inner .global-menu-link > li > a:after {

position: absolute;

bottom: -5px;

content: '';

width: 100%;

height: 2px;

background-color: #666;

left: 0;

}

  $('#menu-btn').click(function() {
    $('.wrapper').toggleClass('show-global-menu');
    $('.global-menu-wrap').slideToggle();
  });

1

2

3

4

$('#menu-btn').click(function() {

$('.wrapper').toggleClass('show-global-menu');

$('.global-menu-wrap').slideToggle();

});

レスポンシブにも対応した簡単にコーディングする３パターンのメニュー

共通のHTML部分

HTML

ダイアログ形式のメニュー

css

JQuery（JavaScript）

ドロワー形式のメニュー

css

JQuery（JavaScript）

アコーディオン形式のメニュー

css

JQuery（JavaScript）