컨테이너 __list에서 속성을 사용했지만 내비게이션 막대 자체에 사용하지 않았습니다. 앞에서 언급했듯이 공간이 부족할 때 내비게이션 바 항목이 포장되는 것을 원하지 않습니다. 대신, 가용 수평 공간이 감소하면 고르게 줄어 듭니다. flex: 1
그러나 컨테이너 __ 목록 프로젝트의 경우 요구 사항이 정확히 반대입니다. 내 목록 항목이 공간의 25%를 사용하기를 원하므로 각 행은 최대 4 개의 항목을 보유하고
로 수행 할 수 있습니다.
나는 또한 display: inline-block를 0으로 설정합니다. 이것은 4 미만의 균일하게 분포 된 품목을 방지하기 때문에 유용합니다. 0으로 설정함으로써 프로젝트가 공간의 25%를 유지하도록 강요합니다. width: 100% 지금 DIV에 싸인 내용은 어떻습니까? 콘텐츠가 넘치지 않도록하는 상황을 처리하고 싶습니다. 콘텐츠가 Flex Child 요소 (예 : Container__ListItem)에 직접있을 때 매우 간단합니다. 컷 텍스트를 다음 코드를 사용하여 엘립스 시스 ( "…")로 바꿀 수 있습니다.
그러나이 경우 컨테이너 __ListItem으로 래핑되는 DIV에 내용을 넣습니다. 따라서 위의 솔루션은 작동하지 않습니다. 기사 Flexbox 및 잘린 텍스트는 솔루션을 제공합니다. 다음 코드에서 각 선언 블록 "업데이트"주석의 다음 줄은이 문제를 처리하는 줄입니다.
<code class="language-html"><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></code>
단일 드롭 다운 메뉴 세그먼트를 3 개의 열로 제한하십시오
이 단계에서 대부분의 작업이 완료되었습니다. 이 섹션의 나머지 부분에는 다른 드롭 다운 섹션을 추가하여 세 개의 열 항목으로 제한합니다.
앞에서 언급했듯이 Container__ 목록을 두 번 복사하여 "어플라이언스"라는 새 드롭 다운 메뉴 세그먼트에 사용합니다. 이것은 데모 목적입니다. 실제적인 예에서는 JavaScript 또는 백엔드 언어로 목록을 생성 할 수 있습니다.
사용자 인터페이스를 조정하기 위해 Has-Multi 클래스를 추가합니다. 이 클래스를 사용하여 일부 속성을 무시해야합니다. <code class="language-css">.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;
}</code>
여기, 컨테이너에 세 부분이 표시되기를 원하기 때문에
33.333%로 설정했습니다. 나는 만 변경했지만 다른 두 속성 와
는 단일 섹션 코드에서 상속되었습니다. 컨테이너 __ 목록이 3 미만인 경우 유연성을 제공합니다. 두 개의 목록 만 있으면 Container__ 목록 프로젝트가 커지고 그 사이에 공간을 할당합니다. 즉, 각 항목은 총 폭의 50%를 차지합니다.
.Container__ListItem은
로 설정되어 컨테이너 __list에 열이 하나뿐입니다. 섹션 당 두 개의 열을 허용하기 위해 50%를 사용할 수 있습니다.
거대한 메뉴의 유용성에 대한 몇 가지 메모
나는 유용성을 너무 많이 고려하지 않고 메가 메뉴를 내 예로 선택했습니다. 이러한 기능을 사용하기 전에 장단점을 논의 할 수있는 몇 가지 리소스를 제공했습니다.
내 생각에, 메가 메뉴 탐색은 모든 옵션을 표시하는 데 매우 유용 하며이 탐색 스타일은 전자 상거래 웹 사이트에 효과적으로 사용될 수 있습니다. 나는 인텔의 내비게이션을 좋아합니다. <code class="language-html"><ul class="container">
<div class="container__list">
<div class="container__listItem">
<div>Televisions</div>
</div>
</div>
</ul></code>
가용성 메가 메뉴의 이점과 단점 (메가 메뉴 1)
