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 - 10 von 10.
 
Monday, 11. 03 19 14:36
Shalanda Leschen
aus Calci shalandaleschen@t-online.de    Website   

viagra cheapest www.bioshieldpill.com sublingual viagra [url=http://bioshieldpill.com/]viagra without a doctor prescription usa[/url]

 
Friday, 01. 03 19 11:07
Jasoniroto JasonirotoLR
aus http://xcialis20mg.com 1758zascpt0jm@mantilia48.fancycarnavalmasks.com    Website   

order cialis online usadifferent doses of cialis Buy Cialis xcialis20mg.com

 
Tuesday, 26. 02 19 14:11
Clarence Parkman
aus North Roe clarence.parkman@gmail.com    Website   

tadalafil 5mg price comparison www.cialisps.com can i
take valium and tadalafil

 
Saturday, 23. 02 19 01:06
Cortez Champagne
aus Seigneux cortezchampagne@gawab.com    Website   

fast acting herbal viagra http://viagragenupi.com cheap viagra online.
how long should i take viagra.

 
Tuesday, 12. 02 19 13:23
Datingorow DatingorowCI
aus http://freedatingsitesus.com/ vik.toriarubolkins@gmail.com    Website   

http://freedatingsitesus.com/
dating sites free
dating site,free local dating sites
free dating websites. dating sites, free dating
free dating
dating online free

 
Thursday, 31. 01 19 03:16
JospehvoK JospehvoKBC
aus https://stowe365.com/#Buy-Cialis-20-mg thincariper1989ytavip@yandex.ru    Website   

cialis para venta al mayoreo
cialis shop erfahrungen
testimonials cialis users
cialis online usa no prescription

generic cialis 200mg
cialis cream online in canada
cialis price cvs usa
cheap cialis generic
https://stowe365.com/#Buy-Cialis-20-mg

 
Tuesday, 01. 01 19 07:53
Traci Hibbins
aus Storebro tracihibbins@gmail.com    Website   

tadalafil y eyaculacion precoz
generic cialis online
tadalafil und rheuma
[url=http://www.cialisle.com/]buy cialis online[/url]

 
Tuesday, 18. 12 18 13:27
Blondell Beavis
aus Groningen blondellbeavis@gmail.com    Website   

does sildenafil work with beer
viagrabs.com
sildenafil and gtn
[url=http://viagrabs.com/]generic viagra[/url]

 
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