Jump to content
xt:Commerce Community Forum
Sign in to follow this  
MIRDOCHEGAL

Horizontales Menü (CSS)

Recommended Posts

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.

menukonfus.png

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:

menurighti.png

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.

Edited by MIRDOCHEGAL

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Edited by stwinger

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...