Grafisches Menü ohne JavaScript
Armin Bartsch, Mittwoch, 11. März 2009
Grafisches Menü das mit CSS funktioniert, keine JavaScript notwendig.
In der Regel wird das Grafische Menü mit dem cObject GMENU gebildet. Diese Menü benötigt für den hover-Effekt JavaScript. Das hier vorgestellte Grafische Menü benötigt kein JavaScript, da die Grafiken als Hintergrund mit Hilfe von CSS eingefügt und mittels hover gewechselt werden.
Da ich hier die Image Replacement-Techniken zum Einsatzkommen, ist diese Art Suchmaschinenfreundlich und Barrierearm. Lesen die dazu auch typo3.intervation.de/snippets/allgemein/grafische-ueberschrift.html.
Der Notwendige Quelltext sieht so aus:
<div id="grafik_menue_demo"> <li> <a href="intervation/intervation.html" id="mm_id7">Intervation
</a> </li> <li> <a href="tutorial.html" id="mm_id15">Tutorial
</a> </li> <li> <a href="snippets.html" id="mm_id9">Snippets
</a> </li> <li> <a href="extensionen.html" id="mm_id64">Extensionen
</a> </li> <li> <a href="nc/forum.html" id="mm_id188">Forum
</a> </li> </ul>
</div>
TypoScript
Das TypoScript teilt sich in drei Bereiche auf, die Grafik-Deklaration, die Menü-Deklaration und das Einfügen des CSS-Angaben in den header.
Grafik-Deklaration
Es wird die Generierung der Grafik (Größe, Schriftart -farbe und- größe, Grafiken) festgelegt). Der Inhalt wird später in die Menüerstellung kopiert. Benötigt wird der Pfad zur Grafik, da dieser für das CSS background-image benötigt wird.
temp.css_menue10 = IMG_RESOURCE
temp.css_menue10 {
file = GIFBUILDER
file {
#XY = [10.w]+[20.w]+23,[10.h]+10
XY = 200,25
backColor = #ffffff
10 = TEXT
10 {
text.field = subtitle//title
fontSize = 12
fontFile = fileadmin/yearsupplyoffairycakes.ttf
offset = 23,20
fontColor = #000000
#niceText = 1
}
}
stdWrap.wrap = { background-image: url(|); }
}
# Angabe für das hover
temp.css_menue20 < temp.css_menue10
temp.css_menue20 {
file {
backColor = #cccccc
}
}
Menü-Deklaration
Zur Menüerzeugung kommt hier TMENU zum Einsatz, die CSS Angaben werden in einer Variablen (LOAD_REGISTER) gespeichert.
lib.menue_grafik = HMENU
lib.menue_grafik {
wrap = <div id=grafik_menue_demo>|</div>
special = directory
special.value = 5
1 = TMENU
1.
stdWrap.
dataWrap = <ul> | </ul>
1 {
expAll = 1
NO {
doNotLinkIt = 1
linkWrap = <li> | </li>
stdWrap.cObject = COA
stdWrap.cObject {
10 = LOAD_REGISTER
10.css_menue.cObject < temp.css_menue10
10.css_menue_hover.cObject < temp.css_menue20
10.css_menue_ges.cObject = TEXT
10.css_menue_ges.cObject.dataWrap = #mm_id{field:uid} {register:css_menue} #mm_id{field:uid}:hover {register:css_menue_hover} {register:css_menue_ges}
20 = TEXT
20 {
field = subtitle//title
typolink {
parameter.field = uid
ATagParams.cObject = COA
ATagParams.cObject {
30 = TEXT
30.dataWrap = id="mm_id{field:uid}"
}
}
}
}
}
}
}
CSS-Angaben
Zum Schluss müssen noch die CSS-Angaben übergeben werden.
seite.headerData.300 = COA
seite.headerData.300 {
wrap = <style> | </style>
10 = TEXT
10.value (
#grafik_menue_demo ul, #grafik_menue_demo li {
margin: 0px;
padding: 0px;
list-style-type : none;
}
#grafik_menue_demo a {
text-indent: -999em;
color: #FFFFFF;
width:200px;
height:25px;
display:block;
}
)
20 = TEXT
20.dataWrap = {register:css_menue_ges}
}
