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 - 49 von 49.
 
Sunday, 26. 05 19 03:40
Mattie Saylor
aus Berg mattiesaylor@gmail.com    Website   

taking too many viagra www.vagragenericaar.org is it bad
for a 20 year old to use viagra.

 
Saturday, 25. 05 19 14:15
RannevFlede RannevFledeDD
aus http://viagraomz.com/ rannev561@canadaisonlineo.com    Website   

kosten pro dosis fr is

 
Saturday, 25. 05 19 05:01
rfvratte rfvratteOI
aus http://mylistonlinecasino.com/ emsgssfg94@gmx.com    Website   

[url=http://mylistonlinecasino.com/]online casino real money este enlace se abrira en una ventana nueva[/url] casino city bovada casino

 
Friday, 24. 05 19 20:39
vesEromO vesEromOYQ
aus http://gogionlinecasino.com/ rgjfvriel9ggdw8@gmx.com    Website   

[url=http://gogionlinecasino.com/]virgin casino online nj[/url] empire casino online online casino games este enlace se abrira en una ventana nueva

 
Friday, 24. 05 19 13:52
frcScOsy frcScOsyND
aus http://userlistcasinoonline.com/ cannafegaf96@gmx.com    Website   

[url=http://userlistcasinoonline.com/]online roulette kostenlos ohne anmeldung[/url] online casino my jackpot resorts casino online's homepage

 
Friday, 24. 05 19 05:15
bsebeeri bsebeeriDL
aus http://playlistredcasino.com/ ujsdbbhdfgwsgolt@gmx.com    Website   

[url=http://playlistredcasino.com/]gambling games[/url] rivers casino pechanga casino

 
Thursday, 23. 05 19 03:53
vrfIsove vrfIsoveTK
aus http://casinoslotsgambling24.com/ wfef23ysafgdfce@gmx.com    Website   

[url=http://casinoslotsgambling24.com/]slots free rwa99[/url] free games for casino slots atari jac free online slots games

 
Wednesday, 22. 05 19 23:06
SlavaBiryukova92Flede SlavaBiryukova92FledeDY
aus http://cialisooiqw.com/ SlavaBiryukova92@mail.ru    Website   

5558 cialis tablet price uk

[url=http://cialisooiqw.com/]online cialis[/url]
buy cialis online

generic cialis tadalafil nz

 
Wednesday, 22. 05 19 18:26
olqGoxia olqGoxiaPQ
aus http://us24casinoonline.com/ ilbsgsoafdjgy1@gmx.com    Website   

[url=http://us24casinoonline.com/]on line casino slots[/url] free slots games slot machine games

 
Wednesday, 22. 05 19 18:05
fwsseddy fwsseddyQR
aus http://24casinousaonline.com/ bishgszvd1fzzgn90@gmx.com    Website   

[url=http://24casinousaonline.com/]on line casino slots[/url] gambling online best online casinos

 
Wednesday, 22. 05 19 17:24
hwsEromO hwsEromOWZ
aus http://onlinecasino365list.com/ rgjfvriel9gw8@gmx.com    Website   

[url=http://onlinecasino365list.com/]codeshareonline doubledown casino[/url] tropicana online casino big fish casino potawatomi casino

 
Wednesday, 22. 05 19 15:37
nppratte npprattePH
aus http://usaonline-casino.us.org/ emsgnthgppsfg94@gmx.com    Website   

[url=http://usaonline-casino.us.org/]parx online casino[/url] betfair casino online nj casino online

 
Wednesday, 22. 05 19 10:12
gtdScOsy gtdScOsyZU
aus http://casino-online.us.org/ cannafaf96@gmx.com    Website   

[url=http://casino-online.us.org/]online slots no deposit usa[/url] online casino g casino slots

 
Wednesday, 22. 05 19 08:22
hvrQuaks hvrQuaksXV
aus http://bestcasino365us.com/ ilghoadf9sg1@gmx.com    Website   

[url=http://bestcasino365us.com/]play casinos's homepage[/url] play free vegas casino games casino games for free

 
Wednesday, 22. 05 19 02:39
walmartj1v walmartx7yUT
aus http://www.withoutadrprescription.com fpkmyi@freemail.best    Website   

Nutrition and natural interest are prominent parts [url=http://viagrawithoutadoctornote.com]viagra without doctors prescription[/url] of a healthy lifestyle when you have diabetes. Along with other benefits, following a hale and hearty nourishment system and being potent can help you store your blood glucose level, also called blood sugar, in your quarry range. To survive your blood glucose, you neediness to make up for what you take in nourishment and drink with concrete labour and diabetes physic, http://withoutadrprescription.com viagra without a doctor prescription if you crook any. What you judge to pack away, how much you break bread, and when you nosh are all significant in keeping your blood glucose sincere in the range that your health dolour span recommends. Eating well and being physically vigorous most days of the week can help you.
1991 - 2019 Copyright by [url=http://astra.dn.ua/out.php?link=http://withoutadoctorprescription.net]no prescription viagra online[/url] Discuz

 
Wednesday, 22. 05 19 01:39
plrbeeri plrbeeriNV
aus http://7realonlinecasinos.com/ ujsdbbhdfsgolt@gmx.com    Website   

[url=http://7realonlinecasinos.com/]big fish casino[/url] usa casino online real money betfair online casino

 
Tuesday, 21. 05 19 22:44
tvrduend tvrduendLC
aus http://casinoslots.us.org/ walkdhmgsf1993@gmx.com    Website   

[url=http://casinoslots.us.org/]casino games[/url] newest usa online casinos casino slots free

 
Monday, 20. 05 19 23:12
gbrIsove gbrIsoveJW
aus http://viagravkash.com/ wfef23ysgdfce@gmx.com    Website   

[url=http://viagravkash.com]can you buy viagra online[/url] viagra pill where to buy viagra cheap

 
Monday, 20. 05 19 19:30
bwsginny bwsginnyJF
aus http://viagraoahvfn.com/ kyliepadsdfa99x3@gmx.com    Website   

[url=http://viagraoahvfn.com]free generic viagra samples[/url] order viagra chewable generic viagra

 
Monday, 20. 05 19 17:51
LyudvigPanov1994Flede LyudvigPanov1994FledeDY
aus http://ph-3fab5-4-0.com/ LyudvigPanov1994@mail.ru    Website   

a3cb viagra preis preisvergleich

[url=http://ph-3fab5-2-0.com/]viagra sicher online kaufen[/url]


where to buy viagra in praha

 
Monday, 20. 05 19 13:05
kunEromO kunEromOXX
aus http://movietrailershd.org/ rgjfvriel98@gmx.com    Website   

[url=http://movietrailershd.org]buy generic viagra online safely[/url] cheap viagra 100mg online generic viagra reviews

 
Monday, 20. 05 19 10:52
bygratte bygratteVR
aus http://almeidacorp.com/ emsgnthgsfg94@gmx.com    Website   

[url=http://almeidacorp.com]where to buy generic viagra[/url] what is viagra viagra generic cheap

 
Monday, 20. 05 19 04:08
bblQuaks bblQuaksPQ
aus http://canadiannowv.com/ ilghoadf91@gmx.com    Website   

http://canadiannowv.com - canadian pharmacy reviews discount viagra canadian pharmacy

 
Sunday, 19. 05 19 21:36
zwebeeri zwebeeriCI
aus http://susamsokagim.com/ josepsdsdbbhdfsgolt@gmx.com    Website   

http://susamsokagim.com - cvs pharmacy generic viagra online order viagra is there such a thing as generic viagra

 
Saturday, 18. 05 19 15:50
vfvNed vfvNedVC
aus http://onlineviagenfox.com/ adv42vsfrhiali@gmx.com    Website   

http://onlineviagenfox.com - buying viagra online without a prescription non prescription viagra viagra online no prior prescription canada

 
Saturday, 18. 05 19 14:49
bydfraks bydfraksAV
aus http://buyviagricxr.com/index.html danregssfgvi99@gmx.com    Website   

http://buyviagricxr.com/index.html - buy viagra online cheap canada how to get viagra best place to buy generic viagra online

 
Saturday, 18. 05 19 06:24
gwhIsove gwhIsoveSD
aus http://gogogeneric.com/ wfef23yce@gmx.com    Website   

http://gogogeneric.com/ - viagra generic us cialis pill viagra generic review

 
Saturday, 18. 05 19 02:38
vdsginny vdsginnyEK
aus http://cheapgogenvia.com/ kyliepadsd99x3@gmx.com    Website   

http://cheapgogenvia.com - cheap viagra 200mg online pharmacy viagra cheap viagra paypal

 
Friday, 17. 05 19 17:39
edmens3d edmens2lJN
aus http://canadianonlinepharmacy.us.com cvdpqu@jojamail.com    Website   

The slew of people with diabetes has around quadrupled since 1975. Sway is increasing worldwide, especially in low- and middle-income countries sildenafil citrate 100mg. The causes are complex, but the start is due in constituent to increases in the number of people who are overweight, including an lengthen in obesity, and in a widespread deficiency of natural activity. In April 2015, WHO published http://sildenafll.com sildenafil the Universal report on diabetes, which calls for vigour to belittle aspect to the known chance factors with a view ilk 2 diabetes and to on life access to and nobility of care as a remedy for people with all forms of http://f.praschnig.com/redir/218?f=1&url=http://levitracoupon.us.com/ sildenafil diabetes.

 
Friday, 17. 05 19 13:28
bffGoxia bffGoxiaLX
aus http://cheapviagrafasg.com/ nunezcjhbsoafdjgy1@gmx.com    Website   

http://cheapviagrafasg.com/ - buy viagra online canadian viagra on line where to buy viagra without prescription

 
Friday, 17. 05 19 13:08
vvnseddy vvnseddyGO
aus http://onlineviagrayvrj.com/ bishgs1fsgs9gn90@gmx.com    Website   

http://onlineviagrayvrj.com/ - buy cheap viagra online generic viagra online where to buy viagra cheap

 
Friday, 17. 05 19 12:17
vvvEromO vvvEromOAK
aus http://buyviagrawww.com/ rossgslodvriel98@gmx.com    Website   

http://buyviagrawww.com/ - what does a generic viagra pill look like canadian pharmacy viagra mexican generic viagra

 
Friday, 17. 05 19 05:19
awsScOsy awsScOsyPL
aus http://www.hitcialisosn.com/ cannogdajaf96@gmx.com    Website   

http://www.hitcialisosn.com/ - cheapest place to buy cialis online cialis tadalafil where to buy cialis in canada

 
Friday, 17. 05 19 00:44
vnuduend vnuduendPE
aus http://buyviagenonline.com/ walkdhmyrtilehdy1993@gmx.com    Website   

http://buyviagenonline.com - where can i buy viagra online buy viagra online buy viagra online usa

 
Thursday, 16. 05 19 20:26
dsdbeeri dsdbeeriPX
aus http://viagrageneric7k.com/ josepsdsdbbhsgolt@gmx.com    Website   

http://viagrageneric7k.com/ - when can i buy generic viagra order viagra generic viagra name

 
Wednesday, 01. 05 19 17:35
zavamed8x zavamed2kQY
aus http://zavamedusa.com gzf80a@joomlacss.com    Website   

Diabetes is a sickness in which your body either can't reveal jay leno viagra http://zavamedusa.com generic viagra 100mg insulin or can't suitably use the insulin it produces. Insulin is a hormone produced before your pancreas. Insulin's impersonation is to balance the amount of glucose (sugar) in the blood. Blood sugar forced to be carefully regulated to effect that the fullness functions properly. Too much blood sugar can originator damage to organs, meglio cialis o levitra http://www.zavamedusa.com viagra pills blood vessels, and nerves. Your main part also needs insulin in commitment to use sugar in place of energy.
1998 - 2019 Powered past buy viagra SMF

 
Thursday, 25. 04 19 04:20
Brianne Edelson
aus Storvreta brianneedelson@web.de    Website   

[url=http://cialsagen.com/]cialsagen.com[/url]

 
Friday, 19. 04 19 06:04
Keith Verge
aus Leslie Manor keithverge@vegemail.com    Website   

berapa harga obat kuat sildenafil http://triviagra.com/ movie about selling sildenafil triviagra.com taking advil with viagra

 
Sunday, 24. 03 19 23:24
Rosalyn Causey
aus Scranton rosalyncausey@bigstring.com    Website   

[url=http://cialsonlinebei.com]cialis online prescription[/url]
http://cialsonlinebei.com cialis cost

 
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