Brauche Hilfe bei CSS Menü

[olli0578]

Hallo Ihr lieben,
arbeite gerade an einem eigenen Template und komme beim Menü für die Kategorien nicht weiter.

Folgendes Problem:
Kategorien, welche Unterkategorien enthalten sollen ein + (plus.gif)vor dem Kategorienamen erhalten.
Kategorien, welche keine Unterkategorien haben, sollen einen > (pfeil.gif)erhalten.
Unterkategorien sollen automatisch einrücken.
Soll dann ungefähr so aussehen:

+Kategorie 1
   +Unterkategorie 1
       >Unterkategorie 2
       >Unterkategorie 3
>Kategorie 2

Es soll also die übergeordnete Kategorie ein neues Vorzeichen erhalten, sobald eine Unterkategorie vorhanden ist. 
Das ganze soll dynamisch über alle Kategorieebenen funktionieren.
Hat jemand ne Idee, wie ich das hinbekomme?

Link zum Shop: www.wietholt-daf.de/shop

Linkback: https://www.modified-shop.org/forum/index.php?topic=18649.0

[noRiddle (revilonetz)]

Willkommen im Forum.
Mach dir doch kleine Icons und versehe die Listenpunkte (oder besser noch die darin enthaltenen a-tags als diplay:block;) mit diesen Icons als Hintergundbild.
Der nötige Abstand links wird mit padding-left gemacht.

Gruß,
noRiddle

*Edit*
Sehe gerade, daß du doch den richtigen Ansatz hast. Wo ist das Problem?

[jannemann]

Ich denke, er sucht eher die Datei wo er seinen Wunsch umsetzen kann.

[noRiddle (revilonetz)]

Okay, ich habe auch nicht richtig gelesen, sorry.
Die Datei die neben der CSS-Datei zu bearbeiten wäre, ist /templates/YOUR_TEMPLATE/source/inc/xtc_show_category.inc.php .
Da müsstest du dann noch eine Klasse vergeben, so à la (Pseudocode!!):

Code: PHP  [Auswählen]

if(categoy has got subcategories){
$categories_string .= '<li class="level New_Class">';
}

Mit der neuen Klasse bestimmst du dann welches Hintegrund-Icon benutzt wird, Plus- oder Pfeil-Zeichen.

Nimm mal die xtc_show_category.inc.php aus dem Anhang.
Damit kann man die Darstellung des Kategoriemenus noch besser steuern und auch aktive Kategorien mit CSS stylen.

Gruß,
noRiddle

[olli0578]

Das mit dem Einrücken war nicht das Problem.
Wenn ich die drei Zeilen Code einfüge bekomme ich folgenden Fehler:

Parse error: syntax error, unexpected T_STRING in /var/www/vhosts/wietholt-daf.de/httpdocs/shop/templates/daf/source/inc/xtc_show_category.inc.php on line 79

Code: PHP  [Auswählen]

        79. if (category has got subcategories) {
                      80. $categories_string .= '<li class="level New_Class">';
                      81.}
 

Bei Deiner angehängten datei hauts mir die Unterkategorien weg.

[olli0578]

Ich Dussel...Parse error..

so à la (Pseudocode!!)

Aber der Ansatz von noRiddle ist gut.
Jemand ne Idee, wie ich die xtc_show_category.inc.php nach noRiddles Vorschlag bearbeiten muß?

Zum Thema aktive Kategorie markieren...
Habe folgenden Code eingefügt

Code: PHP  [Auswählen]

if ( ($id) && (in_array($counter, $id)) ) {$categories_string .= '" class="current'; }

$categories_string .= '">';

Die gewählte Kategorie wird mir jetzt als aktiv angezeigt...allerdings auch die Elternkategorien. Wie bekomme ich es hin, das ich nur die aktuelle Kategorie und nicht auch die Elternkategorien als aktiv markiere?

[Matt]

Jemand ne Idee, wie ich die xtc_show_category.inc.php nach noRiddles Vorschlag bearbeiten muß?

Die Unterkategorien in xtc sind nicht richtig verschachtelt, sondern einfach durch CSS-Klassen optisch 'eingerückt'. Du solltest zunächst für eine richtige Verschachtelung sorgen, da gibt's AFAIK was fertiges von Gunnart. Und damit löst sich auch dein eigentliches Problem, weil wenn du weißt, dass du in den aktuellen <li> einen weiteren <ul>-Baum bauen musst kannst du auch dem <li> noch eine Klasse mitgeben.

Die gewählte Kategorie wird mir jetzt als aktiv angezeigt...allerdings auch die Elternkategorien. Wie bekomme ich es hin, das ich nur die aktuelle Kategorie und nicht auch die Elternkategorien als aktiv markiere?

Schwer zu beantworten, ohne zu wissen, mit welchen Werten $id und $counter beim Schleifendurchlauf gefüllt sind.

[olli0578]

So...ich bin der Sache langsam auf der Spur:
Als erstes muß in der SQL Datenbank in der Tabelle categories das Feld sub_id angelegt werden.
Das habe ich manuell in der Datenbank erledigt.

In der stylesheet.css habe ich folgende Klasse definiert:
ul#categorymenu li.level1withsub a
ul#categorymenu li.level2withsub a
ul#categorymenu li.level3withsub a
ul#categorymenu li.level4withsub a
ul#categorymenu li.level5withsub a

Jetzt muß in der Datenbank in der Tabelle categories das Feld sub_id der Elternkategorie mit einer 1 gefüllt werden, sobald eine Unterkategorie angelegt wird und wieder mit Null gefülllt werden, wenn die Unterkategorie gelöscht wird.
Vielleicht mit folgender Abfrage?

Code: PHP  [Auswählen]

if $sql = 'SELECT `parent_id` FROM `categories`' is not 0 then $sql = 'WRITE 1 To `sub_id` FROM `categories`'
else 'WRITE 0 To `sub_id` FROM `categories`';

Und wo und in welcher Datei muß die Abfrage eingefügt werden?

Anschließend kommt dann die if Abfrage die die Klasse anwendet, sobald sub_id mit 1 belegt ist.

Soweit die Theorie.
Bloß wie setze ich mein Vorhaben um?

[Matt]

Hast du dir das mal durchgelesen? http://www.gunnart.de/tipps-und-tricks/xtcommerce-kategorien-navigation-als-liste-ausgeben/

[olli0578]

Danke für den Tip. Das ist genau das was ich benötige. Leider ist keine css Musterdatei dabei. Probiere schon den ganzen Abend meine stylesheet zu bearbeiten, komme aber irgendwie mit den Klassen nicht zurecht. Bin zugegeben eher ein newbie in Sachen css. Vielleicht kann sich ja mal jemand ein bisschen Starthilfe geben.

[olli0578]

Hab die xtc_category_inc.php von Gunnart installiert und bekomme das CSS einfach nicht angepasst.
Den für das Menü relevanten teil der stylesheet.css (Style wie er bisher mit der originalen xtc_show_category.ink.php zumindest schon teilweise funktioniert hat)

Code: CSS  [Auswählen]

/* LEVEL1 */
ul#categorymenu li.level1 a {display: block; padding-left: 24px; background-color: transparent; background-image: url("bilder/more-arrow.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 10px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level1 a:hover {color: #112e83;}
ul#categorymenu li.level1 a.current {color: #112e83;font-weight: bold;}
ul#categorymenu li.level1withsub a {display: block; padding-left: 24px; background-color: transparent; background-image: url("bilder/plus.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 10px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level1withsub a:hover {color: #112e83;}
ul#categorymenu li.level1withsub a.current {color: #112e83;font-weight: bold;}

/* LEVEL2 */
ul#categorymenu li.level2 a {display: block; padding-left: 44px; background-color: transparent; background-image: url("bilder/more-arrow.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 30px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level2 a:hover {color: #112e83;}
ul#categorymenu li.level2 a.current {color: #112e83;font-weight: bold;}
ul#categorymenu li.level2withsub a {display: block; padding-left: 24px; background-color: transparent; background-image: url("bilder/plus.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 10px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level2withsub a:hover {color: #112e83;}
ul#categorymenu li.level2withsub a.current {color: #112e83;font-weight: bold;}

/* LEVEL3 */
ul#categorymenu li.level3 a {display: block; padding-left: 64px; background-color: transparent; background-image: url("bilder/more-arrow.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 50px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level3 a:hover {color: #112e83;}
ul#categorymenu li.level3 a.current {color: #112e83;font-weight: bold;}
ul#categorymenu li.level3withsub a {display: block; padding-left: 24px; background-color: transparent; background-image: url("bilder/plus.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 10px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level3withsub a:hover {color: #112e83;}
ul#categorymenu li.level3withsub a.current {color: #112e83;font-weight: bold;}

/* LEVEL4 */
ul#categorymenu li.level4 a {display: block; padding-left: 84px; background-color: transparent; background-image: url("bilder/more-arrow.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 70px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level4 a:hover {color: #112e83;}
ul#categorymenu li.level4 a.current {color: #112e83;font-weight: bold;}
ul#categorymenu li.level4withsub a {display: block; padding-left: 24px; background-color: transparent; background-image: url("bilder/plus.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 10px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level4withsub a:hover {color: #112e83;}
ul#categorymenu li.level4withsub a.current {color: #112e83;font-weight: bold;}

/* LEVEL5 */
ul#categorymenu li.level5 a { display: block; padding-left: 104px; background-color: transparent; background-image: url("bilder/more-arrow.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 90px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level5 a:hover {color: #112e83;}
ul#categorymenu li.level5 a.current {color: #112e83;font-weight: bold;}
ul#categorymenu li.level5withsub a {display: block; padding-left: 24px; background-color: transparent; background-image: url("bilder/plus.gif"); background-repeat: no-repeat; background-attachment: scroll; background-position: 10px 7px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; padding-bottom: 5px; color: #333333; line-height: 11px; padding-top: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; TEXT-DECORATION: none}
ul#categorymenu li.level5withsub a:hover {color: #112e83;}
ul#categorymenu li.level5withsub a.current {color: #112e83;font-weight: bold;}
 

Die html Ausgabe mit der neuen xtc_category_inc.php findet ihr in meinem Shop www.wietholt-daf.de/shop

Und Hier nochmal der Quelltext der neuen xtc_category_inc.php

Code: PHP  [Auswählen]

<?php
/*
        -----------------------------------------------------------------------------------------
        $Id: xtc_show_category.inc.php 1262 2005-09-30 10:00:32Z mz $

        XT-Commerce - community made shopping
        http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte <a href="index.php?topic=3013.0">Forenregeln</a> beachten! ))

        Copyright (c) 2003 XT-Commerce
        -----------------------------------------------------------------------------------------
        based on:
        (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
        (c) 2002-2003 osCommerce(categories.php,v 1.23 2002/11/12); www.oscommerce.com
        (c) 2003         nextcommerce (xtc_show_category.inc.php,v 1.4 2003/08/13); www.nextcommerce.org

        Released under the GNU General Public License
        -----------------------------------------------------------------------------------------
        Modified to get a cleaner HTML-output without tables
        Bugfix
        Shows, which categories have subcategories
        by Gunnar Tillmann
        http://www.gunnart.de
        -----------------------------------------------------------------------------------------
*/

function xtc_show_category($counter) {

global $foo, $categories_string, $id;


//start the loop
for ($a=0; $a<$foo[$counter]['level']; $a++)
        {}


if ($foo[$counter]['level']=='') //maincat
        {
        if (strlen($categories_string)=='0')
                {
                $categories_string .='<ul class="navilist">';
                }
        $categories_string .='
                <li class="maincat';
        if (xtc_has_category_subcategories($counter))
                {
                $categories_string .= ' submenue';
                }
        $categories_string .= '"><a class="';
        if ( ($id) && (in_array($counter, $id)) )
                {
                $categories_string .= 'gewaehlt';
        }
        $categories_string .= '" href="';
        }

else //subcat
        {
        $categories_string .= '
                <li class="subcat level'.$foo[$counter]['level'];
        if (xtc_has_category_subcategories($counter))
                {
                $categories_string .= ' submenue'.$foo[$counter]['level'];
                }
        $categories_string .= '"><a class="';
        if ( ($id) && (in_array($counter, $id)) )
                {
                $categories_string .= 'gewaehlt';
        }
        $categories_string .= '" href="';
        }

$cPath_new=xtc_category_link($counter,$foo[$counter]['name']);

$categories_string .= xtc_href_link(FILENAME_DEFAULT, $cPath_new);
$categories_string .= '">';

$categories_string .= $foo[$counter]['name'];

if (SHOW_COUNTS == 'true')
        {
        $products_in_category = xtc_count_products_in_category($counter);
        if ($products_in_category > 0)
                {
                $categories_string .= ' <span class="catcount">(' . $products_in_category . ')</span>';
                }
        }

$categories_string .= '</a></li>';

if ($foo[$counter]['next_id'])
        {
        xtc_show_category($foo[$counter]['next_id']);
        }
else
        {
        $categories_string .= '
        </ul>';
        }
}

?>

Vielleicht kann sich ja mal jemand, der css code einfach so aus dem Ärmel schütteln kann der Sache annehmen und zumindest eine Kategorieebene im css definieren. Ich bastel schon seit gestern Abend dran rum und komme zu keinem auch nur halbwegs brauchbaren Ergebnis.

[noRiddle (revilonetz)]

Jemand ne Idee, wie ich die xtc_show_category.inc.php nach noRiddles Vorschlag bearbeiten muß?

Die Unterkategorien in xtc sind nicht richtig verschachtelt, sondern einfach durch CSS-Klassen optisch 'eingerückt'. ...

Dafür habe ich ihm ja die Datei angehängt, da ist das perfekt gelöst.
Die Datei ist übrigens aus dem Trunk und (soweit ich mich erinnere) von mir lediglich angepasst worden.

Gruß,
noRiddle

[olli0578]

Dank Matt's link bin ich jetzt schon ein ganzes Stück weiter. Allerdings bleiben die Elternkategorien aktiv, wenn ich weiter ins Untermenü navigiere. Liegt das jetzt an der xtc_show_category.inc.php oder hab ich im css was falsch gemacht?

[noRiddle (revilonetz)]

Warum siehst du das als Problem, daß die Elternkategorien aktiv angezeigt werden ?
Das ist doch nicht nur logisch sondern auch sinnvoll. ! ?

Gruß,
noRiddle

[olli0578]

So. Kategoriemenü ist fertig und eingebunden. Danke für Eure Hilfe. Übrigens Du hast Recht noRiddle. Macht eigentlich Sinn, die Elternkategorien aktiv anzuzeigen.