本記事では前回に引き続き課題制作の学習を記録しています。
RaiseTechのWordPress副業コースが気になっている方やプログラミングスクールってどんな感じなのか気になっている方は是非参考にしてもらえると嬉しいです。
[PR] 筆者が受講しているスクールはこちら
RaiseTechはAWS・Java・副業・デザイン・マーケティングに特化し現場レベルの学習ができるエンジニアリングスクールです。カリキュラムはもちろんあらゆるサポートが充実していることも特徴の1つです。
前回までの進捗状況
ハンバーガーボタン 完了!!ボタンクリックで×ボタンに変える 完了!!メニューとサブメニュー 完了!!
メニューホバーでサブメニュー出現
ハンバーガーボタンクリックでメニュー出現
メニュー右端の＋マーク
メニューホバーで＋をーに変える
ブレイクポイント1200pxのハンバーガーメニューを制作中です。
今日でハンバーガーメニューは完成させてしまいましょう！
前回のお話はこちらから↓
ハンバーガーメニュー作り
ハンバーガーメニューホバーでサブメニュー出現
このような動きはレスポンシブ化前にも実装しましたね。
それと同じ容量でjQueryを使って指定してきましょう。
以前jQueryで実装した時の記事はこちら↓
$('.h-menu__down1').hover(
function(){
$('.h-submenu__1').slideDown(230);
},
function(){
$('.h-submenu__1').hide();
});これを5セットそれぞれのクラスを指定して書くと…
できました！
ハンバーガーメニューボタンクリックでメニュー出現
このようにハンバーガーをクリックするとメニューが降りてくるという動きをjQueryで実装します。
コードはこちらになります。
$('.ham-btn').click(function(){
$(this).toggleClass('active');
$('.h-nav').slideToggle(230); //追記
});.h-nav{
display: none;
position: absolute;
top: 50px;
width: 100%;
//@include hamburger{ 消去
//display: block; 消去
//}; 消去
}SCSSの@include部分を消去しないとボタンを押した際の動きが逆になってしまいます。
↓@include部分を消さなかった場合
slideToggle…?
新たなメソッドが出てきましたね。
これは前回紹介したtoggleメソッドの仲間です。
slideToggleとは
slideDown/slideUpの動作を交互に行う指定ができるメソッド
クリックしたらスライドダウン、またクリックしたらスライドアップという動きを1行で指定することができる優秀なメソッドですね。
できました。次の工程へ進みましょう。
ハンバーガーサブメニュー右端の＋マーク
このメニューの右に出てくる＋とーのマークを作ります。
検証ツールでどのように作られているか覗いてみました。
::before
<a href=”#”>はじめての方へ</a>
::after
::before, ::afterという疑似クラスの組み合わせで作られているみたいですね。まずは::beforeで横棒を作りましょう。
.h-menu{
//[>]追記で.h-menuの直下のaタグ指定に変更
>a{
position: relative;//追記
:
:
&::before{
display: block;
position: absolute;
top: 50%; //.h-menu直下のaタグの真ん中に揃える
right: 13px; //右から13pxに配置
content: ""; //文字を入れますよ宣言（今回は空白）
width: 24px; //線の長さ
height: 2px; //線の太さ
background-color: #121212; //colorプロパティでは色が反映されません
}
}
}
.h-submenu{
display: none;
li{
font-weight: 400;
a{
padding: 11.5px011.5px25px;
color: #131d34; //追記
}
}
}「>」の追記を忘れるとこのようになります↓
::afterの方も作ってしまいましょう。
&::after{
display: block;
position: absolute;
top: 50%;
right: 24px;
content: "";
width: 2px;
height: 24px;
background-color: #121212;
margin-top: -11px; //上下中央ぞろえのマイナスmargin
}
赤の枠で囲っているメニューはサブメニューを持たないので消したいですね。クラス名を変えて調整しましょう。
<li class="h-singlemenu"> //クラス名変更
<a href="#">講師紹介</a>
</li>.h-singlemenu{
background-color: #fff;
font-size: 1.6rem;
font-weight: 600;
>a{
padding: 11.5px 0 11.5px 10px;
color: #131d34;
&:hover{
background-color: #f3fafb;
}
}
}
講師紹介の部分だけ消すことができました。
サブメニューホバーで＋をーに変える
このようにメニューをホバーしたら＋をーに変えたいんです。
::afterをホバーで消すという指定ができたら消せそうですが…
「jQueryでは疑似クラスをセレクタに指定できない！」
ということなので
親のliタグにクラスを付け加える
「付け加えたクラス>a::after」に移動させる
jQueryでホバーしてクラスを削除⇄追加を指定する
調べたところこの3ステップでできそうなのでやってみましょう。
STEP1. 親のliタグにクラス追加
<li class="h-menu h-menu__down1 close">
<a href="#">はじめての方へ</a>closeクラスの追加をサブメニューをもつliタグに全てつけます。
STEP2. &::after内を移動させる
.h-nav{
:
:
.close{
position: relative;
>a::after{
display: block;
position: absolute;
top: 50%;
right: 24px;
content: "";
width: 2px;
height: 24px;
background-color: #121212;
margin-top: -11px;
} //>a::afterの閉じカッコ
} //.closeの閉じカッコ
} //.h-navの閉じカッコ.h-menu下ではなく.close下に置き直して必要な箇所を書き加えていきます。移動もとの「&::after{ }」は消去してOKです。
階層構造に注意する
.h-menuと.closeはクラス名は違いますが階層は同じ位置にあることに注意します。
STEP3. jQueryでhoverしたらクラスを削除⇄追加を指定する
$('.h-menu').hover(
function(){
$(this).removeClass('close');
},
function(){
$(this).addClass('close');
});$('.h-menu').hover(
function(){
$(this).removeClass('close');
},
function(){
$(this).addClass('close');
});.h-menuをhoverすると3行目が発動しhoverが外れると6行目が発動するというものです。
これでhoverした際に.closeが消去されるので先ほど移動させてきたCSS部分が効かなくなる＝縦線が消えます。
またhoverを外すと.closeが復活するので.close部分のCSSが反映される＝縦線が表示されます。
フロント側を確認しましょう！
完璧です✨
これにてブレイクポイント1200pxがようやく終わりました！
最後に
ハンバーガーメニューができたときは本当に感動しました。
まだブレイクポイントが2つほど残っているので次回には課題を完成させましょう…！
今回も読んでいただきありがとうございました。
プログラミングを言語化するのは本当に難しく自分でも何書いているかわからない時もありますし読者の方であれば「何言ってんだ…？」という部分が多々あるかと思いますがプログラミングスクールの雰囲気が少しでも伝わっていれば嬉しいです。
次回も楽しみにしてくれると嬉しいです！
コメント