CSS 팝아웃 메뉴 | 인터랙티브 사용자 인터페이스

소개

이 랩에서는 팝아웃 메뉴를 생성하여 CSS 프로그래밍의 기본 사항을 탐구합니다. 이 랩의 목적은 CSS 를 사용하여 마우스 오버 또는 포커스 시 나타나는 대화형 메뉴를 만드는 방법을 이해하도록 돕는 것입니다. 이 랩이 끝나면 CSS 를 사용하여 동적 사용자 인터페이스를 만드는 방법에 대한 확실한 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 92%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

팝아웃 메뉴

index.html 및 style.css는 이미 VM 에 제공되었습니다.

마우스 오버/포커스 시 대화형 팝아웃 메뉴를 표시하려면 다음 단계를 따르세요.

CSS 에서 left: 100%를 사용하여 팝아웃 메뉴를 부모 요소의 오른쪽에 배치합니다.
전환 (transition) 을 적용할 수 있도록, 처음에는 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 팝아웃 메뉴 만들기

소개

팝아웃 메뉴

요약