CSS 드롭 다운 메뉴

이전 : 반응 형 웹 디자인 - 프레임

드롭 다운 메뉴 효과에 이동 마우스 후 디스플레이를 만들기 위해 CSS를 사용합니다.

드롭 다운 메뉴의 예

예를 들면 1 데모

예를 들면 2 데모

예를 들면 3 데모

기본 드롭 다운 메뉴

마우스가 지정된 요소로 이동하면 메뉴가 나타납니다 드롭 다운됩니다.

예

<스타일>
.dropdown {
위치 : 상대;
디스플레이 : 인라인 블록;
}

.dropdown 콘텐츠 {
디스플레이 : 없음;
위치 : 절대;
배경 색상 : # f9f9f9;
최소 폭 : 160 픽셀;
상자 그림자 : 0 픽셀 8px 16px 0 픽셀 RGBA (0,0,0,0.2);
패딩 : 12 픽셀 16px;
Z- 인덱스 : 1;
}

.dropdown : {.dropdown 콘텐츠를 가져
디스플레이 : 블록;
}
</ 스타일>

<사업부 클래스 = "드롭 다운">
나를 통해 <SPAN> 마우스 </ SPAN>
<사업부 클래스 = "드롭 다운 콘텐츠 ">
<P> 안녕하세요! </ P>
</ DIV>
</ DIV>

»시도

분석의 예

HTML 부분 :

우리와 같은 드롭 다운 메뉴, 열, 요소를 HTM 중 하나를 사용할 수 있습니다 : <스팬>, 또는 <버튼> 요소입니다.

컨테이너 요소를 사용하여 (예 : <div>) 드롭 다운 메뉴를 만들고에 넣을 어디서나 배치합니다.

이러한 요소를 래핑하는 <div> 요소를 사용하여 드롭 다운 스타일의 내용을 설정하는 CSS를 사용합니다.

CSS 부분 :

.dropdown 클래스는 사용 position:relative 드롭 다운 메뉴의 컨텐츠는 (사용 드롭 다운 버튼에 위치 설정되는, position:absolute 오른쪽 하단에 위치)를.

.dropdown-content 클래스는 실제 드롭 다운 메뉴입니다. 기본적으로 숨겨져 후 지정된 요소로 이동 마우스에 표시됩니다. 참고 min-width 값을 160 픽셀로 설정됩니다. 자유롭게 수정할 수 있습니다. 참고 : 드롭 다운을 설정하고 드롭 다운 일관된 광대역 콘텐츠의 버튼을하려면 설정 width (100 % overflow:auto 화면의 작은 크기를 스크롤 할 수 있습니다 설정).

우리는 사용 box-shadow 속성은 모양의 드롭 다운 메뉴 있습니다 "카드를."

:hover 마우스를 드롭 다운 버튼으로 이동하면 사용자가 드롭 다운 메뉴 선택이 나타납니다.

드롭 다운 메뉴

목록에서 항목을 선택하도록 사용자에게 드롭 다운 메뉴를 만들고 있습니다 :

우리가 드롭 다운 목록에 링크를 추가하고, 스타일을 설정 유사한 경우의 상기 예 :

예

<스타일>
/ * 스타일 드롭 다운 버튼 * /
.dropbtn {
배경 색상 : # 4CAF50;
색상 : 흰색;
패딩 : 16px;
글꼴 크기 : 16px;
테두리 : 없음;
커서 : 포인터;
}

/ * 컨테이너 <div> - 드롭 다운 내용을 찾을 필요가 * /
.dropdown {
위치 : 상대;
디스플레이 : 인라인 블록;
}

(기본적으로 숨겨져) / * 풀다운 내용 * /
.dropdown 콘텐츠 {
디스플레이 : 없음;
위치 : 절대;
배경 색상 : # f9f9f9;
최소 폭 : 160 픽셀;
상자 그림자 : 0 픽셀 8px 16px 0 픽셀 RGBA (0,0,0,0.2);
}

/ * 링크 드롭 다운 메뉴 * /
.dropdown-을 내용으로 {
색상 : 검정;
패딩 : 12 픽셀 16px;
텍스트 장식 : 없음;
디스플레이 : 블록;
}

/ * 편집 드롭 다운 메뉴 호버 링크 색상에 따라 * /
.dropdown-을 내용 : 호버 {배경 색 : f1f1f1 #}

/ * 표시 드롭 다운 메뉴 호버 * 후 /
.dropdown : {.dropdown 콘텐츠를 가져
디스플레이 : 블록;
}

/ * 드롭 다운 단추를 한 후 드롭 다운의 내용이 수정 된 배경 색상을 표시 * /
.dropdown : {.dropbtn 가져
배경 색상 : # 3e8e41;
}
</ 스타일>

<사업부 클래스 = "드롭 다운">
<Button 클래스 = "dropbtn"> 드롭 다운 메뉴 </ 버튼>
<사업부 클래스 = "드롭 다운 콘텐츠 ">
href가 = "#">이 튜토리얼 1 </ A>
href가 = "#">이 튜토리얼 2 </ A>
href가 = "#">이 튜토리얼 3 </ A>
</ DIV>
</ DIV>

»시도

정렬 드롭 다운 내용

플로트 : 왼쪽;

플로트 : 오른쪽;

당신이 바로 콘텐츠를 왼쪽 대신 오른쪽으로 오른쪽에서 왼쪽으로되어 떠있는 드롭 다운 메뉴를 설정하려면, 다음과 같은 코드를 추가 할 수있는 right: 0;

예

.dropdown 콘텐츠 {
오른쪽 : 0;
}

»시도

더 많은 예제

사진 드롭 다운
이 예제에서는 풀다운 메뉴의 그림을 추가하는 방법을 보여줍니다.

네비게이션 드롭 다운
이 예는 탐색 모음에서 드롭 다운 메뉴를 추가하는 방법을 보여줍니다.