Hallo an alle!
Ist so etwas mit Typo3 möglich:
Ich möchte ein Menü erstellen ohne Preload. Dazu gibt es reichlich Infos im Netz. Bei diesen Anleitungen ist ein Hintergrundbild welches bei hover oder act 'verschoben' wird. Das ganze wird mit mit background-position definiert.
Jetzt mein Problem: das ganze funktioniert, solange ich bei allen Hintergrundbildern das selbe verwende. Ich möchte allerdings bei jedem Menüpunkt ein anderes Hintergrundbild verwenden. Mein Lösungsansatz wäre jetzt gewesen, dass jedem Menüpunkt eine eigene CSS-Klasse zugewiesen wird.
Dafür reicht allerdings mein Typo3-KnowHow nicht aus... :o
Hier meine Snippets:
temp.NAV_MAIN = HMENU
temp.NAV_MAIN {
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
ul#nav,
ul#nav ul {
margin: 0;
padding: 0;
width: 269px; /* Width of Menu Items */
/* border-bottom: 1px solid #ccc; */
background: #fff; /* IE6 Bug */
color: black;
font-size: 100%;
}
/*~~~~~1. Menüebene ohne Submenus ~~~~*/
ul#nav li {
position: relative;
list-style: none;
background-image:url(/uploads/tf/Menu_Aktuell.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #111;
padding: 11px 0px 8px 50px;
}
/*~~~~~1. Menüebene mit Submenus ~~~~*/
ul#nav li.menuparent {
background-image:url(/uploads/tf/Menu_Anfahrt.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul#nav li.menuparent:hover,
ul#nav li.over {
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
/*~~~~~~~~~ 2. Menüebene ~~~~~~~~~~*/
ul#nav ul {
position: absolute;
display: none;
left: 269px; /* Set 1px less than menu width */
width: 170px; /* Width of Menu Items */
top: 0;
}
/* Sub Menu Styles */
ul#nav li ul li a {
padding: 9px 10px;
background-image:url(/uploads/tf/div_lu.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
/* Hide sub-menus initially */
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul {
display: none;
}
/* The magic */
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul {
display: block;
}
/*~~~~~~~ Over der Ebene 1 und 2 ~~~~~~~~~~~*/
ul#nav li a:hover {
color: #004688;
background-image:url(/uploads/tf/Menu_Impressum.jpg);
background-repeat: no-repeat;
background-position: -269px 0px;
}