Themen
 
Individuelles Webdesign
 
11.05.2007 21:05

Text-Menü mit Grafik in Typo3

Kategorie: Typo3, Tutorial
Von: Andreas Prucha
Mit Typo3 lassen sich auch ohne GMENU Grafiken in Menüpunkte einbinden. TMENU, also Text-Menü-Elemente reichen und sind dazu noch barriere-freier.

Um Menüpunkte mit Grafiken versehen bedarf es nicht der Verwendung von GMENU-Objekten. TMENU bietet die Möglichkeit zum Text des Menüpunktes Grafiken darzustellen.

Das GMENU ist ein Unterobjekt von dem HMENU und generiert ein grafisches Menü, bei dem jeder Link eine separate GIF-Datei ist. TMENU objekte sind grundsätzlich text-orientiert, können aber wie in dem Beispiel mit Grafiken versehen werden.

Dieses Beispiel soll ein Top-Menü produzieren, bei welchem vor jedem Menüpunkt eine von der Seite abhängige Grafik dargestellt werden soll. Ist die Seite nicht die aktive, soll das Bild in S/W angezeigt werden, bewegt der Besucher den Maus-Cursor über den Menüpunkt oder ist die Seite aktiv wird das Bild in Farbe angezeigt.

Die Struktur des Menüs ist Grundsätzlich folgende:

<ul>

<li><a><img></a><div></a>Titel</a></div></li>

<li><a><img></a><div></a>Titel</a></div></li>

<li><a><img></a><div></a>Titel</a></div></li>

...

</ul>

TS-Template

field.mainMenu = HMENU
field.mainMenu.entryLevel = 0
field.mainMenu.maxItems = 5
field.mainMenu.1 = TMENU
field.mainMenu.1
{
#wrappe das ganze Menue in ul
wrap = <ul>|</ul>

#Die einzelnen menuepunkte wrappe in li
NO.allWrap = <li>|</li>

# Die Beschriftung des menuepunktes wrapppe in eine div mit klasse caption

NO.linkWrap = <div class="caption">|</div>

# Bild soll verlinkt werden
NO.beforeImgLink = 1

# Hole das Bild aus media-feld und bearbeite es
NO.beforeImg = GIFBUILDER
NO.beforeImg
{
format = jpg
#definiere groese des bildes im menue
XY = 105,70
10 = IMAGE
10.file
{
#bild aus media-feld holen
import = uploads/media/
import.field = media
import.listNum = 0
}
# bild wird grau dargestellt wenn punkt nicht angewaehlt
30 = EFFECT
30.value = gray
}

# Alternative Darstellung fuer Mouse-Over (RO). Bild ist in Farbe wenn sich maus
# ueber Menuepunkt bewegt.
NO.RO = 1
NO.beforeROImg < .NO.beforeImg
NO.beforeROImg
{
# Bild nicht in Grau konvertieren bei Roll-Over
30.value =
}
#
# Format wenn Aktiv. Div fuer Caption bekommt zusaetzlich Klasse caption-active
#
ACT < .NO
ACT = 1
ACT.linkWrap = <div class="caption caption-active">|</div>
ACT.beforeImg
{
# Nicht ausgrauen !
30.value =
}
#Current Menue-Punkte sind wie Active – Einfach uebernehmen
CUR < .ACT
CUR = 1
}

 

Das Script gestaltet sich relativ einfach. wrap = <ul>|</ul> umschliesst das gesamte Menü mit den Tags UL. Dadurch wird eine unsortierte Liste generiert. NO.allWrap = <li>|</li> ist dafür zuständig die einzelnen Menüpunkte mit List-Item-Tags zu versehen. Ich versehe die Beschriftung noch zusätzlich mit einem DIV: NO.linkWrap = <div class="caption">|</div>. Das ist nicht unbedingt notwendig und kann je nach Bedarf anders gewählt werden.

Template-TS (Auszug)

 NO.beforeImg = GIFBUILDER
NO.beforeImg
{
format = jpg
#definiere groese des bildes im menue
XY = 105,70
10 = IMAGE
10.file
{
#bild aus media-feld holen
import = uploads/media/
import.field = media
import.listNum = 0
}
# bild wird grau dargestellt wenn punkt nicht angewaehlt
30 = EFFECT
30.value = gray
}

Für die Darstellung der Grafik ist NO.beforeImg zuständig. Falls das Bild nach dem Text des Menüpunkts dargestellt werden soll kann auch NO.afterImg verwendet werden.

Dieses Beispiel zeigt, wie dafür ein Bild aus dem Medien-Feld der Seite genommen, und entsprechend konvertiert werden kann.

Dieses Menü geht davon aus, dass das Bild für die Seite als erstes Element im Medien-Feld steht (Achtung: Um Medien angeben zu können, muss der Seitentyp Advanced gewählt werden.

Dieser Abschnitt weist Typo3 an, die Grafik für das Menü aus dem Media-Feld zu nehmen und durch den GIFBUILDER zu jagen. Dabei wird in diesem Beispiel davon ausgegangen, dass die Grafik 105 x 70 Pixel gross ist. Durch die Angabe des Effekts „gray“wird das Bild in S/W konvertiert.

Natürlich können auch andere Grössen gewählt werden (einfach bei XY die anderen Werte angeben) und gegebenenfalls – falls nicht sicher gestellt ist, dass das Bild in der richtigen Grösse vorliegt – mit SCALE sklalieren. Mehr Infos dazu in der Doku des GIFBUILDER.

Bei Mouse-Over (in TMENUITEM ist dafür das Feld RO bzw. NO.beforeROImg zuständig) soll das Bild in Farbe, also ohne S/W-Konvertierung dargestellt werden. Für diesen Zweck wird die Deklaration von NO.beforeImg mit < in NO.beforeROImg kopiert und das für den Grau-Effekt zuständige Feld value mit einem Leerstring überschrieben. Es wird also auf die Grafik kein Effekt ausgeführt.

Template-TS (Auszug):

NO.RO = 1
NO.beforeROImg < .NO.beforeImg
NO.beforeROImg {
# Bild nicht in Grau konvertieren bei Roll-Over
30.value =
}

Die Menü-Stati ACT und CUR bekommen die Deklaration von NO zugewiesen wobei der Filter auch für beforeImg überschrieben wird, da das Bild der aktuellen Seite in Farbe dargestellt werden soll. Zusätzlich wird dem div um den Link-Text mit ACT.linkWrap = <div class="caption caption-active">|</div> noch eine weitere Klasse zugewiesen

Natürlich kann das CSS beliebig gestaltet werden. Für den Test wurde folgendes CSS verwendet:

Beispiel-CSS:

#top_menu ul
{
margin-left: 10px;
line-height: 1em;
list-style: none;
position: absolute;
left: 0px;
top: 77px;
line-height: 1.4em;
}
#top_menu ul li
{
text-align: center;
float: left;
width: 125px
}
#top_menu ul li .caption
{
display: table-cell;
vertical-align: middle;
width: 125px;
height: 38px;
}
#top_menu ul li .caption-active a,
#top_menu ul li .caption-active a:link,
#top_menu ul li .caption-active a:visited
{
color: #FFFFFF;
}

Ich gehe in dem Beispiel davon aus, dass sich das Menü in einem DIV mit der ID top_menu befindet. Dieses CSS bildet nebeneinander stehende Menüpunkte, jeweils mit jeweils einem mit Text unterschriebenen Bild.

 

 



Kommentare


Kommentar schreiben...


Anzeige: 1 - 2 von 2.
 
Wednesday, 31. 10 07 16:31
Jürgen Salesski
js@jsp-agent.de   

Vielen Dank auch von mir.

ich habe allerding ein kleines Problem:

ich möchte seiteninhalt vom Typ sitemap so gestallten dass die menüpunkte in einem a-tag nicht nur Titel der Seite haben sondern auch ein Bild der Seite vor dem Text haben.

mit dem Beispiel oben erhalte ich aber 2 a-Tags.

wie könnte ich also das Element beforeImg mit dem Titel der seite dahinter umsetzen?

Gruß Jürgen.

 
Friday, 06. 04 07 13:47
Roman

Vielen Dank, das hat mir sehr geholfen :)

 
 

Kommentar schreiben