CSS ポップアウトメニュー | インタラクティブなユーザーインターフェイス

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 92%です。学習者から 100% の好評価を得ています。

ポップアウトメニュー

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

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

CSS でleft: 100%を使用して、ポップアウトメニューを親要素の右に配置します。
ポップアウトメニューを最初は非表示にするには、display: noneの代わりにvisibility: hiddenを使用して、トランジションを適用できるようにします。
親要素に:hover、:focus、:focus-withinの疑似クラスセレクタを適用して、ポップアウトメニューをホバー/フォーカス時に表示します。
次の 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 でさらに多くの実験を練習することができます。

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

はじめに

ポップアウトメニュー

まとめ