기초 6 : 새로운 메뉴 구성 요소

Foundation 6의 간소화 된 메뉴 시스템 : 여러 레거시 옵션을 대체하는 단일의 적응 형 구성 요소.

주요 개선 사항 :

통합 메뉴 구성 요소 : Foundation 6 인라인 목록, 측면 탐색, 아이콘 막대 및 하위 탐색을 단일의 고도로 사용자 정의 가능한 "메뉴"구성 요소로 통합합니다. 이것은 개발을 단순화하고 프레임 워크 크기를 줄입니다 반응 형 디자인 : 단일 코드베이스를 사용하여 다른 화면 크기와 장치에 걸쳐 동적으로 적응하는 메뉴를 만듭니다. 이렇게하면 데스크탑 및 모바일에 대한 별도의 메뉴가 필요하지 않습니다. .

JavaScript 플러그인 :

드롭 다운, 드릴 다운 및 아코디언 메뉴와 같은 플러그인으로 기능을 향상시켜 키보드 탐색을 통해 액세스 할 수 있습니다.
• 경량 프레임 워크 : 메뉴 구조의 병합은 프레임 워크 크기 (1000 줄 이상의 CSS 라인)가 크게 줄어들고 유지 보수가 더 빨라지고 유지 보수가 쉬워졌습니다. 상단 막대 향상 :
상단 막대 구성 요소는 이제 메뉴의 왼쪽 및 오른쪽 섹션을 지원하고 작은 화면에 대한 응답 형 토글을 포함합니다.
기초 6의 빌딩 메뉴 :
• > 핵심 메뉴 구조는 간단합니다. 추가 클래스는 메뉴의 모양과 동작을 제어합니다 단순 메뉴 :
클래스를 사용하여 기본 스타일을 제거하고 완전히 사용자 지정 모양을 만듭니다.
• 수평/수직 메뉴 : 기본값은 수평입니다. 수직 방향을 위해 클래스를 추가하십시오
• 중첩 메뉴 (하위 메뉴) : 수직 메뉴 내에서 하위 메뉴에 대한 클래스와 함께 중첩 요소를 사용하십시오. 보다 복잡한 상호 작용을 위해 드롭 다운, 드릴 다운 또는 아코디언 플러그인을 사용하십시오.

아이콘 메뉴 : 태그 내의 요소 (Foundation의 아이콘 글꼴 사용) 또는 이미지 태그를 사용하여 아이콘을 통합합니다. 클래스는 메뉴 텍스트 위의 아이콘을 위치시킵니다 드롭 다운, 드릴 다운 및 아코디언 메뉴 :

이 JavaScript 구동 플러그인은 역동적 인 대화식 메뉴를 제공합니다. 이러한 기능을 활성화하려면 , 및 속성을 ​​각각 사용하십시오. 이벤트 처리는 사용자 정의 조치를 허용합니다 (예 : 아코디언 폐쇄의 경우

).

반 Respondive Navigation : 속성을 ​​사용하여 다양한 화면 크기에 대해 다른 메뉴 유형을 정의하십시오 (예 : , ).

왼쪽/오른쪽 섹션이있는 상단 막대 : 및 data-responsive-menu 클래스를 사용하여 양쪽에 섹션이있는 메뉴를 만듭니다. 응답 형 토글 ()은 작은 화면의 메뉴 버튼을 표시합니다. small-dropdown medium-drilldown

예제 (간단한 수평 메뉴) :

결론 : Foundation 6의 재 설계된 메뉴 시스템은 기능과 사용 편의성을 크게 향상시킵니다. 통합 접근 방식은 개발을 단순화하고 코드 크기를 줄이며 응답 성을 향상시켜 현대적이고 유연한 웹 사이트를 구축하는 강력한 도구입니다.

위 내용은 기초 6 : 새로운 메뉴 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!