本記事では前回に引き続き課題制作の学習を記録しています。
RaiseTechのWordPress副業コースが気になっている方やプログラミングスクールってどんな感じなのか気になっている方は是非参考にしてもらえると嬉しいです。
[PR] 筆者が受講しているスクールはこちら
RaiseTechはAWS・Java・副業・デザイン・マーケティングに特化し現場レベルの学習ができるエンジニアリングスクールです。カリキュラムはもちろんあらゆるサポートが充実していることも特徴の1つです。
前回までの進捗状況
前回で動きなどはありませんがパソコン画面での見た目が完成しました！
前回やることとして
・ドロップダウンリスト作り
・レスポンシブ化
の2つを挙げましたがまずはドロップダウンリストから作っていきます！
RaiseTech課題制作
jQueryの基礎学習
この日からは以下のような動きをつけていきます！
動きの付け方は jQuery、JavaScriptなどありますが文法が短くわかりやすい jQueryで実装していくことにしました。
基本構文はProgateで事前に学習していたのでそこの教材をもとにコーディングしていこうと思いましたが…！
jQueryってどうやって書いていくんだろう。
Progateでは環境構築はカリキュラムに入っていないので構文はわかってもどこに書いていけば良いのか分かりませんでした。
🔎 jQuery 入門
YouTubeの方が学習しやすいのでYouTubeで検索しこちらの動画を参考にさせていただきました！
1. jQuery公式サイトから「compressed」(圧縮) になっているファイルをダウンロード
2. 取り込みたいディレクトリ内に移動
3. htmlファイルの<script src=”jQueryファイルのパス”>で読み込ませる
4. 直下にscriptタグを書いて jQueryスタート！
簡単に書くとこのような流れですね。
これで jQueryを書く準備が整いました！
CSSでホバー時の装飾
まず私がつけたい動きがホバーしたときの背景色です。
こちらはCSSでつけられるので、
&:hover {
background-color: #000; //値はサンプル
}//（一部抜粋）私はscss（sass）を使っているのでこの書き方になります。
ちゃんとできました！
ドロップダウンメニューをHTMLで作る
次はホバーをしたら出てくるメニューを作成していきます！
メニューの中にメニューを作る…。検証ツールを覗いてみました。
ul li ul li
もう少しわかりやすく書くと
<ul>
<li>
<ul>
<li></li>
<ul>
<li>
</ul>リストの中にリストを作りたい時はこのような構図にするといいみたいですね！
なんかCSSつけてないけど背景がホバーのときに変わるようになってます笑
CSSで位置を整える
位置がおかしくなっているので整えてあげたいです。どんなプロパティを使って整えるのでしょうか？検証ツールを見てみましょう。
position: relative
position: absolute
positionプロパティで整えられるみたいですね。relativeとabsoluteについて調べてみました。
relative 相対位置への配置
absolute 絶対位置への配置
んー。分かりにくいですね。もう少し調べてみました。
relative
初期値を基準として配置されている位置
top, bottom, right, leftを指定することで表示させたい位置に移動させられる
absolute
親要素にposition: static以外指定→親要素の左上を基準として配置する
親要素にposition: static指定→ウィンドウの左上を基準として配置する
つまりabsoluteを使いたいならrelativeを親要素に指定して使いましょうということですかね。
やってみましょう。
li{
.drop-btn{
position: relative;
}
}
ul{
.submenu{
position: absolute;
background-color: #e9f8fb;
}
}分かりやすいように背景をつけました。
文字が改行されて重なっているので解除してあげましょう。
ul{
.submenu{
white-space: nowrap;
}
}
上に変な余白がありますね。どんな指定をしたら消えるのでしょうか？
🔎ul 上 余白
margin-top: 0; や padding-top: 0; を指定で消える
このような情報があったので試してみたのですが消えなかった。
模写中の検証ツールを見てみると、
positionのtopに70が入ってますね。これを0にしてあげると戻るのでしょうか？
ul{
.submenu{
top: 0;
}
}
あらら。上のメニューと被っちゃいました。
z-indexで調整をしようと思いましたが全く効かず…。質問をさせてもらいました！
ulの上の余白ってどうしたら消えますか…？
コードに不要な文字は入っていないか確認してみてください！
というアドバイスをいただいたのでコードを確認したところ…
ありました！余計なスペースが。これが原因だったんですね。消去して
.submenu{
top: 70;
}こちらを指定してあげると
できました！
スペースを入れるだけであんなにも変わってしまうんですね。恐ろしい。
CSSでドロップダウンメニューを装飾
あとはホバー時の背景とフォントの色、余白などを調整します。
.submenu{
a {
font-weight: 500;
padding: 5px 60px 5px 15px;
line-height: 60px;
&:hover {
background-color: #fff;
color: #2498b3;
}
}
}次は動きをつけていきます！
ドロップダウンメニューをjQueryで動かす
本日はホバーしたら下がってくるという動きを作っていきます！
JavaScriptでもできますが構文が簡単なjQueryを使って今回は動きをつけていきます！
ちなみにjQueryの初歩知識はProgateで学んだのでそちらを参考にしながら進めていきます。
まずはホバーするまでは表示させたくないので
.submenu{
display: none;
}で非表示にします。それではjQueryを始めていきましょう！
$(function(){
$('セレクタ').イベント(
function(){
$('セレクタ').イベント();
},
function(){
$('セレクタ').イベント();
}
);
});行数は動きによって異なりますが以上はホバー、外すで動きをつける場合の基盤のコードになります。
セレクタとイベントを当てはめていきましょう。
$(function() {
$('.drop-btn').hover(
function(){
$('.submenu').slideDown();
},
function(){
$('.submenu').hide();
}
);
});.drop-btn を .hover すると .submenu が.slideDown され、ホバーが外れると .submenu が .hideするという形になります！
ちゃんとできていますね。
少しスピードを速くしたいので指定してあげましょう。
$('.submenu').slideDown(230);スピードを指定する場合は（）内に数値を入れてあげます。
1.5秒で動いて欲しい場合は1500というように1000倍した数値を指定すると速さを指定できるみたいです。
今回は速くするために230に設定しました。0.23秒ということです。
あ、同じクラスに指定してるところをホバーにすると開いてしまいます。
2つ目のクラスを作ってそちらをセレクタにしないといけない感じですね。
またsubmenuクラスにもクラスを追加します。
ドロップダウンを持つliを左からdown1,down2・・・とクラスを追加
li下のulもsubmenu1,submenu2・・・とクラス命名
セレクタ('.drop-btn')から('.down1')に変更
セレクタ('.submenu')から('submenu1')に変更なんとなく作り方はわかったので全部のメニューを完成させましょう。
.submenu{
a{
height: auto;
line-height: 52px;
padding: 3px 60px 3px 15px;
}
}できました！！！めっちゃカッコ良くなった！
まだ課題完成ではありません。次回からはレスポンシブ化です。
レスポンシブで有名なハンバーガーメニューも作ります。
最後に
動きをつけるのって難しいことだと思っていましたがjQueryを使うと楽にできました。
ホバー以外にもイベントがあるのでどんどん調べて使ってみたいです！
次からはレスポンシブ化でハンバーガーを作る作業に入りますが、ものすごい時間かかっています。
とんでもない量の情報をかき集めて真似して実装していますが失敗しかしていません笑
次回記事も読んでいただけると嬉しいです。
コメント