Submenu-Knoten tanzen aus der Reihe

paule · 23. Mai 2015 11:22

Hallo zusammen,

trotz intensiver Suche habe ich bisher keine Lösung für folgendes Problem gefunden und hoffe, Ihr könnt mir helfen. Zuvor muss ich allerdings gestehen, dass ich komplett planlos bin, was PHP und JavaScript angeht. Mit HTML und CSS komme ich gerade so ein wenig zurecht.

Ich muss in einer bestehenden Website das Menü um eine Ebene erweitern, was an sich kein Problem ist. Dieses Submenu wird allerdings durch das Mudul "Products" generiert, d.h., durch die entsprechenden Artikelgruppen und Artikel. Die jeweils letzte Ebene im Baum sind die Artikel.
Bisher gab es zwei Sub-Ebenen, die erste für die Artikelgruppen und die zweite für die Artikel. Diese Darstellung funktioniert problemlos. Aufgrund des stark erweiterten Produktportfolios werden jetzt allerdings Artikeluntergruppen benötigt. Und die machen mir das Leben gerade schwer ...
Und damit kommen wir zum Punkt: Binde ich eine weitere Ebene ein, werden die Knoten zur nächsten Ebene nicht, wie die Artikel, rechts zwischen den Artikeln in der Reihenfolge angezeigt, sondern untereinander. Zudem sind diese Knoten erstmal aufgeklappt trotz

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
display: none;

Hier sind die Beispiele, wie es aktuell aussieht: (LED-Beleuchtungssysteme)
(alte) Originalversion: www.logilux.de
Bastelversion: http://cms.logilux.de

Versionsinfo
Originalversion: CMS 1.9.4.1 , Products 2.12.1, (CGExtensions 1.25.4, CGSimpleSmarty 1.7.1 (inaktiv nach Update))
Bastelversion: CMS 1.11.5, Products 2.19.6, (CGExtensions 1.36, CGSimpleSmarty 1.6.2, JQueryTools 1.2.5)

Ich vermute, das Problem der Anordnung liegt beim MenuManager bzw. dem entprechenden Template. In dem fehlt nämlich die dritte Sub-Ebene. Das Template für die Navigation-Bar sowie das zugehörige CSS gibts aufgrund des Umfangs hier: Navigation.rar.
Ein Hinweis noch: Die Einbindung der Schriftart und die Verzögerungen des Menüs sind mit JavaScript realisiert.

Da ich nun keine Ahnung habe, ob das das Template wirklich alles ist und was ich da ändern muss, schrei ich hier mal um Hilfe. Vielleicht hat jemand ne Idee ... und schon mal vielen Dank im Voraus fürs Anschauen.

NaN · 23. Mai 2015 19:10

Ein Hinweis noch: Die Einbindung der Schriftart und die Verzögerungen des Menüs sind mit JavaScript realisiert.

Das Hauptproblem liegt sowohl am verwendeten Javascript als auch am Products-Template für die Hierarchieliste der Produktkategorien.

Ändere mal im javascript "js/logilux.main.js" die Zeilen 21 bis 80 (alles zwischen "// NAVIGATION BAR" und "// Teaser Fader/Slider") in folgendes:

Hier klicken, um den Code zum Kopieren zu markieren

$("#nav .parent").each(function() {
  var it1 = $(this);
  var st1;
  
  $(this).hover(function() {
    clearTimeout(st1);
    it1.children('ul').fadeIn("fast");
  }, function() {
    clearTimeout(st1);
    st1 = setTimeout(function() {
      it1.children('ul').fadeOut("fast");
    }, 500);
  });
});

Damit ist zumindest ein Teil Deines Problems behoben.

Und das CSS ist grauenhaft - sorry, aber "#nav ul.topnav li ul.subnav li ul.subsubnav li ul.subsubsubnav" das ist kein Selector, das ist schon 'ne ganze Kurzgeschichte wink Wenn Du mit Klassen für jede einzelne Ebene arbeitest, brauchst Du diese Kaskadierung nicht. Dann kannst Du die Ebenen auch direkt ansprechen (ist für den Browser auch viel performanter):

Hier klicken, um den Code zum Kopieren zu markieren

.subsubsubnav {
    ...
}

Das nur so als Hinweis.

Das Productsmodul scheint die Hierarchie nicht richtig aufzubauen. Für den Menüpunkt "Kat3" sieht das ganze nämlich so aus:

Hier klicken, um den Code zum Kopieren zu markieren

<li class="parent ">
    <a href="…">
        Kat3
    </a>

    <ul class="subsubnav">
        <li>
            <a href="…">
                artikel 2
            </a>
        </li>
    </ul>
    
    <ul class="subnav">
        <li class="parent ">
            <a href="…">
                Kat3a
            </a>
            <ul class="subsubnav">

                LEERE LISTE !

            </ul>
            
            NOCH 'NE LISTE ! (MIT FALSCHER KLASSE)

            <ul class="subnav">
                <li class="parent ">
                    <a href="…">
                        Kat3b
                    </a>
                    <ul class="subsubnav">
                        <li>
                            <a href="…">
                                artikel 2a
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

Versuch erstmal das Template des Products-Moduls zu korrigieren.
Sonst macht nämlich alles andere (Javascript/CSS) keinen Sinn.

Forum für CMS/made simple

#1 23. Mai 2015 11:22

Submenu-Knoten tanzen aus der Reihe

#2 23. Mai 2015 19:10

Re: Submenu-Knoten tanzen aus der Reihe

Fußzeile des Forums