インタラクティブな CSS ポップアウトメニューを作成する

Beginner

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、ポップアウトメニューを作成することでCSSプログラミングの基本を学びます。この実験の目的は、CSSを使ってホバーやフォーカス時に表示されるインタラクティブなメニューを作成する方法を理解することです。この実験が終わるとき、CSSを使って動的なユーザーインターフェイスを作成する方法をしっかりと理解しているでしょう。


Skills Graph

ポップアウトメニュー

VM内には既にindex.htmlstyle.cssが用意されています。

ホバー/フォーカス時にインタラクティブなポップアウトメニューを表示するには、次の手順に従ってください。

  1. CSSでleft: 100%を使用して、ポップアウトメニューを親要素の右に配置します。
  2. ポップアウトメニューを最初は非表示にするには、display: noneの代わりにvisibility: hiddenを使用して、トランジションを適用できるようにします。
  3. 親要素に:hover:focus:focus-withinの疑似クラスセレクタを適用して、ポップアウトメニューをホバー/フォーカス時に表示します。
  4. 次のHTMLとCSSコードを使用してください。

HTML:

<div class="reference" tabindex="0">
  <div class="popout-menu">Popout menu</div>
</div>

CSS:

.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 80px;
}

.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #9C27B0;
  color: white;
  padding: 16px;
}

.reference:hover >.popout-menu,
.reference:focus >.popout-menu,
.reference:focus-within >.popout-menu {
  visibility: visible;
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます!あなたはポップアウトメニューの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。