So verwenden Sie das Menüelement-Extras-Modul für Drupal 8

Mega-Menüs sind kein Designtrend mehr, sondern ein wesentlicher Bestandteil der meisten Websites im Zusammenhang mit Nachrichten oder E-Commerce.

Das Menüelement-Extras-Modul für Drupal 8 verbessert das Standardmenüsystem in Drupal, indem es dem Website-Ersteller ermöglicht, Felder zu den Menüelementen hinzuzufügen. Auf diese Weise ist es möglich, mit ein paar einfachen Schritten ein Mega-Menü zu erstellen.

Folgen Sie den Anweisungen, um zu erfahren, wie Sie dieses Modul verwenden. Lasst uns beginnen!

Schritt 1: Installieren Sie die erforderlichen Module

Zusätzlich zum Modul Menu Item Extras müssen Sie Viewfield installieren. Viewfield stellt ein Feld bereit, das einen Verweis auf eine Ansicht enthält, und rendert es, wenn die Entität, die das Feld enthält, angezeigt wird.

• Öffnen Sie die Terminalanwendung Ihres PCs.
• Typ :
  • Composer benötigen drupal/viewfield
  • Komponist erfordert drupal/menu_item_extras

Aktivieren Sie beide Module nach dem Download.

• Klicken Sie auf Erweitern.
• Überprüfen Sie beide Module.
• Klicken Sie auf Installieren.

Schritt Nr. 2: Erstellen Sie ein Taxonomiesystem

Vielleicht ist das Wort „System“ nicht sehr passend, da wir nur ein Vokabular mit zehn zugehörigen Begriffen erstellen werden. In diesem Beispiel werden jedoch die Grundlagen erläutert, sodass Sie in Zukunft mit komplizierteren Taxonomiesystemen arbeiten können.

• Klicken Sie auf Struktur > Taxonomie > Vokabular hinzufügen.
• Geben Sie den Namen „Themen“ ein und klicken Sie auf Speichern.
• Klicken Sie auf Begriff hinzufügen und fügen Sie nacheinander alle unten aufgeführten Begriffe hinzu.
  • Themen
    • D8
    • Symfonie
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Python
    • DevOps

Schritt Nr. 3: Erstellen Sie die Inhaltstypen

Für dieses Tutorial verwenden wir 2 Inhaltstypen mit den folgenden Feldern:

• Dienstleistungen
  • Dienstbild / Bild / Erlaubte Anzahl von Werten: 1
  • Einleitungstext / Text (formatiert) / Erlaubte Anzahl an Werten: 1
  • Beschreibung / Standardfeld

• Bloggen
  • Kategorie / Taxonomiebegriff / Zulässige Anzahl von Werten: unbegrenzt
  • Beschreibung / Standardfeld

Stellen Sie sicher, dass Sie beim Erstellen des Taxonomiefelds den Referenztyp (Themen) auswählen.

Schritt Nr. 4: Erstellen Sie Inhalte

Wir werden 3 Knoten vom Typ Service erstellen:

• Tutorials
• Videos
• Bücher

Jeder dieser Knoten wird mit einem Element der zweiten Ebene im Megamenü verknüpft. Andererseits werden wir etwa 10 Knoten vom Typ Blog mit unterschiedlichen Begriffen erstellen, die ihnen zugeordnet sind. Stellen Sie sicher, dass Sie 2 der Begriffe (z. B.: D8, WP) häufiger als die anderen verwenden.

Der Inhaltsbildschirm sollte am Ende dieses Vorgangs mehr oder weniger wie das Bild unten aussehen.

Schritt #5: Erstellen Sie die Menüpunkte

Die erste Ebene des Hauptmenüs enthält die folgenden Menüpunkte:

• Heim
• Etwa
• Ressourcen
• Kontakt

Jeder der Menüpunkte hat ein zusätzliches (zusätzliches) Feld. Dieses Feld wird auf der zweiten Ebene des Menüs festgelegt, dh bei jedem der Kartenelemente im Megamenü. In diesem Feld können wir jeden der Ansichtsblöcke präsentieren.

• Klicken Sie auf Struktur > Menüs.
• Klicken Sie auf das Menü Bearbeiten, um die Hauptnavigation zu bearbeiten.

• Klicken Sie dreimal auf Link hinzufügen, um die fehlenden Menüelemente der ersten Ebene hinzuzufügen.
• Klicken Sie jedes Mal auf Speichern, wenn Sie einen Menüpunktnamen eingeben.

Verwenden Sie das spezielle Tag, um nur den Linktext anzuzeigen.

Nachdem Sie die Links Ihres Menüs erstellt und neu angeordnet haben,

• Klicken Sie auf Felder verwalten > Feld hinzufügen, um den Menüelementen ein Feld hinzuzufügen.
• Wählen Sie ein Feld vom Typ Ansichtsfeld aus.
• Geben Sie ihm einen richtigen Namen und eine Bezeichnung.
• Klicken Sie auf Speichern und fortfahren.

• Stellen Sie die zulässige Anzahl von Werten auf Unbegrenzt ein.
• Klicken Sie auf Feldeinstellungen speichern

Sie haben die Möglichkeit, eine Standardansicht mit diesem bestimmten Feld zu verknüpfen. Lassen Sie diese Felder leer.

• Scrollen Sie nach unten und klicken Sie auf Einstellungen speichern
• Klicken Sie auf Anzeige verwalten.

• Blenden Sie die Beschriftung der Menükarte aus.
• Klicken Sie auf Speichern.

Schritt #6: Erstellen Sie die Ansichten

• Klicken Sie auf Struktur > Ansichten > Ansicht hinzufügen
• Inhalte vom Typ Dienste anzeigen.
• Erstellen Sie einen Block mit einer unformatierten Liste von Feldern.
• Wählen Sie 3 Elemente pro Block anzuzeigen.
• Klicken Sie auf Speichern und bearbeiten.

• Fügen Sie das Feld Dienstbild hinzu
• Stellen Sie den Bildstil auf Miniaturansicht ein und verknüpfen Sie das Bild mit dem Inhalt.
• Klicken Sie auf Übernehmen

• Fügen Sie auch das Intro-Textfeld hinzu.
• Ordnen Sie die Felder neu an.
• Klicken Sie auf Speichern.

• Klicken Sie auf Struktur > Ansichten > Ansicht hinzufügen
• Inhalt vom Typ Blog anzeigen.
• Erstellen Sie einen Block mit einer unformatierten Liste von Feldern.
• Wählen Sie 1 Element pro Block anzuzeigen.
• Klicken Sie auf Speichern und bearbeiten.

• Fügen Sie das Feld Kategorie hinzu.
• Klicken Sie auf Felder hinzufügen und konfigurieren.
• Klicken Sie auf die Einstellungen für mehrere Felder.
• Wählen Sie Ungeordnete Liste aus.
• Legen Sie die Anzahl der anzuzeigenden Werte auf 3 fest.
• Klicken Sie auf Übernehmen.

• Entfernen Sie das Sortierkriterium
• Klicken Sie auf Übernehmen.
• Klicken Sie auf Speichern, um die Ansicht zu speichern.

Schritt Nr. 7: Fügen Sie die Ansichtsblöcke zu den Menüelementen hinzu

• Klicken Sie auf Struktur > Menüs
• Bearbeiten Sie die Hauptnavigation.
• Bearbeiten Sie den Menüpunkt Ressourcen.
• Fügen Sie die 2 Blöcke hinzu, die Sie in Schritt 5 erstellt haben.
• Klicken Sie auf Speichern.

Schritt #8: Die CSS-Stile

Ich werde diesen Code nicht im Detail erklären, da er den Rahmen dieses Tutorials sprengen würde. In diesem Artikel können Sie jedoch mehr über Drupal Views und CSS Grid recherchieren. Wenn Sie mehr mit Megamenüs üben möchten, schauen Sie sich auch diesen Artikel an.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Danke fürs Lesen!