Design Menü Problem

racoon · July 1, 2009, 7:00pm

Hallo mal wieder,

soll-zustand meine menüs: Als Beispiel…

aktivierte Hauptpunkte rot.
aktivierte Unterpunkte dunkelgrau und Hauptpunkt bleibt rot.

mouse over bei Hauptpunkten rot.
mouse over bei Unterpunkten hellgrau.

Die Spaltenhöhe bei Unterpunkten ist ein paar Pixel weniger.

Ist zustand:
Ich kriege kein Layout für die Unterpunkte hin!?

Denke hierfür müsste ich die category_tree.tpl anfassen, oder?

[{if $tree || $oView->getContentCategory() }]
[{assign var="oContentCat" value=$oView->getContentCategory() }]
[{defun name="category_tree" tree=$tree act=$act class=$class testSubCat=''}]
[{strip}]
    <ul [{if $class}]class="[{$class}]"[{/if}]>
    [{foreach from=$tree item=ocat key=catkey name=$test_catName}]
        [{if ( !$ocat->isTopCategory() || !$oView->showTopCatNavigation() ) && $ocat->getContentCats() }]
            [{foreach from=$ocat->getContentCats() item=ocont key=contkey name=cont}]
			
            <li><a id="test_BoxLeft_Cms_[{if $ocat->isTopCategory()}][{$ocat->oxcategories__oxid->value}]_[{$smarty.foreach.cont.iteration}][{else}][{$testSubCat}]_sub[{$smarty.foreach.cont.iteration}][{/if}]" href="[{$ocont->getLink()}]" class="[{if $ocat->isTopCategory()}]root[{/if}][{if $oContentCat && $oContentCat->getId()==$ocont->getId()}] act last[{/if}]">[{ $ocont->oxcontents__oxtitle->value }]</a></li>
            [{/foreach}]
        [{/if}]
        [{if $ocat->getIsVisible() }]
        <li>
            <a id="test_BoxLeft_Cat_[{if $ocat->isTopCategory()}][{$ocat->oxcategories__oxid->value}]_[{$smarty.foreach.$test_catName.iteration}][{else}][{$testSubCat}]_sub[{$smarty.foreach.$test_catName.iteration}][{/if}]" href="[{$ocat->getLink()}]" class="[{if $ocat->isTopCategory()}]root [{/if}][{if $ocat->hasVisibleSubCats}][{if $ocat->expanded }]exp [{/if}]has [{else}]last [{/if}][{if isset($act) && $act->getId()==$ocat->getId() && !$oContentCat }]act [{/if}]">[{$ocat->oxcategories__oxtitle->value}] [{if $ocat->getNrOfArticles() > 0}] ([{$ocat->getNrOfArticles()}])[{/if}]</a>
            [{if $ocat->getSubCats() && $ocat->expanded}]
                [{fun name="category_tree" tree=$ocat->getSubCats() act=$act class="" testSubCat=$ocat->oxcategories__oxid->value }]
            [{/if}]
        </li>
        [{/if}]
    [{foreachelse}]
        [{if $oContentCat }]
            <li><a id="test_BoxLeft_Cms_0" class="root act" href="[{$oContentCat->getLink()}]">[{ $oContentCat->oxcontents__oxtitle->value }]</a></li>
        [{/if}]
    [{/foreach}]
    </ul>
[{/strip}]
[{/defun}]
[{/if}]

Hier kenn ich mich aber ganz und gar nicht aus. Wie kann ich denn erfahren, was z.b. $testsubcat usw. überhaupt in sich trägt.

CSS:

ul.tree li a {background:#fff  no-repeat right  500px;color:#669999;display:block;padding:10px 2px;border-top:1px solid #CCCCCC;}
ul.tree li a.has{background:#66CC33;padding-right:10px;background-position:right -175px;}  
ul.tree li a.root{background:#fff;text-indent:10px;padding-right:0;background-position:0 -175px;font-weight: bold;border-color:#CCCCCC;}
ul.tree li a.exp{background:#fff;text-indent:10px;padding-right:0;background-position:0 -200px;}  
ul.tree li a.act{background:#55728a;color:#fff;}
ul.tree li a:hover{ background:#55728a;color:#fff;}
ul.tree li a.exp.act{background:#34534}

Hier ist wohl pauschal der gesamte baum betroffen. Muss eine zusätzliche child-css für die Unterpunkte anlegen und im .tpl diese ansprechen. Doch wo im category_tree.tpl.
Oder ist meine Vermutung falsch?

Wäre jmd so nett und hilft mir auf die Sprünge. 100000 Dank schon im Voraus!

…Ansonsten komm ich sehr gut voran. Vielen Dank an alle!

tobi73de · July 1, 2009, 7:20pm

Ich weiss ja nicht wie du arbeitest, aber mal ganz allgemein kann man den [B]Firefox[/B] als Browser + das ein oder andere Plugin, wie [B]Firebug[/B] und/oder [B]Webdeveloper[/B] empfehlen. Damit kann man sich seine Seite oder spezielle Bereiche sehr schön durchleuchten und die CSS-Abhängigkeiten auflösen.

An der TPL-Datei brauch man wahrscheinlich erstmal nichts ändern. Das sollte alles mit CSS zu realisieren sein.

racoon · July 1, 2009, 8:23pm

hallo tobi. vielen dank für dein feedback.
leider geht das mit css eben nicht. hab dort alles schon versucht.

hab nun die css erweitert:


/*Subnav*/
ul.tree li a.navsub:hover{ background:#000;color:#fff;}
ul.tree li a.navsub:act{ background:#000;color:#fff;}

hatte es vorhin hinbekommen, nur verkehrt herum.

der schlüssel liegt wohl hier drin:

        [{if $ocat->getIsVisible() }]
        <li>
            <a id="test_BoxLeft_Cat_[{if $ocat->isTopCategory()}][{$ocat->oxcategories__oxid->value}]_[{$smarty.foreach.$test_catName.iteration}][{else}][{$testSubCat}]_sub[{$smarty.foreach.$test_catName.iteration}][{/if}]" href="[{$ocat->getLink()}]" class="[{if $ocat->isTopCategory()}]root [{/if}][{if $ocat->hasVisibleSubCats}][{if $ocat->expanded }]exp [{/if}]has [{else}]last [{/if}][{if isset($act) && $act->getId()==$ocat->getId() && !$oContentCat }]act [{/if}]">[{$ocat->oxcategories__oxtitle->value}] [{if $ocat->getNrOfArticles() > 0}] ([{$ocat->getNrOfArticles()}])[{/if}]</a>
            [{if $ocat->getSubCats() && $ocat->expanded}]
                [{fun name="category_tree" tree=$ocat->getSubCats() act=$act class="" testSubCat=$ocat->oxcategories__oxid->value }]
            [{/if}]
        </li>
        [{/if}]

Jedoch weiss ich nicht, was exp,has, last, root bedeutet.
hab es mit try&error noch nicht rausgefunden.

werde aber mal weiter probieren…

racoon · July 1, 2009, 8:57pm

Hab die CSS Punkte nun beschrieben:

/* MENU!!! */
ul.tree li a {font-size: 13px;font-family: arial, helvetica, verdana, sans-serif;background:#fff  no-repeat right  500px;color:#669999;display:block;padding:10px 2px;border-top:1px solid #CCCCCC;}

/* ????  */
ul.tree li a.has{ background:#cc33cc;padding-right:10px;background-position:right -175px;}  

/* Alle Hauptkategorien, die nicht ausgewählt sind*/
ul.tree li a.root{background:#fff;text-indent:10px;padding-right:0;background-position:0 -175px;font-weight: bold;border-color:#CCCCCC;}

/*Aktueller Hauptmenüpunkt, wenn Unterpunkte aktiv*/
ul.tree li a.exp{background:#66cc33;text-indent:10px;padding-right:0;background-position:0 -200px;}  

/*Unterpunkt*/
/*Aktueller Menüpunkt, egal ob Haupt oder Unterpunkt */
ul.tree li a.act{background:#000;color:#fff;}
ul.tree li a:hover{ background:#55728a;color:#fff;}

/* Hauptmenüpunkt gewählt, ohne aktiven Unterpunkt*/
ul.tree li a.exp.act{background:#FFFF33}

Wie soll ich nun die die Untermenüpunkte ansprechen?
Aktuell wird nicht zwischen Haupt+Unterpunkte unterschieden.
Möchte “hover” (mouse over) und aktiver Unterpunkt jeweils mit einer anderen Farbe darstellen.

tobi73de · July 1, 2009, 9:55pm

sind wohl engl. Abkürzungen, bzw. Bezeichnungen:

exp, expanded --> entfaltet
has --> hat oder besitzt Unterelemnte
last --> letzter oder letztes Element
root --> Wurzel (also ganz oben[eigentlich ganz unten ;)])

ohne Gewehr

Wenns Dir hilft kannste ja mal bei http://yapool.de/haustechnik das menü ankucken und die css datei ziehen, da hab ich verschiedene hovereffekt kombis drin. Ist wahrscheinlich nicht genau das was du willst aber, als Anregung solltes gehen. Und da ist [B]fast [/B]alles mit css gemacht.

racoon · July 1, 2009, 10:29pm

Hi, Danke für die kurze Beschreibung.

Seite sieht gut aus. In Deinem Menü gibts jedoch keine Unterpunkte bzw. Unterpunkte, die eine andere Untergrundfarbe erhalten.

Das suche ich eigtl. Das Menü, wie Du es hast, habe ich momentan auch hinbekommen. Dies ist mit dem aktuellen CSS möglich.

tobi73de · July 1, 2009, 11:39pm

In Deinem Menü gibts jedoch keine Unterpunkte bzw. Unterpunkte, die eine andere Untergrundfarbe erhalten.

eigentlich schon is noch sehr wenig gefüllt

im ersten menüeintrag hat man untermeues oder auch bei Heizungen

http://yapool.de/haustechnik/OEl-Heizungen/

oder

http://yapool.de/haustechnik/Heizkoerper/

racoon · July 2, 2009, 1:01am

Hi Tobi, die farbe ändert sich bei unterpunkten bei dir nicht, soweit ich das sehe.

es liegt an diesem codeschnipsel:

class="[{if $ocat->isTopCategory()}]root [{/if}][{if $ocat->hasVisibleSubCats}][{if $ocat->expanded }]exp [{/if}]has [{else}]last [{/if}][{if isset($act) && $act->getId()==$ocat->getId() && !$oContentCat }]act [{/if}]">

werde morgen mal ausknobeln, welche if bedingungen eintreten müssen, um die css der sub-navi anzusprechen…

avenger · July 2, 2009, 6:00am

[QUOTE=tobi73de;9926]sind wohl engl. Abkürzungen, bzw. Bezeichnungen:

exp, expanded --> entfaltet
has --> hat oder besitzt Unterelemnte
last --> letzter oder letztes Element
root --> Wurzel (also ganz oben[eigentlich ganz unten ;)])

ohne Gewehr

Wenns Dir hilft kannste ja mal bei http://yapool.de/haustechnik das menü ankucken und die css datei ziehen, da hab ich verschiedene hovereffekt kombis drin. Ist wahrscheinlich nicht genau das was du willst aber, als Anregung solltes gehen. Und da ist [B]fast [/B]alles mit css gemacht.[/QUOTE]
OXID war so freigiebig mit CSS-Klassen, so dass Du wirklich alles mit dem Menü machen kannst, was Du willst.

Template-Anpassungen sind da sicher nicht notwendig.

racoon · July 2, 2009, 8:48am

Hallo avenger, wie soll ich die unterpunkte im css ansprechen bzw. welche klasse muss hierfür erweitert werden?

für mich sieht es so aus, als die “li” für alle haupt-sowie unterpunkte gelten.
gibt’s eine unterscheidung zwischen “hauptpunkte” und unterpunkte im css?

Hmm…echt ne hart nuss für mich.

avenger · July 2, 2009, 8:55am

[QUOTE=racoon;9939]Hallo avenger, wie soll ich die unterpunkte im css ansprechen bzw. welche klasse muss hierfür erweitert werden?

für mich sieht es so aus, als die “li” für alle haupt-sowie unterpunkte gelten.
gibt’s eine unterscheidung zwischen “hauptpunkte” und unterpunkte im css?

Hmm…echt ne hart nuss für mich.[/QUOTE]
tobi73de hat hier eigentlich schon alles notwendige geschrieben:

http://www.oxid-esales.com/forum/showthread.php?p=9926

Das sind die Klassen, die Du anpassen musst.

Hmm…echt ne hart nuss für mich.

Ist halt alles nicht so einfach…

tobi73de · July 2, 2009, 10:47am

gibt’s eine unterscheidung zwischen “hauptpunkte” und unterpunkte im css
ja die Reihenfolge oder besser gesagt die Schachtelungstiefe

kleines CSS-Tutorial:

ul.tree li a wird geowned von ul.tree li ul li a

oder verständlicher als funkt. Beispiel:


<style>
ul.tree li a {color: red;}
ul.tree li ul li a {color: blue;}
</style>

<ul class="tree">
    <li><a>xxx</a></li>
    <li>
        <a>xxx</a>
        <ul>
            <li><a>yyy</a></li>
            <li><a>yyy</a></li>
            <li><a>yyy</a></li>
        </ul>
    </li>
    <li><a>xxx</a></li>
</ul>

avenger · July 2, 2009, 10:55am

[QUOTE=tobi73de;9961]ja die Reihenfolge oder besser gesagt die Schachtelungstiefe

kleines CSS-Tutorial:

ul.tree li a wird geowned von ul.tree li ul li a[/QUOTE]
Oder etwas verständlicher:

Mit dem Selector “[B]ul.tree li a[/B]” definiert man alle “anchors” in der Liste “tree” auf allen Ebenen.

Wenn ich aber in einer tieferen Ebene die “anchors” anders stylen will, kann ich die mit dem Selektor “[B]ul.tree li ul li a[/B]” anwählen.

Noch tiefer mit dem Selektor “[B]ul.tree li ul li [/B][B]ul li [/B][B]a[/B]” usw.

racoon · July 2, 2009, 11:57am

Tobi, Avenger, Asche auf mein Haupt und herzlichen Dank für die Nachhilfelektion.
Danke für das Tutorial. Klasse! Hoffe, ich kann bald auch mal jmd helfen. Aktuell siehts noch nicht danach aus

Das hab ich echt nicht gewusst, dass es so einfach geht!!
Bin echt froh