デイトラjQuery実践課題①【初級】

ドロワーメニュー デイトラ

リニューアルされたウェブ制作コース再チャレンジ

デイトラのウェブ制作コースを受講したのは２０２２年１２月でした。

ここで基礎を学んで自分でサイトを作れるようにはなった状態でフランスのプログラミング専門学校の入試試験を受けました。

フランスのプログラミング専門学校も卒業して今はフリーランスの準備中。

デイトラがそういえば少し前にリニューアルされたと情報を得たので実力を上げなおすために再チャレンジ！サポートは終了しているので完全に自分でなんとかしないといけません。

随分とレベルが上がった印象です。２０２２年に中級に位置した授業がリニューアル後は初級に移動。

ChatGPTやプログラミング初心者のレベルが近年上がっているからかな？

何気に最近サーバーサイドの勉強ばかりだったので、基礎的なコーディングも然り少し難しめの実装だったり久しぶり挑戦する価値ありの内容です。忘れている部分も多かったので本当にためになりました。

ドロワーメニュー実装

さて、初級編のjQuery学習を終え自分で実装という課題に挑戦。

実践課題①はドロワーメニューの実装。

【HTML側で付け加える事】

 <li class="header-nav-item" id="slideToggle">
              <a href="#" class="header-nav-link">Menu</a>
              <ul class="toggle-list">
                <li><a href="#">新発売</a></li>
                <li><a href="#">おすすめ</a></li>
                <li><a href="#">期間限定</a></li>
              </ul>
            </li>

【CSS側での処理】


/* ドロワーメニュー */
#slideToggle{
  position: relative;/*これは親、子は.toggle-listでposition: absolute*/
}

.toggle-list{
  display: none;/*デフォルトは消しておく*/
  width: 80px;
  height: auto;
  position: absolute;
  top: 38px;
  left: -13px;
  background-color: rgba(0,0,0, 0.25);
  font-size: 13px;
  text-align: center;
  padding: 10px;
  color: rgba(255, 255, 255, 0.9);
}
.toggle-list>li{
  padding-top: 10px;
}

【jQueryでの処理】

jQuery("#slideToggle").on("click",function(){
    jQuery(".toggle-list").slideToggle();
})

まとめ

久しぶりのTheコード。筋トレのように効くううううう。やっぱり鍛えないと忘れちゃいますね。

でもやはり楽しい☆

コメント