こんにちは、ティロといいます
プログラミングが好きな理系大学生です
今回はプラグインやjqueryに頼らずにハンバーガーメニューを作る方法を紹介します。
コードはコピペOKなので気軽に使っていただけたら幸いです。
コード解説
htmlは以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <div class="hamburgerMenu"> <div class="hamburgerMenu-box"> <ul> <li>HOME</li> <li>menu</li> <li>access</li> <li>blog</li> </ul> </div> <div class="hamurerMenu-button"> <div class="icon"></div> //メニューバー上部 <div class="icon-m"></div> //メニューバー真ん中 <div class="icon-b"></div>//メニューバー下部 </div> </div> </body> |
cssは以下のようになります。
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 | body { margin: 0; padding: 0; position: relative; background-color: #c0c0c0; } .hamburgerMenu { position: fixed; //固定している width: 300px; height: 100%; left: -300px; //画面外に配置する background-color: #fff; transition: all 0.4s; //400ミリ秒でアニメーション transition-timing-function:ease-in-out; //アニメーションのイージング } .hamburgerMenu.open { transform: translateX(300px); } .hamburgerMenu-box ul { list-style: none; padding-left: 0; text-align: center; } .hamburgerMenu-box ul li { padding: 10px 0; } .hamurerMenu-button { position: absolute; top: 0; left: 300px; width: 60px; height: 60px; border: solid #fff 1px; cursor: pointer; } .icon { width: 35px; //メニューバーの一番上のところ height: 1px; background-color: #fff; position: absolute; top: 14.5px; left: 12.5px; transition: all 0.5s; transition-timing-function:ease-out; } .icon-m { content: ''; //メニューバーの真ん中のところ width: 35px; height: 1px; background-color: #fff; position: absolute; top: 29.5px; left: 12.5px; transition: all 0.5s; transition-timing-function:ease-out; } .icon-b { content: ''; //メニューバーの一番下のところ width: 35px; height: 1px; background-color: #fff; position: absolute; top: 44.5px; left: 12.5px; transition: all 0.5s; transition-timing-function:ease-out; } .icon.open { transform: translateY(14.5px) rotate(135deg); //45°+ 90°でアニメーションさせる } .icon-b.open { transform: translateY(-14.5px) rotate(-135deg); //45°+ 90°でアニメーションさせる } .icon-m.open { opacity: 0; //真ん中のバーは消す } |
javascriptは以下のようになります。
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 | document.querySelector('.hamurerMenu-button').addEventListener('click', () => { //ボタンをクリックしたときに以下のコードが動く let icon = document.querySelector('.icon'); //メニューバーを一つずつ取得している let iconM = document.querySelector('.icon-m'); let iconB = document.querySelector('.icon-b'); if (icon.classList.contains('open') == true) { //トグル処理 openがあれば消して、なければopenをつける、それを3つあるメニューバーでそれぞれ行う icon.classList.remove('open'); } else { icon.classList.add('open'); } if (iconB.classList.contains('open') == true) { iconB.classList.remove('open'); } else { iconB.classList.add('open'); } if (iconM.classList.contains('open') == true) { iconM.classList.remove('open'); } else { iconM.classList.add('open'); } let hamburgerMenu = document.querySelector('.hamburgerMenu'); if (hamburgerMenu.classList.contains('open') == true) { hamburgerMenu.classList.remove('open'); } else { hamburgerMenu.classList.add('open'); } }); |
コードの解説はコード内に書きました。
処理の流れは初めにhtml.cssでメニューのアイコンを表示させ、メニューは―300pxで左の画面外に設置させます。
またcssのtransitonとtransformでアニメーションを行います。
openという名のクラスがつくとアイコンが×になり、メニュ―が左から現れます。
逆にopenというクラスがなくなると最初と同じ状態になります。
このopenというクラスを付け替える処理をjavascriptで行っています。
デモ
See the Pen
MWeWPBL by hiro web制作とブログ (@hiroweb9)
on CodePen.
最近、jqueryに頼りっぱなしだったのでjavascriptで書きました。
良ければこの記事もお読みいただければ幸いです。
この記事では同じくjqueryやプラグインに頼らずにjavascriptでスライドショー(カルーセル)を作りました。
関連記事
ティロこんにちは、ティロといいますプログラミングが好きな理系大学生です 今回はコピペするだけで簡単にスライドショーを設置する方法を紹介します。[…]
もっとシンプルに書くことが出来ると思います。
企業でjavascriptを使っている人からしたら無駄が多いコードだと思います。