2024年8月から、デイトラでWeb制作コースを学んでいます。
今回は初級編DAY21「調べながら実装しよう」で、jQueryを使って自分でサイトの動きを実装する課題①です。
初級編で構築したスイーツサイトに動きをつける課題が2つのうち今回は、
- ドロワーメニューの実装
に挑戦しました。
えーっと、何から手をつければいいんだっけ？とはじめはそんな状態でした。笑
くうか私なりに、いくつかのサイトやAIを参考にしながら何とかコーディングできたので、備忘録として残しておきます。
くうか（元SEの主婦ミニマリスト）
- 20代でシステムエンジニアを経験（VBやJavaなど）
- ブラック企業だったことで7年ほどでSEを退職
- 2018年からブログ開始
- はてなブログ→WordPress「SWELL」へ（2020年〜）
- オリジナルのブログカスタマイズを公開
- SWELL公式サイトにメインブログが掲載されました
- Webプログラミングを勉強中（今ここ）
まずはjQueryを読み込ませる準備をしよう
まずはjsフォルダを作り、直下にscript.jsファイルを作成。
bodyタグを閉じる直前にjQuery読み込みコードを追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/script.js"></script>うっかり忘れるところだったので最初に書いておこう。
①ドロワーメニューの実装
ヘッダーのナビゲーションメニューの「Menu」がクリックされた時に、ドロワーメニューを表示させるという処理の実装。
ドロワーメニューのHTML
<li class="header-nav-item" id="js-menu">
<a href="#" class="header-nav-link">Menu</a>
<ul class="header-nav-drawer" id="js-drawer">
<li><a href="#">新発売</a></li>
<li></li><a href="#">おすすめ</a></li>
<li></li><a href="#">期間限定</a></li>
</ul>
</li>- <li class=”header-nav-item”>に「js-menu」というidを付与する
- 「Menu」の箇所のhrefのリンク先を、アンカーリンクだったのを”#”のみにする
- クラスheader-nav-item内にドロワーメニューのHTMLを追加する（クラス名「header-nav-drawer」・id名「js-drawer」）
付与したidはCSSとjQueryで使用します。
ドロワーメニューのCSS
正直言うとCSSが1番わかりません。笑
/* ドロワーメニュー */
#js-menu {
position: relative;
}
.header-nav-drawer {
display: none;
width: 90px;
height: auto;
position: absolute;
top: 37px;
left: -18px;
padding: 10px;
background-color: rgba(0,0,0,0.25);
text-align: center;
color: #fff;
font-size: 14px;
line-height: 2;
}重要な部分はposition。
id「js-menu」はpositionのための親（relative）とします。
そしてheader-nav-drawerを子としてabsoluteします。
ドロワーメニューの相対位置を決めるため、親と子の設定が必要になります。（topとleftで位置設定）
ドロワーメニューのjQuery
slideToggle()だけで開閉できますね。
//ドロワーメニューの実装
jQuery("#js-menu").on("click",function(){
jQuery("#js-drawer").slideToggle();
});jQueryはこれだけで済んじゃうなんて…。苦笑
くうかドロワーメニューが表示されればいいんだよね…？リンク先のことは特に書いてなかったのでこれで終了。
【まとめ】jQueryよりCSSの方が難しかった
今回はデイトラ初級編【調べながら実装しよう】jQuery実践課題①「ドロワーメニューの実装」に取り組みました。
コーディングの流れとしては、この順番で書いていきました。
- HTMLを書く
- CSSを書く
- jQueryを書く
私はどうもCSSが苦手らしい。
なんでこのコード入れるの？なくてもいいんじゃない？と考え悩みまくって、入れたり削ったりで時間をかけすぎてしまいました。
jQueryよりCSSの方が理解するのに時間がかかりそうです…。
やっぱり自分でやってみるのが1番身につきそう。
くうかプログラミングは上手く動くとやっぱり楽しいな♪
デイトラは比較的安価だし、自宅で自分のペースで学習できるので私には合っていました。
②③の課題の記事はこちらです。
コメント