Wordpress Menü zweispaltig gestalten?

thexm

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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

Link zur Seite?
Wie wird das Dropdown Menü erzeugt? Mittels css oder javascript?

thexm

Die vorläufige Seite findest du unter heidelberger-depot.eu. Das Dropdown-Menü wird meines Wissens nach mit CSS realisiert.

Danke schonmal!

formateins

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 [FONT=courier new]float:left[/FONT] und die Breite kannst Du relativ steuern und auch vererben. Probier es da einfach erstmal mit festen Breiten [FONT=courier new]width:300px[/FONT] - 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).

thexm

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!

formateins

Hilft Dir nix, weil das nur eine Momentaufnahme ist... ;)

http://www.formateins.de/extern/menu_2cols.jpg

thexm

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

thexm

Also mal ausgegrenzt geht's ja um den Teil hier:

PHP

nav#main-nav li ul li {float:none;border-top:1px solid #ccc;margin:0;padding:0;position:relative;float:left;width:199px;}
nav#main-nav li ul li:first-child{border-top:none;}
nav#main-nav ul li ul li span.before, nav#main-nav > ul > li > span.before {display:none;}
nav#main-nav li ul li a{text-decoration:none;color:#333;display:block;*zoom:1px;border:none;padding:6px 5px 5px 10px;}
nav#main-nav > ul > li > ul > li:hover > a, nav#main-nav > ul > li > ul > li > a:hover {color:#113F7B;text-shadow:none;}
nav#main-nav ul ul ul li a:hover {color:#113F7B;text-shadow:none;}
/* MEGA MENU CATEGORY */
nav#main-nav li.categories ul {min-width:300px;white-space:nowrap;width:100%;}
nav#main-nav li.categories li {float:left;margin-right:20px;border-top:1px solid #ccc;width:130px;}
nav#main-nav li.categories li:first-child {border:none;}
nav#main-nav li ul li ul {display:none;border:1px solid #CCC;position:absolute;top:0;left:100%;min-width:100%;margin-left:12px;z-index:200;background-color:#f8f8f8;box-shadow:0 3px 7px rgba(0,0,0,.3);float:left;width:400px;}
nav#main-nav li ul li:hover ul{display:block;}

Alles anzeigen

formateins

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 [COLOR=#0000BB][FONT=monospace]nav[/FONT][/COLOR][COLOR=#FF8000][FONT=monospace]#main-nav li ul li ist im Übrigen die 1. Unterebene...[/FONT][/COLOR]

thexm

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?

thexm

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!

pixselig

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

thexm

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

formateins

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

Code

[COLOR=#000000][FONT=Consolas]nav#main-nav li ul {width:200px}
[/FONT][/COLOR]

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

$("ELEMENTCLASS").prepend...

thexm

:shock: Das ist peinlich. Danke euch beiden auf jeden Fall vielmals!

MfG

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

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wordpress Menü zweispaltig gestalten?

Jetzt mitmachen!