30DAYSトライアル2nd

デイトラ(30DAYSトライアル)中級コース(2nd)まとめ【DAY24】

デイトラ(30DAYSトライアル)中級コース(2nd)の課題は「ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理)」です。

課題の記事はデイトラWebアプリ版で確認ください。

デイトラWebアプリ版をまだ初めてない方は、デイトラWebアプリ版の始め方の記事も書いていますので、そちらもよろしくお願いします。

ちなみに中級コースは今まで2ndと呼ばれていた部分になります。

デイトラ(30DAYSトライアル)中級コースDAY24の完成イメージ

デイトラ(30DAYSトライアル)D中級コースDAY24の完成イメージは以下の通りです。

ヘッダーのナビゲーションメニューにマウスを当てた時に赤色の下線を引くようにしていると思いますが、それをクリックしたメニューに残したままにするというイメージです。




デイトラ(30DAYSトライアル)中級コースDAY24の仕様

デイトラ(30DAYSトライアル)D中級コースDAY24の完成イメージが読み取れるかと思いますが、以下のような仕様で作成しています。

  • ヘッダーのナビゲーションメニューの各メニューにマウスを当てている間と赤色の下線を表示させる
  • ヘッダーのナビゲーションメニューの各メニューをクリックすると赤色の下線を表示させたまましえ、該当セクションにスクロールする
  • 画面のスクロールとヘッダーのナビゲーションメニューの下線は連動しない
    (ナビゲーションメニューのクリック以外で画面をスクロールさせても、ナビゲーションメニューの下線は最後にクリックしたものに表示したままとする




デイトラ(30DAYSトライアル)中級コースDAY24の実装

デイトラ(30DAYSトライアル)D中級コースDAY24の実装は以下のようにしました。

  • ヘッダーのナビゲーションメニューに
  • ヘッダーのナビゲーションメニュー用の「link-active」クラスを用意
  • 「link-active」クラスに赤色の下線を引くスタイルをつける
  • ヘッダーのナビゲーションメニューのクリックイベントで以下を行う
  • ヘッダーのナビゲーションメニュー全てから「link-active」クラスを削除する
  • クリックされたヘッダーのナビゲーションメニューに「link-active」クラスを追加する

実際の僕のコードは以下の通りです。




感想・まとめ

ポイントはクリックした時に、全てのナビゲーションメニューから赤色の下線を引くためのクラスを削除することですかね。

ついついクリックされたメニューだけのクラスを削除してしまうと、赤色の下線が消えなくなるという状態になってしまうので注意が必要です。

個人的にはHTML・CSSでマークアップしてるよりもjQuery(JavaScript)とかを書いているほうが断然楽しいですね。

元々今の会社でもUIはほとんど作っておらず、UIの内部処理ばかりを作ってたんで当然っちゃ当然かもしれませんが。

最終課題はまであと2日分。

引き続き頑張っていきましょー!!

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す