アプリ

ハンバーガーメニュー

投稿日:

 

パターン1:本文がずれる

html

 

css

js

 

 

パターン2:本文の上に重ねる

html

<i class="fa fa-bars" id="show"></i>
<h1>Hello</h1>
<p>本文</p>

<div id="cover"></div>

<div id="menu">
<!-- 閉じるボタンがいるので↓ -->
<i class="fa fa-times" id="hide"></i>
<ul>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
</ul>
</div>

css

js

定数変数

const show = document.getElementById('show');
const main = document.getElementById('main');
const hide = document.getElementById('hide'); 

 

メニュー開くボタン・・showクリック

show.addEventListener('click',()=>{

document.body.className = 'menu-open';
});

メニュー閉じるボタン・・hideクリック

//hideの時ははずす
hide.addEventListener('click',()=>{
document.body.className = '';
});

ハンバーガーメニューは思ったよりも相当javascripのコードが少ない

 

 

-アプリ

Copyright© プログラミング , 2020 All Rights Reserved.