Drupal 8'de Ultimenu ve Bootstrap ile Mega Menü Oluşturun

Müşterilerimizden biri Drupal 8'de mega menünün nasıl oluşturulacağını sordu.

Mega menüler, çok sütunlu gezinmeye sahip menülerdir. Web tasarımında hızla bir trend haline geliyorlar.

Ultimenu modülü, bir menüye Drupal blokları eklemenizi sağlar. Oldukça karmaşık menü düzenleri oluşturmak için kolayca kullanabilirsiniz.

Bu eğitimde, Ultimenu modülünü ve Bootstrap'i kullanarak basit bir mega menünün nasıl oluşturulacağını öğreneceksiniz.

Müşteri, aşağıdaki resimdekine benzer bir mega menü oluşturmayı hedefliyordu:

Mega menü açılır menüleri %100 genişliğe sahip olmalıdır. İçerikleri Drupal blokları olmalıdır.

Ultimenu Yaklaşımı

Ultimenu modülü, Drupal kurulumunuzun menüler sayfasına (yönetici/yapı/menü) eklediğiniz her menü için bir blok oluşturur.

Bu bloğu, diğer bloklar gibi Blok düzeni ekranına yerleştirebilirsiniz. Modül, blok yerleşim sayfasında menü öğelerini dinamik bölgelere dönüştürür.

Bu şekilde bu bölgelere bloklar (özel bloklar, görünümler vb.) ekleyebilirsiniz.

Blokları içeren bölgeleri içeren bir blok:

Aşama 1. Modülü Kurun

• Modülü besteci ile kurun:

composer require drupal/ultimenu

• İndirdikten sonra, Genişlet'e tıklayın ve modülü etkinleştirin. Başka bağımlılık gerekmez:

Adım 2. menüyü oluştur

• Yapı > Menüler 'i tıklayın .
• Ana Navigasyonu arayın
• Düzenle menüsünü tıklayın .

• Bağlantı ekle düğmesini tıklayın
• Birinci seviye menü öğelerini ekleyin :

Seyahat bağlantısı route:<nolink> . Bu ana öğe yalnızca diğer öğeleri içermek için oradadır:

Aşama 3. Ultimenu bloğunu yapılandırın

• Yapı > Ultimenu öğesini tıklayın .
• Dikey Ultimenu bloklarında Ana gezinme sekmesini seçin
• Yapılandırmayı kaydet'i tıklayın :

• Ultimenu bölgeleri'ne tıklayın .
• Ultimenu'yu seçin:ana: Seyahat

Ultimenu, blokları yerleştirebilmeniz için bu bölgeyi Blok Düzeni sayfasında dinamik olarak oluşturacaktır.

• Yapılandırmayı Kaydet'e tıklayın :

Ultimenu güzellikleri sekmesinde ek yapılandırma seçenekleri bulunur. Bu seçeneklerin hiçbirini kontrol etmeyeceğim. Özellikle çok dilli bir site oluşturuyorsanız, bu seçeneklerin nasıl çalıştığını anlamak için lütfen modülün belgelerini okuyun.

4. Adım. Görüntü Bloğu

Bir bloğa görüntü yerleştirmek için, Görüntü alanı ile özel bir blok türü oluşturmanız gerekir.

• Yapı > Blok düzeni > Özel blok kitaplığı > Blok türleri öğesine tıklayın .
• Özel blok türü ekle düğmesini tıklayın :

• Blok tipine uygun bir isim verin .
• Kaydet'i tıklayın :

• Alanları yönet'i tıklayın .
• Gövde alanını silin .
• Alan ekle'yi tıklayın .
• Görüntü alanını ekleyin .
• Varsayılanlarla kaydedin .
• Ekranı yönet'i tıklayın .
• Blok etiketini gizle :

• Yapı > Blok düzeni > Özel blok kitaplığı > Özel blok ekle'yi tıklayın :

• Resimle Engelle'yi tıklayın :

• Bir resim yükleyin .
• Kaydet'i tıklayın :

Adım 5. bağlantılar bloğu

Dört sütunda bağlantılar içeren bir blok elde etmenin birçok yolu vardır, örneğin Görünümler ile.

Bu eğitimde bir Bootstrap alt temasıyla çalışıyorum. Bootstrap işaretlemesi ve sınıfları ile temel bir blok kullanacağım.

Drupal'da Bootstrap alt temasının nasıl oluşturulacağını öğrenmek için bu eğiticiye göz atın.

• Özel blok ekle'yi bir kez daha tıklayın .
• Bu sefer Temel blok'u seçin .
• Bloka uygun bir ad verin.
• Düzenleyicide metin biçimi olarak Tam HTML'yi seçin .
• Kaynak düğmesini tıklayın .
• Düzenleyici penceresine aşağıdaki kodu yapıştırın :

 <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>

• Kaydet'i tıklayın .

Adım #6. Ultimenu bloğunu yerleştirin

• Yapı > Blok düzeni 'ni tıklayın .
• Varsayılan Ana Gezinti bloğunu devre dışı bırakın .
• Ultimenu : Ana navigasyonu Navigasyon (daraltılabilir) bölgesine yerleştirin.
• Başlığı görüntüle seçeneğinin işaretini kaldırın .
• Bloğu kaydet 'i tıklayın .

Adım #7. Blokları “Seyahat” bölgesine yerleştirin

• Sayfanın en altına inin .

Ultimenu'nuzu yapılandırırken atadığınız dinamik olarak oluşturulmuş bölgeyi göreceksiniz.

• Blok yerleştir'i tıklayın :

• Görüntü özel bloğunu bu bölgeye yerleştirin.
• Başlığı görüntüle seçeneğinin işaretini kaldırın .
• Bloğu kaydet'i tıklayın .
• İşlemi Bootstrap işaretleme bloğuyla tekrarlayın :

• Gerekirse blokların sırasını yeniden düzenleyin.
• Blokları kaydet'i tıklayın :

Şimdi sitenizin ön sayfasına gidin ve menüye bir göz atın. Birkaç CSS tweaks gereklidir.

Adım #8. CSS

Varsayılan olarak, alt temanızın kitaplıkları dosyası, Bootstrap alt temanızdaki css/ klasörü içindeki style.css dosyasını gösterir.

• O dosyaya aşağıdaki kodu ekleyin :

 /* 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; }

Şimdiye kadar, menüyü kendi başınıza nasıl değiştireceğinizi fark etmiş olmalısınız:

Özet

Ultimenu modülü, Bootstrap ve anlaşılması kolay bir “Drupal blok” yaklaşımını kullanarak Drupal'da megamenleri nasıl oluşturacağınızı öğrendiniz.

Okuduğunuz için teşekkürler!