fontawesomeを使ったハンバーガーメニューfontawesomeという外部のライブラリを使う必要があるので手間がかかるし、新しく覚えることに時間を割く必要がある。fontawesomeが簡単に感じるのは、大量に使うから。ハンバーガーメニュー1箇所のた目に使うことは簡単とは感じづらい業界にいる方だと「え?そんなこともできないで大丈夫?」と思う方もいるかもしれません。教育現場では、個人個人の理解度や得意不得意に大きなばらつきがあります。業界での簡単と、一般での簡単に大きな違いがあります。簡単にカスタマイズできることを意識したハンバーガーメニューでは私の考える簡単とはなんでしょうか?とても単純で「習った知識でできること」です。習った知識とはこんな感じ、「なんとか」が大事。HTML:間違いはあるものの1枚ページを頑張ってなんとか書けたCSS:positionとか擬似要素とかいまいちわからないけど、なんとかレイアウトできたJavaScript:課題で少し触ったさて、この知識を持った状態で簡単なハンバーガーメニューの枠組みをつくるとこちら。$('.js-navTarget').fadeToggle(400);});</script>初学者用で今後も使えるよって感じです。この記事を見せながら生徒さんに教える未来が見えます。簡単にわかりやすく、かつ、今後もカスタマイズして使いやすいだけを意識して作りました。細かく分解して解説していきます。ハンバーガーボタンまずは3本線になるハンバーガーメニューのボタン。CSSは自由に書いてください。「humbergermenu」←この名前は説明用にわかりやすいものをつけているだけなので、自由に書き換えてください。「js-navBtn」というクラス名は、最初に’js’と付くのでJavaScriptで使用するクラス名になっています。<span></span></button>CSSは自由に書けばOK。CSSはこんな感じ、中身に書くものはデザインに合わせてください。動きに必要な部分だけ書いておきます。span:nth-child(3){}このボタンをクリックすると、メニューが表示されてハンバーガーメニューがバッテンに変わります。その時HTMLが以下のように変わります。「-active」ってクラス名が付きました。<span></span></button>ということは、クラス名がついた時にCSSが上書きされれば良いです。以下のようになります。「.-active」がくっつきました。rotate(-45deg);}ナビゲーションを書くナビゲーションですることは1つだけ。「js-navTarget」というjs用のクラスをつけるだけ。</ul></nav>jQueryを書くjQueryは理解できるまでは大変ですが、1つ1つの意味を検索していけば大丈夫です。HTMLでJavaScript用につけていたクラス名がたくさん出てきますが、クラス名がどこのHTMLを示しているかわかりやすければOKです。ナビゲーションを表示したり、非表示にしたりする});jQueryでやっている動きは3つ。付けたり外したり、表示・非表示は「toggle」という言葉ついてる動作。)に、-activeクラス付ける。表示されていたら、ふんわり非表示わからない時に調べるポイントはこの辺でしょうか?1行づつどんな意味があるのか?1単語づつにどんな意味があるのか?を考えながら調べてみてください。URLをコピーしました!URLをコピーしました!コメットキャットアニメとラノベとゲームが大好き。趣味で小説家になろうやアニメ、ガジェットについて、のんびりと個人ブログを運営中。Catブログは適格販売により収入を得ています。