[gelöst] Grafisches Menü mit MenüManager
Posted: Fri Sep 19, 2008 10:56 am
Hey ihr,
also ich möchte für meine Seite (im Aufbau unter www.port-e.de/cmsmadesimple/ zu finden) eine bestimmte Schriftart für das Menü verwenden und habe deswegen die einzelnen Menüpunkte als gif´s vorliegen.
Der Code für mein Menü sieht so aus.
über die id für jeden Punkt habe ich dem Menü die einzelnen Grafiken als Hintergrundbilder hinzugefügt. Und den eigentlichen Text über text-intent nach außerhalb verschoben. Nur so funktioniert es nicht, da ich dann keinen Link zum anklicken habe. Wie kann ich denn den TExt durch das Bild austauschen und so einen grafischen Link machen? Warscheinlich ist die Lösung ganz einfach, aber irgendwie stehe ich gerade auf dem Schlauch.
Und habt nachsicht mit mir, dass ist mein erstes Projekt mit cmsms!
Viele Grüße
eleonore
also ich möchte für meine Seite (im Aufbau unter www.port-e.de/cmsmadesimple/ zu finden) eine bestimmte Schriftart für das Menü verwenden und habe deswegen die einzelnen Menüpunkte als gif´s vorliegen.
Der Code für mein Menü sieht so aus.
Code: Select all
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}</li>{elseif $node->index > 0}</li>
{/if}
{if $node->current == true || $node->parent == true}
<h1> <li id="button_{$node->hierarchy}" class="selected"><a href="{$node->url}">{$node->menutext}</a></h1>
{else}
<h1>
<li id="button_{$node->hierarchy}"><a href="{$node->url}">{$node->menutext}</a>{/if}{/foreach}{repeat string="</li></h1></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Code: Select all
#button_1{
/* you can set your own image here */
background: url(uploads/images/work.gif) no-repeat;
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
border-right: 1px solid #fff;}
#button_2{
/* you can set your own image here */
background: url(uploads/images/away.gif) no-repeat;
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
border-right: 1px solid #fff;}
#button_3{
/* you can set your own image here */
background: url(uploads/images/about.gif) no-repeat;
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}
div#menu ul{
display: inline;
list-style-type: none;
list-style-position:outside;
width: 100%;
}
div#menu li {
float: left;
margin-top: 110px;
width: 200px;
height: 35px;
}Viele Grüße
eleonore
