erweitertes Menü - jeden Menüreiter individuell anpassen

Shopware 5 Themes & Design
1

Hallo,

ich probiere es nochmal mit einem eigenen Thread weil ich immer noch keine Lösung habe.

Möchte man in Shopware jeden Menüpunkt individualisieren muss man in der main-navigation.tpl in der entsprechenden Klasse einen Wert {$sCategory.id} hinzufügen

Das würde dann z.B. so aussehen:

1085×131 37.5 KB

Diese kann man dann in less mit .navigation-main .navigation–itemid–XX {…} nach eingenen Wünschen bearbeiten  …soweit so gut

Will man aber jetzt das „erweiterten Menü“ individualisieren also zum Beispiel jeden Menüpunkt der sich aufklappt unterschiedlich in der Breite anpassen. Menüpunkt 1 width=70%; Menüpunkt 2, width=50%; usw. sollte ich doch genauso vorgehen wie im oberen Beispiel. Also einfach in der advanced-menu/index.tpl in der Klasse class=„advanced-menu“ einen Wert {$sCategory.id} hinzufügen, wie im folgenden Bild:

864×138 26.7 KB

Wenn ich aber nun in less versuche den Container anzusprechen mit .advanced-menu .navi–id–5 {…} passiert leider garnichts. In den Mozilla-Entwicklertools steht bei „inspector“ auch nur .navi–id--  statt .navi–id–5  Es wäre super wenn mir jemand der etwas tiefer in der Materie steckt einen Hinweis geben könnte was ich falsch mache. Danke und viele Grüße

2

Im Advanced Menü ist es $category.id anstatt $sCategory.id

Liegt an der Zeile 9 im Template: {foreach $categories as $category}

Nachtrag, ok das zweite Bild hat gefehlt.

Die markierte stelle ist außerhalb der foreaches, du könntest es höchstens in Zeile 48 einbauen bei div class menu–container, nur das würde es auch Sinn machen.

Die von dir markierte Zeile ist der „äußerste Rahmen“ des Advanced Menü, der taucht nur ein mal auf.

 {$hasCategories = $mainCategory.activeCategories > 0 && $columnAmount < 4}
            {$hasTeaser = (!empty($mainCategory.media) || !empty($mainCategory.cmsHeadline) || !empty($mainCategory.cmsText)) && $columnAmount > 0}

            
                {block name="frontend_plugins_advanced_menu_main_container"}
                    
                        {block name="frontend_plugins_advanced_menu_button_category"}
                            
                                

class="menu--container navi--id-{$mainCategory.id}
1 „Gefällt mir“
3

Hallo, da hatte ich wohl einen kleinen Denkfehler, vielen lieben Dank für deine Hilfe Thumb-Up Funktioniert super

4

Hallo,

Leider ist mir gerade ein weiteres Problem aufgefallen. Das Menü sieht abgesehen vom Design ungefähr wie folgt aus:

800×417 13.9 KB
.

Der blaue Bereich ist der advanced-menu Container, den hab ich in meinen Fall einfach unsichtbar gemacht
Der dunkelgraue Bereich ist der menu–container , den ich jetzt individuell für jeden Menüpunkt anpassen kann.
Das Problem ist nun dass sich das Menu erst wieder schließt wenn ich mit der Maus von der (unsichbaren) blauen Fläche verschwunden bin statt von der sichtbaren dunkelgrauen. Ich hab jetzt ein bissel in less rumprobiert und versucht den blauen Container ganauso klein zu machen wie den Dunkelgrauen, aber er lässt sich nicht ändern. Kann man das in less lösen oder nur in Javascript?

 

 

5

@michinger schrieb:

Hallo, da hatte ich wohl einen kleinen Denkfehler, vielen lieben Dank für deine Hilfe Thumb-Up Funktioniert super

Hallo, sorry für die blöde Frage, aber wie kommt man jetzt per CSS auf die entsprechende Ebene? Egal wie ich es versuche, ich kriege das einzelne Menü nicht auf der ul Ebene angepasst. 

6

Beispielsweise: Ist die navi–id-1 vergeben wie im Beispiel von AWachert, dann kommst du normalerweise in das Listen-Elememt des ausgeklappten Menüs hiermit:

.advanced-menu .menu--container.navi--id-1 .menu--level-0{
   border: 1px solid red;
}

AM besten zeigst du mal was du schon probiert hast.