w3.css

드롭업

CSS를 사용하여 드롭업 메뉴를 만드는 방법을 알아보자.

호버링 가능한 드롭업 생성

사용자가 요소 위로 마우스를 이동할 때 나타나는 드롭업 메뉴를 만든다.

1단계) HTML 추가

<div class="dropup">
  <button class="dropbtn">Dropup</button>
  <div class="dropup-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

드롭업 메뉴를 열려면 <button>, <a> 또는 <p> 요소와 같은 요소를 사용한다.

컨테이너 요소(예: <div>)를 사용하여 드롭업 메뉴를 만들고 그 안에 드롭업 링크를 추가한다.

CSS를 사용하여 드롭업 메뉴의 위치를 ​​올바르게 지정하려면 버튼과 <div> 주위에 <div> 요소를 래핑한다.

2단계) CSS 추가

/* Dropup Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container 
 - needed to position the dropup content */
.dropup {
  position: relative;
  display: inline-block;
}

/* Dropup content (Hidden by Default) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropup */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}

/* Show the dropup menu on hover */
.dropup:hover .dropup-content {
  display: block;
}

/* Change the background color of the dropup button when the dropup content is shown */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

배경색, 패딩 등으로 드롭업 버튼을 스타일링했다.

.dropup 클래스는 position:relative를 사용한다.
이는 드롭업 내용을 드롭업 버튼 위에 배치할 때 필요하다(position:absolute 사용).

.dropup-content 클래스는 실제 드롭업 메뉴를 유지한다.
기본적으로 숨겨져 있으며, 호버(아래 참조)에 표시된다.

최소 너비는 160px로 설정되어 있다. 이 내용을 자유롭게 변경할 수 있다.

⭐ 드롭업 콘텐츠의 너비를 드롭업 버튼만큼 넓게 설정하려면 너비를 100%(및 오버플로:auto)로 설정하여 작은 화면에서 스크롤할 수 있도록 하자.

우리는 테두리를 사용하는 대신 상자 그림자 속성을 사용하여 드롭업 메뉴를 “카드”처럼 보이게 만들었다.
우리는 또한 z-index를 사용하여 드롭업을 다른 요소들 앞에 배치한다.

:hover selector는 사용자가 마우스를 드롭업 버튼 위로 이동할 때 드롭업 메뉴를 표시하는 데 사용된다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기