Horizontales Menü (CSS)

[MIRDOCHEGAL]

Hallo,

ich habe bereits die Suchfunktion genutzt aber nicht gefunden was ich suche. Für einen Shop soll ich ein Horizontales Menü erstellen.

Dieses besteht aus:

5 Hauptkategorien mit jeweils bis zu 4 Unterkategorien.

Die horizontale Darstellung klappt auch soweit per CSS wenn nur Level1 angezeigt wird. Leider lassen sich die Unterpunkte nicht unter der jeweiligen Hauptkategorie anzeigen und die Level1 Elemente werden einfach unter den Level2 Elementen dargestellt.



Ich habe mehrere Stunden am CSS rumgeschrieben aber komme zu keinen zufrieden stellenden Ergebnissen, habe gerade vieles wieder entfernt. Irgendwie hab ich was vergessen oder die categories.php / box_categories.html muss noch entsprechend umgeschrieben werden.

Soll soll es in etwa aussehen:


CSS:

ul#categorymenu .active, ul#categorymenu .active a { 
font-weight:900; color: #000;
}
ul#categorymenu {
	list-style-type:none;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-transform:uppercase;
}
ul#categorymenu li {
	list-style-type:none;
	}
ul#categorymenu li a{ text-decoration:none; color:#000;}
/* 1st TIER */ ul#categorymenu li.level1 {
	display:inline-block;
	padding:4px 0px 4px 6px;
	font-size: 1.5em;
	}
/* 2nd TIER */ ul#categorymenu li.level2 {
	font-size:10px;
	padding:4px 0px 4px 6px;
}
/* 3rd TIER */ ul#categorymenu li.level3 {
	top:50px;
	font-size:9;
	}

categories.php

defined('_VALID_CALL') or die('Direct Access is not allowed.');

$tpl_data = array('_categories'=> $category->getCategoryBox(),'_deepest_level_display'=>$category->deepest_level_display);
?>

box_categories.html

<ul id="categorymenu">
{foreach name=aussen item=module_data from=$_categories}
	<li class="level{$module_data.level}"><a href="{$module_data.categories_link}" title="{$module_data.categories_heading_title}">{$module_data.categories_name}</a></li>
{/foreach}
</ul>

Ich wäre dankbar für ein wenig Hilfe oder ein paar Denkanstöße. Bin gerade geistig in einer Sackgasse. Da meine bisherigen CSS Änderungen nicht helfen...

Vielen Dank für eure kostbare Zeit.

[stwinger]

Hi, das geht natürlich am besten mit einer nested list. Wenn Deine Änderung Dir eine richtige Liste ausgibt brauchst Du natürlich noch ein kleines JS für die IE6 Nutzer. Ich würde Dir empfhelen dieses mit JQuery zu machen. Das beste Dropdownmenü incl Markup dazu findest DU hier : Superfish - Suckerfish on 'roids

[MIRDOCHEGAL]

Danke für die Antwort.

Ja, Jquery Suckerfish Menü habe ich öfters in u.a. Wordpress Templates benutzt. Das ist nicht das Problem. Wie spreche ich die SMARTY Variablen an?

level{$module_data.level}

Kann ich hier auch level1 level2 level3 benutzen?

Dann wäre mein Problem gelöst... derzeit macht der ja einfach irgendwas im Hintergrund und haut die <li>´s untereinander. Das ist für meine Zwecke nicht so sinnvoll.

Gruß raus

[stwinger]

Zitat von MIRDOCHEGAL

Danke für die Antwort.

Ja, Jquery Suckerfish Menü habe ich öfters in u.a. Wordpress Templates benutzt. Das ist nicht das Problem. Wie spreche ich die SMARTY Variablen an?

level{$module_data.level}

Kann ich hier auch level1 level2 level3 benutzen?

Dann wäre mein Problem gelöst... derzeit macht der ja einfach irgendwas im Hintergrund und haut die <li>´s untereinander. Das ist für meine Zwecke nicht so sinnvoll.

Gruß raus

kopiere doch mal bitte Deinen generierten Quelltext .. (html Markup) deiner Kategorien Box hier rein ..damit ich mal sehe was da los ist oder sende mit einfach mal einen Link zum Shop.


Level1 bis was weiss ich was kannst Du natürlich so nicht nehmen da man sowas anders formatiert.

z.B.

ul li {}
ul li li {}
ul li li li {}

Ich gehe aber mal davon aus das Du keine verschachtelte Liste als Markup hast.

[MIRDOCHEGAL]

Richtig, aufgrund der box_categories.html

<ul id="categorymenu">
{foreach name=aussen item=module_data from=$_categories}
	<li class="level{$module_data.level}"><a href="{$module_data.categories_link}" title="{$module_data.categories_heading_title}">{$module_data.categories_name}</a></li>
{/foreach}
</ul>

Gibt er mir nur <li>´s aus.

Wie ich das hart code, weiß ich. Aber es sollte doch vom System generiert sein?

<ul id="categorymenu">
<li class="level1"><a href="" title="Damen">Damen</a></li>
<li class="level1"><a href="" title="Herren">Herren</a></li>
<li class="level2"><a href="" title="T-Shirts">T-Shirts</a></li>
<li class="level2"><a href="">Hoodies</a></li>
<li class="level2"><a href="" title="Zippers">Zippers</a></li>
<li class="level1"><a href="">Tonträger</a></li>
<li class="level1"><a href="" title="Firlefanz">Firlefanz</a></li>
</ul>

Das erzeugt das System! Und ich möchte das gerne nested haben.

Was soll ich an der BOX_CATEGORIES.HTML ändern?! (s.o.)

[MIRDOCHEGAL]

100 €? Dropdown / Flyout Kategoriemenü-50007_264

Für ein Menü?! WOW!

[MIRDOCHEGAL]

Hab dir 2 mal eine PM geschickt, da ich nicht weiß ob die erste angekommen ist. Besten Gruß & Danke noch einmal...

[de.sc]

könntest du mir auch eine PM zukommen lassen mit einem Lösungsansatz?
ich suche schon ewig hier nach einer Lösung, wie man die zweite/dritte ebene (unterkategorien) automatisch im menü verlinkt angezeigt bekommt.

lieben Dank!

[dukie6666]

dazu muss auch eine php Datei im System angepasst werden. Rein über das Template geht das nicht.

[de.sc]

weißt du welche? und in etwa, was dort zu tun ist?
bräuchte erstmal einen ansatz, um weiter zu kommen.
wäre riesig von dir