Wordpress Menü zweispaltig gestalten?

Dieses Thema im Forum "Design" wurde erstellt von thexm, 15. August 2012.

  1. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    Ich habe hier noch ein kleines Problem mit der Designanpassung unseres WP e-commerce Shops. Die Seite basiert auf dem Theme "mio" ( http://splashingpixels.com/themes/mio/ ). Da wir einen Shop mit über 900 Artikeln führen und dementsprechend auch viele Kategorien benötigen möchte ich das Dropdown Menü in der 3. Ebene zweispaltig gestalten.
    Nur habe ich noch keine genaue Vorstellung wie ich das realisieren könnte. Kann mir da villeicht jemand einen Tipp geben?

    Vielen Dank schon einmal im Vorraus,

    mfg
     
  2. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.289
    Zustimmungen:
    3
    Link zur Seite?
    Wie wird das Dropdown Menü erzeugt? Mittels css oder javascript?
     
  3. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    Die vorläufige Seite findest du unter heidelberger-depot.eu. Das Dropdown-Menü wird meines Wissens nach mit CSS realisiert.

    Danke schonmal!
     
  4. formateins

    formateins Gast

    Pauschal empfehle ich immer das UberMenu. Kostenpflichtig, aber in Sachen "Megamenu" einfach TOP.

    Generell musst Du dem UL und dem LI (der jeweiligen Ebene) einen float und eine width verpassen, damit das 2-spaltig wird. In Deinem Fall ein float:left und die Breite kannst Du relativ steuern und auch vererben. Probier es da einfach erstmal mit festen Breiten width:300px - ich weiß nicht, wie der Rest vom CSS ausgelegt ist.

    Weiterhin: es wird gerne für jedes Untermenü (also für jede Ebene) die gleiche CSS-Klasse verwendet. So auch bei Deinem Theme. D.h., die Änderungen wirken sich auf alle Ebenen aus. An der Stelle muss Du schauen, ob Du eine entsprechende Klasse nur auf Ebene 2 verankern kannst.

    Mit festen Breitenangaben kann man in der Regel nicht wirklich gut arbeiten, weil längere Inhalte sonst über den Container hinaus laufen.

    Im Anhang hab ich das mal on-the-fly angepasst. Änderungen wie oben beschrieben, der UL muss immer so breit sein, dass die Anzahl an Spalten hineinpassen. In dem Fall einfach den UL auf 300px gesetzt, die LI auf 149px.

    Platz kannst Du nochmal sparen, wenn Du den Platzhalter für die Glyphicons ausblendest (sofern sie nicht genutzt werden sollen).
     
  5. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    formateins: Kannst du den Screenshot noch in einer höheren Auflösung hochladen? Kann leider nichts lesen vom Code.

    Danke aber schonmal für deine Hilfe!
     
  6. formateins

    formateins Gast

  7. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    Hab's doch lesen können - das sieht jetzt schonmal ganz gut aus, aber jetzt hab' ich halt des Problem, dass das Menü in der 2. Ebene auch 2-Spaltig dargestellt wird und das ganze nicht mehr so sauber aussieht^^. Wie bekomme ich das jetzt gebacken dass nur die 3. Spalte angesprochen wird? Ich hab dir mal die style.css angehängt.

    (sorry bin in css noch nicht so fit... arbeite aber dran ;) )
     

    Anhänge:

    #7 thexm, 16. August 2012
    Zuletzt bearbeitet: 16. August 2012
  8. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    Also mal ausgegrenzt geht's ja um den Teil hier:

    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  9. formateins

    formateins Gast

    Hab da im Moment keine Zeit für. Bring einfach den float und die width auf das 2. UL sowie das entsprechende LI. Die Vererbung musste selber umschiffen. Das nav#main-nav li ul li ist im Übrigen die 1. Unterebene...
     
  10. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    alles klar - danke für deine Hilfe, dann werd ich mal weiter rumprobieren^^.

    Andere Sache: Habe gerade rausgefunden, dass das Menü in Firefox immernoch nach unten ausgerichtet ist. Es wird nur in Chrome richtig angezeigt...

    Edit: Nach Cache-Leerung wird es in Firefox genau so angezeigt wie ich es will, in Chrome jedoch nicht?
     
    #10 thexm, 16. August 2012
    Zuletzt bearbeitet: 16. August 2012
  11. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    Ich sitze immer noch auf dem Problem - Firefox interpretiert den Code richtig, aber Chrome nicht. Hat jemand eine Idee woran das Liegen könnte? - Hab hier nochmal Screenshots gemacht:

    Danke Schonmal!
     

    Anhänge:

  12. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.289
    Zustimmungen:
    3
    Also habe mir das jetzt mal etwas genauer angesehen:
    Dein Dropdownmenu wird (auch) via javascript erzeugt --> anders wären auch die animationen/effekte nicht möglich (ausser eingeschränkt via "transition" in css). Vermutlich beisst sich da javascript mit der veränderten css. Wenn ich im Chrome js deaktiviere zeigt mir dieser allerdings das dropdownmenu auch anders an als FF mit deaktiviertem js. -> ergo, liegts vermutlich an der style.css. Bei einer schnellen Validierung deiner css datei kamen auch eine Menge Warnungen (ist teils normal, da er alle css3 standards als Warnung ausgiebt) die könntest du mal durcharbeiten. Vorher würde ich allerdings das falsche Auskommentieren in der header.php ausbessern (am besten ganz raus -> woanders zwieschenspeicherun -> bei Bedarf wieder einfügen) denn auch das kann zu falschen Darstellungen führen.

    Grüsse
    Pixselig
     
  13. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    Hi pixelig. Danke für deine Tipps. Habe jetzt die Auskommentierungen gestrichen und mich durch die Fehler des w3c Validators gearbeitet (undankbarer Job - nebenbei bemerkt).
    Habe jetzt alle Fehler soweit verbessert (bis auf die, die meiner Meinung nach eigentlich keine Fehler sind). Bis jetzt hat sich noch nichts geändert - hat noch jemand einen Tipp? Bin hier langsam am verzweifeln^^

    MfG

    PS: Das Menü wird übrigens sogar im IE8 korrekt angezeigt - also funktioniert das Menü nur mit webkit-Browsern nicht richtig...
     
    #13 thexm, 23. August 2012
    Zuletzt bearbeitet: 23. August 2012
  14. formateins

    formateins Gast

    Wenn Du meinen Beitrag genauer lesen würdest, hättest Du das Problem nicht. ;)

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Weise der 1. Unterebene mal eine feste Breite zu - schon passt das.

    Chrome, IE & FF bei mir ohne Probleme. Hab leider nicht mehr Zeit...

    PS: Schau mal in die Theme-JS-Dateien. Dort sollte sich irgendwo ein Code finden, der den Menüpunkten diesen span-Tag hinzufügt (Platzhalter für Icons). Wenn Du die nicht verwenden willst, werf sie raus. Müsste irgendwas in der Art sein:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  15. thexm

    thexm Member

    Registriert seit:
    25. Januar 2012
    Beiträge:
    18
    Zustimmungen:
    0
    :shock: Das ist peinlich. Danke euch beiden auf jeden Fall vielmals!

    MfG

    PS: Die Icons benutze ich noch - aber danke für den Tipp!