Popup(3)photoshop(1)php(1)pug(1)seo(2)shopify(5)slick(5)swiper(6)wordpress(6)脱jQuery(3)show_chartFXfxfxタグ一覧トレード戦略(16)トレード記録(16)手法(2)book日記diarydiaryタグ一覧Apps(1)ツール(1)ライフハック(1)mailお問い合わせcontactHOMEwebドロワーメニューをjQueryを使用しないで実装するwebドロワーメニューをjQueryを使用しないで実装する公開日:2019/08/06javascript脱jQuery最近は脱jQueryに向けて頑張っている管理人です。そこで脱jQuery第1弾、ドロワーメニューをjQueryなしで実装していこうと思います。目次とりあえず成果物を見るjsの説明html,scssの説明とりあえず成果物を見る以下のものが今回作ったドロワーメニューです。簡単に作ってはいますが、ちゃんとしたドロワーメニューになっていると思います。CodePen.javascriptの箇所を見てもらって分かるようにそこまで、複雑なjsにはなっていないと思います。このドロワーメニューには以下のような特長があります。jQueryなし(ここはとりあえず。)メニューオープン時に、コンテンツエリアはスクロールされない。(これが意外に実装されていないのをよく見る気がします。)ナビのボリュームが多くなっても、ちゃんとスクロールされる。(最初の頃はこれが上手くいかなくて悩みました)IE11に適用させる場合は、以下のスクリプトを読み込んで使用してください。https://www.promisejs.org/polyfills/promise-7.0.4.min.jsこのjsはpromiseを使用しているのですが、IE11ではpromiseが動きません。IE11にも適用させたい場合は、上記のスクリプトは必須になります。修正promiseを使わずにコールバック関数で書き直しましたので、上記のスクリプトを読み込まなくてもIE11で動きます。constなどを使用しているので、トランスパイルをする必要はあります。私は以下のツールでトランスパイルしています。使用しているコンパイルツール「Prepros」jsの説明jsで分からない箇所がある人はここを読んでください。コードの内容は上部のcodepenと同じものです。使用する要素や、使用するクラス名を変数に入れています。wrapperに関しては、bodyタグでもいいのですが、bodyタグでやるとsafariで動かないことが何度かあったので、私は全体を囲むwrapperを使用するようにしています。navopenはドロワーメニューが開いているかどうかのbool値として使用しています。navToggle関数この関数はmenubtnをクリックしたときに発火する関数です。navopenがtrueのときは、navClose関数navopenがfalseのときは、navOpen関数が動きます。-〇〇px;をstyleつけます。-〇〇px;をつけないと、ページのトップまで戻ってしまいます。-〇〇px;をつけています。そもそもposition:fixed;をつける理由は、特長(2)を実装するためです。javascriptでスクロール禁止にする方法もあるのですが、動かない場合があったり、特長(3)を実装するのが困難になったりすることがあるので、この方法に落ち着いています。navClose関数こちらはpromiseを使って、非同期で処理を進めています。削除して、openClassのクラスも削除しています。この処理が終わった後に、〇〇分だけスクロールさせています。wrapperにopenClassのクラスがあるときにスクロールさせても、position:fixed;の状態なのでスクロールできないので、確実にwrapperのopenClassを削除した後に、スクロールさせています。関数の実行memubtn要素が確認できたときだけ、関数を実行します。html,scssの説明ここでは今回のドロワーメニューで必要な箇所のみ説明します。15~18行目jsの説明でも書いた通り、メニューオープン時にwrapper要素はposition:fixed;にする必要があります。38~40行目スマホでスクロールしたときにヌルヌル動くためのstyleです。メニューのボリュームが多くなって、画面内に収まりきれないときにはスクロールできるように、overflow-y:auto;を記述しています。7行目ドロワーメニューの要素内に1つかませるために、.nav-inner要素を入れています。touch;が正常に動かない場合があるので、その時には1つinner要素があると正常に動くので、最初からinner要素を入れています。