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

はじめに

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

Skills Graph

ポップアウトメニュー

VM内には既にindex.htmlとstyle.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でさらに多くの実験を練習することができます。