HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.

寻∝梦
풀어 주다: 2018-09-04 14:26:11
원래의
29118명이 탐색했습니다.

이 글은 HTML 내비게이션 바 드롭다운 메뉴의 제작을 소개합니다. 글의 시작 부분에 모든 내비게이션 바 드롭다운 메뉴의 코드가 나와 있습니다. . 이 글을 함께 보시죠

우리가 이야기할 내용은 html 내비게이션 바 드롭다운 메뉴의 생성에 대한 것입니다. 먼저 완전한 예제 코드를 살펴보겠습니다: #🎜 🎜##🎜 🎜#

<style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<div class="dropdown">
  <span>php中文网</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
</div>
로그인 후 복사
이 코드를 모두가 이해할 수 있나요?

설명이 있으니 이해가 안 되셔도 됩니다.

html 탐색 모음 메뉴 예시 분석:

html 탐색 모음 메뉴의 HTML 부분:

#🎜 🎜 # 또는

컨테이너 요소(예:
)를 사용하여 드롭다운 메뉴의 콘텐츠를 만들고 원하는 곳에 배치하세요.

요소를 사용하여 이러한 요소를 래핑하고 CSS를 사용하여 드롭다운 콘텐츠의 스타일을 지정합니다.

html 탐색 모음 메뉴의 CSS 부분:

드롭다운 클래스는 위치: 상대를 사용하여 드롭의 내용을 설정합니다. - 드롭다운에 배치할 다운 메뉴 버튼의 오른쪽 하단 위치입니다(위치:절대 사용).

dropdown-content 클래스는 실제 드롭다운 메뉴입니다. 기본적으로 숨겨져 있으며 지정된 요소로 마우스를 이동한 후에 표시됩니다. 최소 너비 값은 160px로 설정되어 있습니다. 원하는 대로 수정할 수 있습니다. 참고: 드롭다운 콘텐츠를 드롭다운 버튼과 동일한 너비로 설정하려면 너비를 100%로 설정하세요(overflow:auto 설정은 작은 화면에서 스크롤할 수 있음).

box-shadow 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 보이게 만듭니다.

:hover 선택기는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다.

설명을 읽어보니 이제 조금 이해가 되셨나요? 위의 코드에 대한 설명을 살펴보면 이해가 될 것입니다.

이제 브라우저에 표시된 위 코드의 효과를 살펴보겠습니다.

이것은 기본적으로 , 텍스트처럼 전혀 볼 수 없지만 마우스를 위로 올리면 다음과 같이 변경됩니다. HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.

보세요, 이건 코드 효과는 탐색 모음 드롭다운 목록과 마우스를 위로 움직일 때만 반응하는 보이지 않는 탐색 모음이 있다는 것입니다. HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.

네비게이션 바 드롭다운 메뉴를 간단하게 만든 것입니다. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

【에디터 추천】

html 마키 태그에 이미지 스크롤을 설정하는 방법은 무엇인가요? 움직이는 태그에 대한 이미지 스크롤 코드 예


html에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개

위 내용은 HTML 탐색 표시줄에 드롭다운 메뉴를 만드는 방법은 무엇입니까? 자세한 코드 예제는 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿