【CSS/JavaScript】ハンバーガーメニュー自作の手順

【Rails】プログラミング初心者の勉強ブログ　#61

ハンバーガーメニューを自作したい。Bootstrapやプラグインではなく、CSSとJSを使い、オリジナルハンバーガーメニューを作るためには、どのタイミングで、どのようなコードが必要になるかを実在サイトをもとに考察しました。

はじめに

今回のハンバーガーメニュー考察は、実在するサイトにお邪魔して、ディベロッパーツールでコードを確認しながら仕組みを理解していくことに努めております。

参考サイト

シザーケース専門店 sacra HP

sacra-jp.com

シザーケース専門店 sacra

sacra,サクラ,シザーケース,フローリストケース,美容師,理容師,ガーデナー,トリマー

「実際のメニューの画像」

バーガーメニューアイコンをクリック
メニューが表示される
閉じるボタンでもとの画面に戻る

こちらのHPのハンバーガーメニューを参考に、どのような仕組みで上のメニューがコーディングされているかを考察します。

ハンバーガーメニューの仕組み

まず、一連のメニュー表示の流れの、どの要素にCSSとJavaScriptが使用されているかをまとめます。CSS使用部分とJS使用部分を一旦整理して考えていきます。

JavaScriptの使用箇所

今回のメニューにおいて、JSを使用する点は、大まかに以下の3つでした。

①、バーガーメニューアイコンのクリック時アクション設定

まず、最初の「三」の字のアイコンがクリックされた時のアクションを定義する必要があります。このクリック時のアクションに、「要素にクラスを追加する関数」を定義することで、追加で付与されたクラスに当てた、もともとコーディングしておいたCSSが作用し、アニメーションが起動する流れです。

②、①のクリック時のタイミングとずらしてクラスを付与する設定

①のアクション設定は、別途関数を定義をしない限り、クリック時と同タイミングで、設定した全てのアクションが行われることになります。しかし、今回のメニューは、最初のクリックで、背景がグレーからピンクに変わり、その数秒後に白い文字が表示されております。

※クリックタイミングと、白い文字表示タイミングがずれてます。このような「アクションのタイミング」の設定は、JSの「setTimeout関数」で設定を行うことができます。

③、「×」印の閉じるボタンのクリック時アクション設定

こちらもクリック時アクションをJSで定義し、①で設定した際に付与したクラスを取り払うことで、もとの状態に戻すと言った流れになります。あらかじめ設定したCSSのクラスを付けたり外したりすることで、表示の変化を生み出すイメージです。

実際のコーディング

nav.html（抜粋）

<body>

//表示されるメニュー中身

#省略

//メニュー背景3分割用listタグ

</ul>

</div>

//閉じるボタン（×印）

</div>

//バーガーメニューアイコン（棒3つ）

</div>

　//最後にnav.jsを読み込ませる。（位置が大事）

</body>

nav.js

$('.burger-nav').click(function() {

//メニューをフェードイン

$('.nav-sp').fadeIn(0);

//①openクラスを追加

$(this).addClass('open');

$('.nav-sp').addClass('open');

//②③setTimeoutでタイマー機能設定、fade-inクラスを遅らせて追加・削除

setTimeout(function() {

$('.nav-sp').removeClass('close');

}, 0);

setTimeout(function() {

$('.nav-sp.open .nav li,.icon-close').fadeIn(0);

$('.nav-sp .nav,.sacra-logo-sp,.nav-sns-sp,.icon-close,.nav-sublink-sp').addClass('fade-in');

}, 600);

});

※openとcloseクラスにアニメーション設定がコーディングされてます。詳細は一番下のcssのコードで確認ください。

※「.nav、.sacra-logo-sp、.nav-sns-sp、.icon-close、.nav-sublink-sp」の各クラスは、メニュー内のアイコンやリンク、文字の要素のクラスです。

CSSの使用箇所

上に書いたJS使用箇所以外は、全てCSSの設定です。アニメーションは全てCSSです。このメニューバーJSのコードよりもCSSのコードの方が、複雑に作り込まれておりました。今回は特に特徴的であった2つのCSSアニメーション2つを取り上げてまとめます。

①、メニュー背景を3つに分け、白とピンクの背景色を段階的に表示する設定

この背景が三段階で移動して変わるアニメーション、最初見たとき仕組みが全く想像できなかったのですが、コードを確認すると、メニューの大枠のdiv内にliタグで3つの要素を作成し、それぞれにCSSアニメーションを適用することで作られておりました。

面白いのはliタグ１つにつき、before（白）とafter（ピンク）で2つの擬似要素を作り、左右から表示させていたことです。擬似要素アニメーションの使い方はめちゃめちゃ色々あるんだなと思いました。

②、「×」印のアニメーション設定

この閉じるボタンのバツ印も、擬似要素にアニメーションをかけることで作られております。正直、細かい部分まで仕組みを把握することはできておりませんが、対応するコードを以下に載せます。

実際のコーディング（まとめ）

nav.html

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

<head>

</head>

<body>

<a href="#" class="vm sacra-logo-sp">sacra</a>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<li>

<a class="vm" href="#">COMPANY</a>

</li>

<li>

<a class="vm" href="#">PRIVACY POLICY</a>

</li>

<li>

<a class="vm" href="#">CONTACT</a>

</li>

</ul>

</ul>

</div>

</div>

</div>

</div>

</body>

nav.css（抜粋）

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

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

//メニュー背景3分割表示

.nav-sp{

display:none;

top:0%;

left:0%;

width:100%;

height:100%;

position:fixed;

z-index:10000;

-webkit-transition: all ease 0s;

transition: all ease 0s;

}

.nav-sp .bg-back li:after{

content:"";

opacity:1;

width:100%;

height:34%;

right:0%;

transform:translate(100%,0);

position:absolute;

background: rgba(220,111,100,1);

z-index:1;

}

.nav-sp .bg-back li:before{

content:"";

opacity:1;

width:100%;

height:34%;

left:0;

transform:translate(-100%,0);

position:absolute;

z-index:-1;

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

}

.nav-sp .bg-back li:nth-of-type(1):after{

-webkit-transition: all cubic-bezier(.8,1,.32,1) 0.6s;

transition: all cubic-bezier(.2,.4,1) 0.6s;

top:0%;

}

.nav-sp .bg-back li:nth-of-type(2):after{

-webkit-transition: all cubic-bezier(.8,1,.32,1) 0.7s;

transition: all cubic-bezier(.2,.4,1) 0.7s;

top:33.3333%;

}

.nav-sp .bg-back li:nth-of-type(3):after{

-webkit-transition: all cubic-bezier(.8,1,.32,1) 0.8s;

transition: all cubic-bezier(.2,.4,1) 0.8s;

bottom:0%;

}

.nav-sp .bg-back li:nth-of-type(1):before{

-webkit-transition: all cubic-bezier(.8,1,.32,1) 0.6s;

transition: all cubic-bezier(.2,.4,1) 0.6s;

top:0%;

}

.nav-sp .bg-back li:nth-of-type(2):before{

-webkit-transition: all cubic-bezier(.8,1,.32,1) 0.7s;

transition: all cubic-bezier(.2,.4,1) 0.7s;

top:33.3333%;

}

.nav-sp .bg-back li:nth-of-type(3):before{

-webkit-transition: all cubic-bezier(.8,1,.32,1) 0.8s;

transition: all cubic-bezier(.2,.4,1) 0.8s;

bottom:0%;

}

.nav-sp.open .bg-back li:nth-of-type(1):after,

.nav-sp.open .bg-back li:nth-of-type(2):after,

.nav-sp.open .bg-back li:nth-of-type(3):after,

.nav-sp.open .bg-back li:nth-of-type(1):before,

.nav-sp.open .bg-back li:nth-of-type(2):before,

.nav-sp.open .bg-back li:nth-of-type(3):before{

transform:translate(0,0);

}

//閉じるボタン設定

.icon-close{

display:none;

width:50px;

height:50px;

top: 20px;

right: 35px;

position:fixed;

z-index:10001;

cursor:pointer;

transition: transform .6s cubic-bezier(.23,1,.32,1);

}

//閉じるボタンバツ印設定

.icon-close1 {

transition: transform .6s cubic-bezier(.23,1,.32,1),opacity .2s;

position: absolute;

height: 1px;

width: 30px;

top: 25px;

background-color: #333;

left: 26px;

opacity: 0;

transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);

}

.icon-close1:before {

-webkit-transition-duration: 0.7s;

transition-duration: 0.7s;

transform-origin: 0 0;

transform: scaleX(.3) translateX(-130%) translateZ(0);

position: absolute;

width: 16px;

height: 1px;

background-color: #fefefe;

content: "";

top: 0px;

left: -1px;

}

.icon-close1:after {

-webkit-transition-duration: 0.7s;

transition-duration: 0.7s;

transform-origin: 100% 0;

transform: scaleX(.3) translateX(130%) translateZ(0);

position: absolute;

width: 16px;

height: 1px;

background-color: #fefefe;

content: "";

top: 0;

left: 15px;

}

.icon-close2 {

transition: transform .6s cubic-bezier(.23,1,.32,1),opacity .2s;

position: absolute;

height: 1px;

width: 30px;

top: 25px;

background-color: #fefefe;

left: 26px;

opacity: 0;

transform: translateX(-50%) translateY(-50%) rotate(-45deg) translateZ(0);

}

.icon-close2:before {

-webkit-transition-duration: 0.7s;

transition-duration: 0.7s;

transform-origin: 0 0;

transform: scaleX(.3) translateX(-130%) translateZ(0);

position: absolute;

width: 16px;

height: 1px;

background-color: #eee;

content: "";

top: 0px;

left: -1px;

}

.icon-close2:after {

-webkit-transition-duration: 0.7s;

transition-duration: 0.7s;

transform-origin: 100% 0;

transform: scaleX(.3) translateX(130%) translateZ(0);

position: absolute;

width: 16px;

height: 1px;

background-color: #eee;

content: "";

top: 0;

left: 15px;

}

.icon-close.fade-in .icon-close1,

.icon-close.fade-in .icon-close2 {

opacity: 1;

transition: transform .6s cubic-bezier(.23,1,.32,1);

background: transparent;

}

.icon-close.fade-in .icon-close1:before,

.icon-close.fade-in .icon-close1:after,

.icon-close.fade-in .icon-close2:before,

.icon-close.fade-in .icon-close2:after {

transform: scaleX(1) translateX(0) translateZ(0);

transition: transform .6s cubic-bezier(.23,1,.32,1),opacity .2s;

}

.icon-close.fade-in:hover{

transform:rotate(-90deg);

}

.icon-close.fade-in:hover .icon-close1:before,

.icon-close.fade-in:hover .icon-close2:before{

transform-origin: 0 0;

transform: scaleX(.7) translateX(-20%) translateZ(0);

}

.icon-close.fade-in:hover .icon-close1:after,

.icon-close.fade-in:hover .icon-close2:after {

transform-origin: 100% 0;

transform: scaleX(.7) translateX(20%) translateZ(0);

}

.burger-nav:hover,

.icon-close:hover {

cursor: pointer;

}

nav.js

/*バーガーメニュー*/

$('.burger-nav').click(function() {

$('.nav-sp').fadeIn(0);

$(this).addClass('open');

$('.nav-sp').addClass('open');

setTimeout(function() {

$('.nav-sp').removeClass('close');

}, 0);

// setTimeoutでタイマー機能をつけ、「fade-in」クラスを「open」クラスに遅らせて付与している

setTimeout(function() {

$('.nav-sp.open .nav li,.icon-close').fadeIn(0);

$('.nav-sp .nav,.sacra-logo-sp,.nav-sns-sp,.icon-close,.nav-sublink-sp').addClass('fade-in');

}, 600);

// スクロールを無効にする

//SP用

$(window).on('touchmove.noScroll', function(e) {

e.preventDefault();

});

//PC用

var scroll_event = 'onwheel'in document ? 'wheel' : 'onmousewheel'in document ? 'mousewheel' : 'DOMMouseScroll';

$(document).on(scroll_event, function(e) {

e.preventDefault();

});

/*closeボタン*/

$('.icon-close').click(function() {

$('.nav-sp .nav,.sacra-logo-sp,.nav-sns-sp,.icon-close,.nav-sublink-sp').removeClass('fade-in');

setTimeout(function() {

$('.nav-sp').addClass('close');

$('.burger-nav').removeClass('open');

$('.nav-sp').removeClass('open');

}, 600);

setTimeout(function() {

$('.nav-sp,.icon-close').fadeOut();

}, 1200);

// スクロール無効を解除する

//PC用

var scroll_event = 'onwheel'in document ? 'wheel' : 'onmousewheel'in document ? 'mousewheel' : 'DOMMouseScroll';

$(document).off(scroll_event);

//SP用

$(window).off('.noScroll');

});

まとめ

今回はバーガーナビの表示の仕組みについてでした。今回のようなナビゲーション表示の場合、複雑なのはJavaScriptよりもCSSです。CSSの理解は正直追っついていませんが、一回一回ディベロッパーツールでコードを確認し仕組みを考察してみると、色々なサイトのバーガーメニューを見た際に、どのように作られているかのイメージが湧くようになります。

以上ありがとうございました。

【CSS/JavaScript】ハンバーガーメニュー自作の手順

【Rails】プログラミング初心者の勉強ブログ #61

目次

はじめに

参考サイト

ハンバーガーメニューの仕組み

JavaScriptの使用箇所

①、バーガーメニューアイコンのクリック時アクション設定

②、①のクリック時のタイミングとずらしてクラスを付与する設定

③、「×」印の閉じるボタンのクリック時アクション設定

実際のコーディング

CSSの使用箇所

①、メニュー背景を3つに分け、白とピンクの背景色を段階的に表示する設定

②、「×」印のアニメーション設定

実際のコーディング（まとめ）

まとめ

【Rails】プログラミング初心者の勉強ブログ　#61