如何创建：大型菜单

学习如何创建大型菜单（导航栏中的全宽下拉菜单）。

创建大型菜单

创建一个下拉菜单，当用户将鼠标移动到导航栏中的元素上时会显示该菜单。

第一步 - 添加 HTML：

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">링크 1</a>
          <a href="#">링크 2</a>
          <a href="#">링크 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">링크 1</a>
          <a href="#">링크 2</a>
          <a href="#">링크 3</a>
        </div>
        <div class="column">
          <h3>카테고리 3</h3>
          <a href="#">링크 1</a>
          <a href="#">링크 2</a>
          <a href="#">링크 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

예시 설명:

可以使用任何元素来打开下拉菜单，例如 <button>、<a> 或 <p> 元素。

使用容器元素（如 <div class="dropdown-content">）创建下拉菜单，并添加网格（列），然后在网格内添加下拉菜单链接。

下拉菜单按钮和容器元素（<div class="dropdown-content">）使用 <div class="dropdown"> 元素包裹起来，以便使用 CSS 正确定位下拉菜单。

第二步 - CSS 추가:

/* 네비게이션 바 컨테이너 */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* 네비게이션 바 내의 링크 */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 드롭다운 메뉴 컨테이너 */
.dropdown {
  float: left;
  overflow: hidden;
}
/* 드롭다운 메뉴 버튼 */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* 모바일 단말기의 수직 정렬에 중요합니다 */
  margin: 0; /* 모바일 단말기의 수직 정렬에 중요합니다 */
}
/* 마우스 오버 시 네비게이션 링크에 빨간 배경색 추가 */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* 드롭다운 목록 내용(기본적으로 숨기기) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 대형 메뉴 제목(필요시) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* 마우스 오버 시 드롭다운 메뉴 표시 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 세 개의 동일한 너비의 열을 생성하고 가로로 배치 */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* 열 내의 링크에 스타일 설정 */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* 마우스 오버 시 배경색 추가 */
.column a:hover {
  background-color: #ddd;
}
/* 열 뒤의 플로팅을 정리 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

직접 시도해보세요

예시 설명:

네비게이션 바와 네비게이션 링크에 배경색, 여유 공간 등 스타일을 설정했습니다.

드롭다운 메뉴 버튼에 배경색, 여유 공간 등 스타일을 설정했습니다.

.dropdown-content 클래스는 실제 드롭다운 메뉴를 포함하고 있습니다. 기본적으로 숨겨져 있으며 마우스를 올리면 표시됩니다(아래 참조). 드롭다운 메뉴 버튼 아래에 배치되며 너비는 100%로 설정하여 전체 화면을 덮습니다.

불러서 사용하지 않았습니다. 대신 box-shadow 속성을 사용하여 드롭다운 메뉴가 "카드"처럼 보이게 합니다. 또한 z-index 드롭다운 메뉴를 다른 요소 앞에 배치합니다.

:hover 선택자는 사용자가 드롭다운 메뉴 버튼에 마우스를 올리면 드롭다운 메뉴를 표시합니다.

.column 클래스는 드롭다운 메뉴 내에 세 개의 가로 배치된 블로킹 열을 생성하여 다른 카테고리를 표시합니다.

관련 페이지

튜토리얼:CSS 드롭다운 메뉴

튜토리얼:클릭 가능한 드롭다운 메뉴를 어떻게 만드는가

튜토리얼:CSS 네비게이션 바

튜토리얼:응답형 상단 네비게이션 바를 어떻게 만드는가