jQueryを使わないスマホ用横メニュー

SP用の横から出てくるナビゲーションを作成しました。
今回はjQuery入れなくても動きます。一応jQueryで書いた時も載せています。
クラスと要素の追加・削除処理のみjsで行い、残りは全てcss。ハンバーガーメニューの動き部分もcssです。クラス付け替えてるだけ。

デモページ

HTML

CSS

javascript

もしjQueryで書くなら

デモページ

jQuery→javascript

jQuery便利だから使う機会が多いので、いざネイティブjavascript使おうとすると忘れている事に気がつく・・・

onの代わりにaddEventListener

jQueryではonで様々なイベントを出せますが、ネイティブのjavascriptではaddEventListenerでイベントを追加できます。
onではイベントが重複するので連続クリックされた時に暴発するのですが、addEventListenerは重複しないのがとてもいい。

appendの代わりにappendChild

要素を追加するappendの代わりにはappendChild。ただ、jQueryの様に1行では書けません。
createElementでdiv要素を作り、setAttributeでidを入れ、それからappendChildでbody要素の直下に入れます。

removeの代わりにremoveChild

親要素が分かっている場合とそうでない場合で書き方が変わります。
今回使っているのは親要素が不明、不定の場合の書き方。

参考サイト

.addEventListener() | JavaScript 日本語リファレンス | js STUDIO
Node.removeChild – Web API インターフェイス | MDN

デモページ

  • コーダーのための計算機