Flexbox로 메가 메뉴 구축-CSS 튜토리얼-php.cn

Building Mega Menus with Flexbox

코어 포인트

Flexbox는 CSS 레이아웃 모델로, 개발자는 중복 CSS 및 JavaScript 트릭에 의존하지 않고 복잡한 UI를 만들 수 있습니다. 선형 레이아웃 모델을 사용하여 계산을 간격하지 않고 컨텐츠를 수평 또는 수직으로 쉽게 레이아웃 할 수 있습니다.

Flexbox는 거대한 내비게이션 메뉴가있는 웹 사이트를 만드는 데 사용될 수 있습니다. 이 레이아웃 모델을 사용하면 간단한 탐색 막대, 단일 드롭 다운 메뉴 세그먼트 및 단일 드롭 다운 메뉴 세그먼트를 3 개의 열로 제한 할 수 있습니다. 플렉스 레이아웃은 컨테이너 내의 요소에 반응하여 미디어 쿼리의 필요성을 줄입니다.

이 튜토리얼에서 만든 최종 메가 메뉴는 완전히 반응하지 않습니다. 메인 메뉴 표시 줄는 더 작은 화면에 나타나지 만 거대한 메뉴를 사용할 수 없으며 최상위 링크 만 사용할 수 있습니다. 그러나이 튜토리얼은 Flexbox의 힘과 단순성을 잘 보여줍니다.

아시다시피, Flexbox는 최근 브라우저 지원이 증가함에 따라 많은 관심을 끌었습니다. 이를 통해 개발자는 중복 CS 및 JavaScript 트릭에 의존하지 않고 복잡한 UI를 구축 할 수 있습니다.

Flexbox는 선형 레이아웃 모델을 사용하여 계산을 간격없이 수평 또는 수직으로 레이아웃 할 수 있습니다. 플렉스 레이아웃은 컨테이너 내의 요소에 반응하여 미디어 쿼리의 필요성을 줄입니다.

이 기사에서는이 레이아웃 모델을 사용하여 거대한 탐색 메뉴를 작성하고 프로세스에서 Flexbox를 사용하여 UI 구성 요소를 구축하고 확장하는 것이 얼마나 쉬운 지 볼 수 있습니다.

나는 여기에서 개별 Flexbox 속성에 대해 자세히 논의하지 않지만 이러한 기능의 실제 적용에 중점을 둘 것입니다. Flexbox에 대한 기본 소개는 다음 리소스를 참조하십시오.

Guy Routledge의 Flexbox 튜토리얼 Flexbox 초보자 친화적 인 소개 flexbox 완전 가이드

우리는 무엇을 구축 할 것인가?

빌드 방법을 알아 보려면 전체 화면 코드펜을 확인하십시오.

이 튜토리얼은 세 부분으로 나뉩니다

내비게이션 바 구축 : Flexbox를 사용하여 가상의 전자 상거래 플랫폼을위한 간단한 내비게이션 바를 구축하십시오

단일 드롭 다운 메뉴 세그먼트를 빌드

단일 드롭 다운 메뉴 세그먼트를 3 개의 열로 제한하십시오

빌드 내비게이션 바 내비게이션 막대의 표시는 간단합니다. 데모 목적으로, 나는 두 가지 클래스 (Navbar 및 메뉴)를 사용하여 모든 것을 처리합니다. 여기 CSS는이 튜토리얼과 관련이없는 스타일을 제외합니다.

내비게이션 항목이 수평으로 배열되기를 원합니다. 또한 공간이 충분하지 않으면 각 항목이 똑같이 똑같이 이격되고 수요가 좁아지기를 원합니다.

먼저, .menu 요소에서 Flex 형식 형식 컨텍스트를 만들어야합니다. 이제 .menu 요소 (즉, Flex 컨테이너)의 모든 직접 어린이는 Flex 프로젝트가됩니다.

다음, 메뉴 항목의 너비가 동일하기를 원합니다. 나는 를 동일한 너비로 고르게 자라도록 추가했습니다. 코드는 다음과 같습니다. <code>display: flex 코드보기, 왜 모든 Flex 프로젝트 (.Navbar .menu li)를 재사용하는 이유가 궁금 할 것입니다.

데모에서 메뉴 항목 위로 마우스를 올릴 때 배경색이 변경됩니다. 플렉스 프로젝트의 속성을 로 설정하지 않으면 Li 요소 만 너비가 같고 내부 컨텐츠는 그렇지 않습니다 (즉, 일부 강조 표시된 부품은 클릭 가능하지만 일부는 클릭 할 수 없습니다. ).

컨텐츠를 부모 요소의 전체 너비로 확장하기 위해 Flex 프로젝트 자체를 Flex 컨테이너로 전환했습니다. 이 설정을 사용하면 각각의 중첩 된 요소를 부모만큼 넓게 만들 수 있습니다 ( 사용). flex: 1 또는 Li 요소를 Flex 컨테이너에 설정하지 않고도 이것을 달성 할 수 있지만 세 가지 추가 속성 (, , )을 사용해야 하며이 상황을 피하는 것이 좋습니다. .

이 데모는 지금까지 수행 된 일을 보여줍니다.

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

로그인 후 복사

단 5 개의 CSS Flexbox 속성에서 내비게이션 바가 준비되었습니다. 보시다시피, 이것은 깔끔한 솔루션입니다.

다음 섹션에서는 거대한 탐색을 구축하는 방법의 일부를 보여 드리겠습니다. display: flex 단일 드롭 다운 메뉴 세그먼트를 빌드

다음은 여러 세그먼트로 확장 될 단일 드롭 다운 메뉴 세그먼트를 빌드하는 데 사용되는 마크 업입니다. 컨테이너 __ 목록 프로젝트는 추가 세그먼트를 만들기 위해 복사됩니다.

display 컨테이너는 플렉스 컨테이너이며 각 직접 하위 요소 (즉, Container__List)는 Flex 프로젝트입니다. 각 컨테이너 __list에는 여러 개의 내비게이션 항목이 있으며 각 컨테이너 __listime에 의해 포장됩니다. 나는 DIV에 내용을 포장했고 나중에 다시 돌아갈 것입니다. flex 다음은 css입니다 : <🎜 🎜>

컨테이너 __list에서

속성을 사용했지만 내비게이션 막대 자체에 사용하지 않았습니다. 앞에서 언급했듯이 공간이 부족할 때 내비게이션 바 항목이 포장되는 것을 원하지 않습니다. 대신, 가용 수평 공간이 감소하면 고르게 줄어 듭니다. flex: 1 그러나 컨테이너 __ 목록 프로젝트의 경우 요구 사항이 정확히 반대입니다. 내 목록 항목이 공간의 25%를 사용하기를 원하므로 각 행은 최대 4 개의 항목을 보유하고

로 수행 할 수 있습니다.

<<> 나는 또한 display: inline-block를 0으로 설정합니다. 이것은 4 미만의 균일하게 분포 된 품목을 방지하기 때문에 유용합니다. 0으로 설정함으로써 프로젝트가 공간의 25%를 유지하도록 강요합니다. width: 100% 지금 DIV에 싸인 내용은 어떻습니까? 콘텐츠가 넘치지 않도록하는 상황을 처리하고 싶습니다. 콘텐츠가 Flex Child 요소 (예 : Container__ListItem)에 직접있을 때 매우 간단합니다. 컷 텍스트를 다음 코드를 사용하여 엘립스 시스 ( "…")로 바꿀 수 있습니다.

그러나이 경우 컨테이너 __ListItem으로 래핑되는 DIV에 내용을 넣습니다. 따라서 위의 솔루션은 작동하지 않습니다. 기사 Flexbox 및 잘린 텍스트는 솔루션을 제공합니다. 다음 코드에서 각 선언 블록 "업데이트"주석의 다음 줄은이 문제를 처리하는 줄입니다.

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

로그인 후 복사

단일 드롭 다운 메뉴 세그먼트를 3 개의 열로 제한하십시오 이 단계에서 대부분의 작업이 완료되었습니다. 이 섹션의 나머지 부분에는 다른 드롭 다운 섹션을 추가하여 세 개의 열 항목으로 제한합니다.

<,> 앞에서 언급했듯이 Container__ 목록을 두 번 복사하여 "어플라이언스"라는 새 드롭 다운 메뉴 세그먼트에 사용합니다. 이것은 데모 목적입니다. 실제적인 예에서는 JavaScript 또는 백엔드 언어로 목록을 생성 할 수 있습니다.

사용자 인터페이스를 조정하기 위해 Has-Multi 클래스를 추가합니다. 이 클래스를 사용하여 일부 속성을 무시해야합니다.

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

로그인 후 복사

여기, 컨테이너에 세 부분이 표시되기를 원하기 때문에

33.333%로 설정했습니다. 나는 <<> 만 변경했지만 다른 두 속성 <🎜

와

는 단일 섹션 코드에서 상속되었습니다. 컨테이너 __ 목록이 3 미만인 경우 유연성을 제공합니다. 두 개의 목록 만 있으면 Container__ 목록 프로젝트가 커지고 그 사이에 공간을 할당합니다. 즉, 각 항목은 총 폭의 50%를 차지합니다.

.Container__ListItem은

로 설정되어 컨테이너 __list에 열이 하나뿐입니다. 섹션 당 두 개의 열을 허용하기 위해 50%를 사용할 수 있습니다.

거대한 메뉴의 유용성에 대한 몇 가지 메모 나는 유용성을 너무 많이 고려하지 않고 메가 메뉴를 내 예로 선택했습니다. 이러한 기능을 사용하기 전에 장단점을 논의 할 수있는 몇 가지 리소스를 제공했습니다.

<,> 내 생각에, 메가 메뉴 탐색은 모든 옵션을 표시하는 데 매우 유용 하며이 탐색 스타일은 전자 상거래 웹 사이트에 효과적으로 사용될 수 있습니다. 나는 인텔의 내비게이션을 좋아합니다.

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

로그인 후 복사

가용성 메가 메뉴의 이점과 단점 (메가 메뉴 1)

거대한 메뉴는 웹 사이트 내비게이션에 적합합니다 거대한 드롭 다운 메뉴 flex-basis flex-basis 결론 이 튜토리얼의 최종 메가 메뉴는 완전히 반응하지 않습니다. 메인 메뉴 표시 줄는 더 작은 화면에 나타나지 만 거대한 메뉴를 사용할 수 없으며 최상위 링크 만 사용할 수 있습니다. 이 튜토리얼의 목적을 위해서는 충분해야합니다. 원하는 경우 데모를 복사하고 개선하십시오. flex-grow 거대한 드롭 다운 메뉴 내비게이션 시스템은 Flexbox의 힘과 단순성을 보여주는 좋은 방법이며,이 튜토리얼에서이를 전달하기를 바랍니다. 보시다시피, Flexbox는 컨텐츠를 중심으로 사용하는 것이 아닙니다. flex-shrink 다른 Flexbox 기반 기술을 사용하여 메가 메뉴 시스템을 구축하는 경우 의견에 자유롭게 알려주십시오.

업데이트 :이 Codepen 데모에서 찾을 수있는이 메가 메뉴의 반응 형 모바일 친화적 버전을 구축했습니다.

Flexbox (FAQ) 가있는 메가 메뉴를 구축 할 수있는 FAQ flexbox로 메가 메뉴를 반응하는 방법은 무엇입니까?

Flexbox로 메가 메뉴를 반응하는 것은 매우 쉽습니다. 미디어 쿼리를 사용하여 화면 크기에 따라 메뉴 레이아웃을 조정할 수 있습니다. 예를 들어, 작은 화면에 메뉴 항목을 수직으로 쌓아 더 큰 화면에 수평으로 표시 할 수 있습니다. Flex-Wrap 속성을 사용하여 필요한 경우 메뉴 항목이 여러 줄로 감싸도록 할 수 있습니다. 다른 장치에서 메뉴를 테스트하여 모든 화면 크기에서 훌륭하고 작동하는지 확인하십시오. Flexbox를 사용하여 다중 레벨 메가 메뉴를 만들 수 있습니까? 예, Flexbox를 사용하여 다단계 메가 메뉴를 만들 수 있습니다. 플렉스 컨테이너를 서로 중첩하여 다단계 내비게이션을 만들 수 있습니다. CSS 및 JavaScript를 사용하여 각 레벨을 표시하거나 숨길 수 있습니다. 이를 통해 여전히 탐색하고 이해하기 쉬운 복잡한 내비게이션 구조를 만들 수 있습니다.

메가 플렉스 박스 메뉴에 애니메이션을 추가하는 방법은 무엇입니까?

CSS 전환 및 변환을 사용하여 Flexbox 메가 메뉴에 애니메이션을 추가 할 수 있습니다. 예를 들어, 전환을 사용하여 하위 메뉴의 개방 및 닫기를 부드럽게 애니메이션 할 수 있습니다. 변환을 사용하여 메뉴 항목의 움직임을 애니메이션 할 수도 있습니다. 사용자를 혼동하거나 산만하게하지 않도록 애니메이션 미묘함과 일관성을 유지해야합니다.

Flexbox 메가 메뉴의 접근성을 향상시키는 방법은 무엇입니까?

Flexbox 메가 메뉴의 접근성 향상에는 여러 단계가 포함됩니다. 먼저 키보드를 통해 메뉴를 탐색 할 수 있는지 확인하십시오. 즉, 사용자는 탭 키 및 화살표 키를 사용하여 메뉴에서 탐색 할 수 있어야합니다. 둘째, ARIA 역할과 속성을 사용하여 메뉴에 대한 추가 정보를 보조 기술에 제공합니다. 셋째, 메뉴에 충분한 대비가 있고 읽기 쉽습니다.

Flexbox를 사용하여 스티커 메가 메뉴를 만들 수 있습니까?

예, Flexbox를 사용하여 끈적 끈적한 메가 메뉴를 만들 수 있습니다. "위치 : 스티커"CSS 속성을 사용하여 사용자가 스크롤 할 때 메뉴 페이스트를 페이지 상단에 만들 수 있습니다. 이렇게하면 긴 페이지에서도 메뉴가 항상 보이고 액세스 할 수 있습니다.

메가 플렉스 박스 메뉴에 아이콘을 추가하는 방법은 무엇입니까?

아이콘 글꼴 또는 SVG를 사용하여 Flexbox 메가 메뉴에 아이콘을 추가 할 수 있습니다. Flex 속성을 사용하여 아이콘의 크기 및 간격을 제어 할 수 있습니다. CSS를 사용하여 아이콘의 색상 및 호버 효과를 변경할 수도 있습니다.

메가 플렉스 박스 메뉴에 검색 창을 추가하는 방법은 무엇입니까?

입력 필드와 제출 버튼이있는 양식이 포함 된 Flex 항목을 만들어 Flexbox 메가 메뉴에 검색 창을 추가 할 수 있습니다. Flex 속성을 사용하여 검색 창의 크기와 위치를 제어 할 수 있습니다. CSS를 사용하여 검색 표시 줄을 스타일링하여 나머지 메뉴와 일치 할 수도 있습니다.

메가 플렉스 박스 메뉴에 드롭 다운 메뉴를 추가하는 방법은 무엇입니까?

중첩 플렉스 컨테이너를 만들어 Flexbox 메가 메뉴에 드롭 다운 메뉴를 추가 할 수 있습니다. CSS를 사용하여 기본적으로 드롭 다운 메뉴를 숨기고 사용자가 상위 메뉴 항목을 호버 할 때 표시 할 수 있습니다. 또한 JavaScript를 사용하여 드롭 다운 메뉴 외부에서 클릭 할 때 마감하는 등 드롭 다운 메뉴에 추가 상호 작용을 추가 할 수 있습니다.

Flexbox 메가 메뉴에 모바일 메뉴를 추가하는 방법은 무엇입니까?

메뉴 디스플레이를 전환하기 위해 버튼을 만들어 Flexbox 메가 메뉴에 모바일 메뉴 토글을 추가 할 수 있습니다. 미디어 쿼리를 사용하여 큰 화면의 토글을 숨기고 작은 화면에 표시 할 수 있습니다. 버튼을 클릭 할 때 JavaScript를 사용하여 메뉴의 "디스플레이"속성을 전환 할 수도 있습니다.

Flexbox 메가 메뉴의 성능을 최적화하는 방법은 무엇입니까?

Flexbox 메가 메뉴의 성능을 최적화하려면 여러 단계가 포함됩니다. 먼저, CSS와 JavaScript가 수축되어 압축되어 파일 크기를 줄 이도록하십시오. 둘째, CSS 전환 및 JavaScript 대신 애니메이션으로의 전환을 사용하여 더 잘 수행하므로 사용하십시오. 셋째, 미디어 쿼리를 사용하여 화면 크기에 따라 다양한 스타일과 스크립트를로드하여 불필요한 코드로드의 양을 줄입니다.

위 내용은 Flexbox로 메가 메뉴 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!