はじめに
この実験では、ポップアウトメニューを作成することでCSSプログラミングの基本を学びます。この実験の目的は、CSSを使ってホバーやフォーカス時に表示されるインタラクティブなメニューを作成する方法を理解することです。この実験が終わるとき、CSSを使って動的なユーザーインターフェイスを作成する方法をしっかりと理解しているでしょう。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、ポップアウトメニューを作成することでCSSプログラミングの基本を学びます。この実験の目的は、CSSを使ってホバーやフォーカス時に表示されるインタラクティブなメニューを作成する方法を理解することです。この実験が終わるとき、CSSを使って動的なユーザーインターフェイスを作成する方法をしっかりと理解しているでしょう。
VM内には既にindex.html
とstyle.css
が用意されています。
ホバー/フォーカス時にインタラクティブなポップアウトメニューを表示するには、次の手順に従ってください。
left: 100%
を使用して、ポップアウトメニューを親要素の右に配置します。display: none
の代わりにvisibility: hidden
を使用して、トランジションを適用できるようにします。:hover
、:focus
、:focus-within
の疑似クラスセレクタを適用して、ポップアウトメニューをホバー/フォーカス時に表示します。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でさらに多くの実験を練習することができます。