【レスポンシブ】ハンバーガーメニューに大苦戦!ウェブカツでのプログラミング学習記録

ウェブカツプログラミング学習

みなさん、確実に無意識で使っているであろうあのいつも右上に表示されるハンバーガーメニュー「三→×」。

何気なく押して、その中から選んでページ遷移してますよね。ね。

あれが、プログラミングする側になったらこんなに難しいとは・・・。ウェブカツのHTML、CSS上級部にこのスキルが該当するのですが、4日くらい固まってました。webページを作るにはこの機能実装が必須なのは素人でもわかるので、とにかく頑張りました。

今勉強中でつまづいている人、プログラミングってどんなんなん?って人に紹介したいと思います。

ハンバーガーメニューに必要なのは、HTML、CSS、JavaScriptの3言語

ハンバーガーメニューはこの3つで成り立っています。要はハンバーガーのように「三」見えることからその名がついています。これをクリックすると、どこに飛びたいか、何が見たいかを選べるわけなのです。

びっくりしたのは、HTMLのその構造です。

簡単に言っちゃうと、これだけ。

<div class=”menu-trigger humberger-sp-menu”>

<span></span>

<span></span>

<span></span>

</div>

そう、spanタグ3つで線を作るんですね!線を作るのはもちろん、CSSのプログラミングです。(ウェブカツではSCSSでやってますが、勝手にコードを公開するのもあれなので、CSSの書き方を調べました。(参考サイト:https://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html)

CSS

.menu-trigger{

display: inline-block;

all: .4s;

box-sizing:border-box;

position:relative;

font-size: 44px;

}

.menu-trigger span{

position: absolute;

left:0;

width: 100%;

height: 4px;

border-radius: 4px;

&:nth-of-type(1){

top:0;

}

&:nth-of-type(2){

top: 20px;

}

&:nth-of-type(3){

bottom: 0;

}

まあ、それはネットを調べれば出てくるんですけど、問題は、JavaScript!

ハンバーガーメニューを押したらメニューが出てくるところまではいいけど、それが、その中のどれかのメニューを押した時に、自動的に元のハンバーガーに戻って画面表示をするってプログラミングが、なかなか検索しても出てこない。

ハンバーガーメニューを作るには:toggleClassでクラス名を付け外し!

JavaScriptの中の便利な機能にtoggleClassというのがあります。要は、指定したクラスにこれから言うクラスがついているかいないか、と言うのを瞬時に判断し、クラス名があれば取り外し、なければ付けると言うことをしてくれるプログラミング機能なんです。

toggleClass 例

$(function(){

$(‘.humberger-sp-menu’).on(‘click’,function(){

$(this).toggleClass(‘active’);

↑ハンバーガーSPメニュー(ハンバーガーメニュー)がクリックされたら、

アクティブが彼女か確認してね、彼女じゃないなら付き合わせてあげてね。( いたら別れさせてね・・・)

$(‘.humberger-sp-menu-target’).toggleClass(‘active’);

そして、ターゲットくんにも、 アクティブな彼女がいるか確認して、付き合わせてあげてね(いたら別れさせてね・・・)

こうすれば、「active(アクティブな彼女)」がいるときの表示条件を表記すれば、同じハンバーガーくんにも2パターンの表示ができるわけですよね。

ここまでは良かったんですが、問題は、「出てきたメニューの中をクリックした時に、自動的にactiveを外す」、という行為。

これがなかなか探しても載ってなかったんです。。。結局、そんな難しくないと気づいたのは4日ほど粘った後でした・・・。

ハンバーガーメニュー開いてから、何かクリックしたらメニューを閉じる仕組みはremoveClass

ここからはずっと戦いです。デベロッパーツールvs私。 どこにアクティブな彼女ちゃん(class=”active’)がついているのか。何度もデベロッパーツールでハンバーガーメニューを押しては閉じ、押しては閉じ。

そして、 メニューのどれかが押された時に全体的に動いてくれる王様のような人を探す。そして、その人を見つけ出し、その王様の部下がどれかクリックされた時は、アクティブな彼女を別れさせる(removeClass)する。これだけです。

そしたら。。。「できとぅああああああ!!!!!」

一人で作業してましたが思わず歓喜の声が漏れました。

結論:ハンバーガーメニューを作るならデベロッパーツールは必須。一つ一つ動きを確認してみよう

今まで、たいしてプログラミング学習の際、デベロッパーツールを使っていませんでした。使わなきゃいけないのに、うわべだけって感じで。でも、 デベロッパーくん、実はめちゃめちゃヒントをくれたんです。

というわけで、まだプログラミング勉強してるのにデベロッパーツールをそんな使ってないという人は、無駄にどのページでもとりあえずデベロッパーツール見るっていうのをやってみてください。色々なコードがあっておもしろいですよ。

プログラミングに必要なヒントのツールはたくさんありますが、今のところ、pho.log 、yarn-error-log 、デベロッパーツールには大変お世話になりました。これは使えるようになっていないとダメなやつなので、チェックしてみてね!

偉そう(?)なことを書きましたが、私はプログラミングど初心者です。2019年4月6日、手に職をつけたくて意を決して入部しました。

ウェブカツは、完全に負んぶに抱っこではないので時に厳しいですが、実務スキルがしっかり身につくスクールです。そして、今は開発にも携わらせてもらってます!

生徒の分際でプログラミングの共同開発を経験させてもらえるなんて、なかなかないです!

ウェブカツの女性割引で入部してますが、この制度は10月末までだそう。でも、本気で手に職つけたい(プログラミングをモノにしたい)人にはうってつけのスクールです。

ウェブカツが気になる方はこちら↓

ABOUTこの記事をかいた人

取り柄=英会話。【毎日が楽しい】人生を追い求めて2●年。【職歴】海外営業→英会話講師→広告営業→事務で今に至る。【仕事=楽しい】を探し続けた結果、ライターになりたいことに気付く。現在は会社員の傍らブログの更新、ライターとしても活動しようと模索中。 決断に困ったときは【1年後死んで後悔しないか?】自分に聞く。