本ページはプロモーションが含まれています。使うドロワーメニューをjQueryまたは、javascriptのみで作ってみます。ベースのHTML/CSSよく使うドロワーメニューをjQueryを使って作成してみます。jQueryを使わずjavascriptのみで全く同じドロワーメニューを作成してみます。今回作成するものは、下記のページになります。jQueryを使って作成しています。DEMO(jQueryバージョン)ウインドウ幅を縮めて(767px以下)でご確認ください。レスポンシブ対応になっているので、ウインドウ幅を767px以下で、右上にハンバーガメニューが表示されます。ベースとなるHTMLとCSSについて解説します。ソースは以下となります。}}ソース全文見たい場合は、Chromeのディベロッパーツールなどを使用してDEMOページをご確認ください。次に[jQuery]のソースです。});});やっている事は、ハンバーガーメニューをクリックすると、HTMLのbodyタグにCSSのopenクラスが付与されます。このbodyタグにopenクラスを付けたり外したりをjQueryの[toggleClass]メソッドを使って行っています。translateX(100%);]と設定することで、ウインドウの右端に移動させておきます。translateX(0);]と変化させることにより、メニューが右から左へとスライドして入ってくる動きを作っています。あわせて、[opacity]を0から1へ、[visibility]をhiddenからvisibilityへと書き換えています。[visibility]に関しては以下のページで詳しく解説されています。translateX;]で移動させています。一つ一つのメニュー(li)に対しても個別に[delay]をかけて、微妙に移動時間をづらしています。次にjQueryを使わず、javascriptのみで書いた場合になります。JS(Javascript)などと言う場合もあります。DEMOでの見た目は、jQueryと同じです。DEMO(javascriptバージョン)ウインドウ幅を縮めて(767px以下)でご確認ください。javascriptのコードです。};やっている事はjQueryの時とほぼ同じです。javascriptのみの場合は、[getElementById]や[querySelector]を使って要素を指定して、jQuery場合であれば[toggleClass]を使うところ、代わりに[classList.toggle]を使用します。別の記事で、CSSのみでのドロワーメニューの作成方法も解説しているので、興味がある方はそちらの記事も合わせてご覧ください。js)でドロワーメニューを作成する方法を解説しました。Meshを回すVue.js初心者にオススメの書籍・Udemy動画・サイト初心者からWEBデザイナーを目指す!プログミングスクール7校比較mukoWeb制作会社数社でデザイナー/ディレクター/採用担当として働いたのち、今フリーランス。WEB業界歴15年以上。UnityやBlenderとか色々手をだしては忘れていきます。Unityアプリ2本リリースしてます。2022/06/05オススメ記事1【ブラック回避】求人票からみるブラックWEB制作会社の見分け方そんな疑問にお答えします。私は、これまでWEB制作会社を2社経験しており、そのうちの1社では採用担当をしていました。...3【2022】Unity初心者おすすめ本9冊Unity初心者向け書籍の感想とオススメ度をまとめてみました。...4参考にしたい!個人ポートフォリオサイト10選【国内編】フリーランスのWEBデザイナーの方のサイトはモチロン、フォトグラファー、ロゴデザイナー、ダンサーの方のポートフォリオサイトなども合わせてまとめてみました。...6【超初心者向け】ゼロからのHTML/CSS勉強法【独学】そんな人向けに記事を書きたいと思います。