Drupal 8에서 Ultimenu 및 Bootstrap으로 메가 메뉴 구축

게시 됨: 2022-02-16

고객 중 한 명이 Drupal 8에서 메가 메뉴를 구축하는 방법을 문의했습니다.

메가 메뉴는 다중 열 탐색이 있는 메뉴입니다. 그들은 빠르게 웹 디자인의 트렌드가 되고 있습니다.

Ultimenu 모듈을 사용하면 Drupal 블록을 메뉴에 삽입할 수 있습니다. 상당히 복잡한 메뉴 레이아웃을 만드는 데 쉽게 사용할 수 있습니다.

이 튜토리얼에서는 Ultimenu 모듈과 Bootstrap을 사용하여 간단한 메가 메뉴를 구축하는 방법을 배웁니다.

고객은 아래 이미지와 유사한 메가 메뉴 구축을 목표로 하고 있었습니다.

메가 메뉴 드롭다운의 너비는 100%여야 합니다. 콘텐츠는 Drupal 블록이어야 합니다.

Ultimenu 접근법

Ultimenu 모듈은 Drupal 설치의 메뉴 페이지(admin/structure/menu)에 추가한 각 메뉴에 대한 블록을 생성합니다.

이 블록을 다른 블록처럼 블록 레이아웃 화면에 배치할 수 있습니다. 모듈은 메뉴 항목을 블록 레이아웃 페이지의 동적 영역으로 바꿉니다.

이러한 방식으로 블록(사용자 정의 블록, 뷰 등)을 이러한 영역에 삽입할 수 있습니다.

블록을 포함하는 영역을 포함하는 블록:

1 단계. 모듈 설치

Composer를 사용하여 모듈을 설치합니다 .

composer require drupal/ultimenu

다운로드 후 확장 을 클릭하고 모듈을 활성화합니다. 더 이상의 종속성은 필요하지 않습니다.

2 단계. 메뉴 만들기

구조 > 메뉴 를 클릭 합니다.
기본 탐색 찾기
편집 메뉴 를 클릭 합니다.

링크 추가 버튼 클릭
첫 번째 수준 메뉴 항목을 추가 합니다.

여행 링크는 route:<nolink> 를 가리킵니다. 이 상위 요소는 다른 요소를 포함하기 위해서만 존재합니다.

3단계. Ultimenu 블록 구성

구조 > Ultimenu 를 클릭하십시오 .
세로 Ultimenu 블록에서 탭 선택 메인 탐색
구성 저장을 클릭 합니다.

Ultimenu 지역을 클릭하십시오 .
Ultimenu:main 선택: 여행

Ultimenu는 블록 레이아웃 페이지에서 동적으로 이 영역을 생성하여 블록을 배치할 수 있습니다.

구성 저장을 클릭 합니다.

Ultimenu 항목 탭에는 추가 구성 옵션이 있습니다. 이 옵션을 확인하지 않겠습니다. 특히 다국어 사이트를 구축하는 경우 이러한 옵션이 작동하는 방식을 이해하려면 모듈의 설명서를 읽으십시오.

4단계. 이미지 블록

블록에 이미지를 배치하려면 이미지 필드를 사용하여 사용자 정의 블록 유형을 생성해야 합니다.

구조 > 블록 레이아웃 > 사용자 정의 블록 라이브러리 > 블록 유형 을 클릭 합니다.
사용자 정의 블록 유형 추가 버튼을 클릭 합니다.

블록 유형에 적절한 이름을 지정하십시오.
저장 클릭 :

필드 관리를 클릭 합니다.
본문 필드 를 삭제 합니다.
필드 추가를 클릭 합니다.
이미지 필드를 추가 합니다.
기본값으로 저장 합니다.
디스플레이 관리를 클릭 합니다.
블록 레이블 숨기기 :

구조 > 블록 레이아웃 > 사용자 블록 라이브러리 > 사용자 블록 추가를 클릭 합니다.

이미지로 차단 클릭 :

이미지를 업로드 합니다.
저장 클릭 :

5단계. 링크 차단

보기와 같이 4개의 열에 링크가 있는 블록을 얻는 방법에는 여러 가지가 있습니다.

저는 이 튜토리얼에서 Bootstrap 하위 테마로 작업하고 있습니다. 부트스트랩 마크업 및 클래스와 함께 기본 블록을 사용할 것입니다.

Drupal에서 부트스트랩 하위 테마를 만드는 방법을 배우려면 이 튜토리얼을 확인하십시오.

사용자 정의 블록 추가 를 다시 클릭 하십시오.
이번에 는 기본 블록 을 선택 합니다.
블록 에 적절한 이름을 지정하십시오.
편집기에서 전체 HTML 을 텍스트 형식으로 선택 합니다.
소스 버튼을 클릭 합니다.
편집기 창에 다음 코드를 붙여넣 습니다.

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

저장을 클릭 합니다.

6단계. Ultimenu 블록 배치

구조 > 블록 레이아웃 을 클릭 합니다.
기본 기본 탐색 블록을 비활성화 합니다.
탐색 (접을 수 있는) 영역 에 Ultimenu: 기본 탐색 을 배치합니다.
표시 제목을 선택 취소 합니다.
블록 저장 을 클릭 합니다.

7단계. "여행" 영역에 블록을 놓습니다.

페이지 맨 아래로 스크롤합니다 .

Ultimenu를 구성할 때 할당한 동적으로 생성된 영역이 표시됩니다.

블록 배치를 클릭 합니다.

이 영역 에 이미지 사용자 정의 블록을 배치합니다.
표시 제목을 선택 취소 합니다.
블록 저장 을 클릭 합니다.
Bootstrap 마크업 블록을 사용하여 프로세스를 반복 합니다.

필요한 경우 블록의 순서를 다시 정렬 합니다.
블록 저장을 클릭 합니다.

이제 사이트의 첫 페이지로 이동하여 메뉴를 살펴보십시오. 몇 가지 CSS 조정이 필요합니다.

8단계. CSS

기본적으로 하위 테마의 라이브러리 파일은 Bootstrap 하위 테마 내의 css/ 폴더에 있는 style.css 파일을 가리킵니다.

해당 파일에 다음 코드를 추가 합니다.

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

지금쯤이면 스스로 메뉴를 조정하는 방법을 이미 눈치채셨을 것입니다.

요약

Ultimenu 모듈, Bootstrap 및 이해하기 쉬운 "Drupal 블록" 접근 방식을 사용하여 Drupal에서 메가너스를 구축하는 방법을 방금 배웠습니다.

읽어 주셔서 감사합니다!