--- title: "Menü mit Bildern und Untertitel" url: "https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel" source: "typo3.net" tags: ["TYPO3","Menüs","Frage","JavaScript & AJAX"] created: "2011-06-05" last_reply: "2012-06-16" replies: 26 solved: false page: 1 pages: 1 lang: "de" --- # Menü mit Bildern und Untertitel TYPO3 › Menüs · 26 Antworten · gestartet 2011-06-05 ## Eröffnungsbeitrag **The_C** · 2011-06-05 · [Beitrag #1](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/1) Hallo, habe hier eine wirklich tolles Javascript Menü leider weis ich nicht wie ich das mit Typoscript und Templa umsetze. In dem Menü ist eine Hauptüberschrift mit einem Untertitel wenn man darüberfährt kommt auch noch ein Bild zu vorschein, dieses rückt die Hauptüberschrift mit Untertitel nach unten und zugleich öffnet sich die eigentliche Navigation. Wer weis wie so etwas mit Typoscript in kombination mit Templa funktioniert? DANKE schon mal jetzt für Eure Antworten Hier noch das html css und javascript: ```html ``` ```css /*-------------------------------------------------------------------------------- Foto Menu --------------------------------------------------------------------------------*/ ul.sdt_menu{ margin: 0px 0 0 0; padding: 0px; list-style: none; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; font-size: 14px; } ul.sdt_menu a{ text-decoration: none; outline: none; } ul.sdt_menu li{ float: left; width: 170px; height: 85px; position: relative; cursor: pointer; } ul.sdt_menu li > a{ position: absolute; top: 0px; left: 0px; width: 170px; height: 85px; z-index: 12; background: transparent url(../images/overlay1.png) no-repeat bottom right; } ul.sdt_menu li a img{ border: none; position: absolute; width: 0px; height: 0px; bottom: 0px; left: 85px; z-index: 100; } ul.sdt_menu li span.sdt_wrap{ position: absolute; top: 25px; left: 0px; width: 170px; height: 60px; z-index: 15; } ul.sdt_menu li span.sdt_active{ background-image: url(../images/aluminium_menu.jpg); background-repeat: no-repeat; position: absolute; top: 85px; width: 170px; height: 0px; left: 0px; z-index: 14; } ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr { margin-left: 15px; text-transform: uppercase; text-shadow: 1px 1px 1px #000; } ul.sdt_menu li div.sdt_box a{ margin-left: 15px; text-transform: normal; font-weight: bold; text-shadow: 1px 1px 1px #000; } ul.sdt_menu li span span.sdt_link{ color: #fff; font-size: 24px; float: left; clear: both; } ul.sdt_menu li span span.sdt_descr{ color: #FFF; float: left; clear: both; width: 155px; /*für IE7*/ font-size: 11px; letter-spacing: 1px; } ul.sdt_menu li div.sdt_box{ background-image: url(../images/aluminium_menu_1.jpg); background-repeat: no-repeat; display: block; position: absolute; width: 170px; overflow: hidden; height: 170px; top: 85px; left: 0px; display: none; } ul.sdt_menu li div.sdt_box a{ float: left; clear: both; line-height: 20px; color: #fff; } ul.sdt_menu li div.sdt_box a:first-child{ margin-top: 15px; } ul.sdt_menu li div.sdt_box a:hover{ color: red; } ``` ```javascript $(function() { /** * for each menu element, on mouseenter, * we enlarge the image, and show both sdt_active span and * sdt_wrap span. If the element has a sub menu (sdt_box), * then we slide it - if the element is the last one in the menu * we slide it to the left, otherwise to the right */ $('#sdt_menu > li').bind('mouseenter',function(){ var $elem = $(this); $elem.find('img') .stop(true) .animate({ 'width':'170px', 'height':'170px', 'left':'0px' },400,'easeOutBack') .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'140px'},500,'easeOutBack') .andSelf() .find('.sdt_active') .stop(true) .animate({'height':'170px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '170px'; if($elem.parent().children().length == $elem.index()+1) left = '-170px'; $sub_menu.show().animate({'left':left},200); } }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length) $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active') .stop(true) .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({ 'width':'0px', 'height':'0px', 'left':'85px'},400) .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500); }); }); ``` ## Antworten ### [#2](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/2) · topshopper · 2011-06-06 Hi, meinst Du ein Menu wie hier: Dafür gibt es eine Extension **t3s_slidedownboxmenu**. Schaus Dir mal an. Hilft es Dir weiter? ### [#3](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/3) · The_C · 2011-06-06 Hallo topshopper, **Danke** das ist genau das Menü das ich umsetzen soll! Hast Du damit schon Erfahrung wie funktioniert das mit der Befüllung für Redakteure? ### [#4](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/4) · topshopper · 2011-06-06 Hi, ich hatte das mal installiert. Soweit ich mich erinnere, erstellt es das Menu automatisch für die 1. und 2. Eebene. Die Daten für die Überschrift und Untertitel holt er sich von em Seitentitel und Subtitle/Absctract der jeweiligen Seite. Das Bild holt er sich von dem hinterlegten Bild aus den Seiteneigenschaften. Über die Flexform kann man die Einstellungen der Extension kaum anpassen, da es wohl erst die Version 0.0.1 ist. Nur entryLevel und excludeUidList für auszuschließende Seiten. Wenn Du Änderungen wie zB. die Größe der Bilder etc. haben willst, dann muss Du das Setup ändern. Da siehst Du auch, wie sich das Menu mit Typoscript als HMNEU + TMENU aufbaut. Anpassungen im CSS sind dann auch nötig. Am Besten, Du installiert es mal und probierst es aus. Es ist schon eine Weile her, als ich es getestet habe. ```typoscript lib.slideDownBoxMenu = HMENU lib.slideDownBoxMenu { wrap =
|
entryLevel = {$plugin.tx_t3sslidedownboxmenu_pi1.entryLevel} excludeUidList = {$plugin.tx_t3sslidedownboxmenu_pi1.excludeUidList} 1 = TMENU 1.expAll = 1 1.noBlur = 1 1.wrap = 1 { NO{ stdWrap.cObject = LOAD_REGISTER stdWrap.cObject { page_subtitle.field = subtitle // abstract page_subtitle.ifEmpty =   page_subtitle.dataWrap = | page_subtitle.insertData = 1 page_title.field = title page_title.dataWrap = | page_title.insertData = 1 page_media.cObject = IMAGE page_media.cObject.file { import = uploads/media/ import.field = media import.listNum = {$plugin.tx_t3sslidedownboxmenu_pi1.listNum} width = 170c height = 170c quality = 85 } } wrapItemAndSub =
  • |
    • stdWrap.dataWrap = {register:page_media}  {register:page_title}{register:page_subtitle} } } 2 = TMENU 2.expAll = 1 2.noBlur = 1 2.wrap =
    |
    2{ NO{ wrapItemAndSub = | # ATagTitle.field = subtitle // abstract } } 99 = RESTORE_REGISTER } page.includeCSS.slidedownboxmenu = typo3conf/ext/t3s_slidedownboxmenu/res/boxmenu.css page.includeJSlibs { {$plugin.tx_t3sslidedownboxmenu_pi1.jquery} jquery = https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js {$plugin.tx_t3sslidedownboxmenu_pi1.jquery} jquery { {$plugin.tx_t3sslidedownboxmenu_pi1.jquery} type = text/javascript {$plugin.tx_t3sslidedownboxmenu_pi1.jquery} external = 1 {$plugin.tx_t3sslidedownboxmenu_pi1.jquery} forceOnTop = 1 {$plugin.tx_t3sslidedownboxmenu_pi1.jquery} } {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing} easing = typo3conf/ext/t3s_slidedownboxmenu/res/jquery.easing.1.3.js {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing} easing { {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing} type = text/javascript {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing} forceOnTop = 0 {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing} } slidedownboxmenu = typo3conf/ext/t3s_slidedownboxmenu/res/slidedownboxmenu.js slidedownboxmenu { type = text/javascript forceOnTop = 0 } } ``` ### [#5](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/5) · The_C · 2011-06-06 Hi, Ich werde das mal Testen und hoffe das es auch bei mir mit meinen kenntnissen funktioniert#paralyzed#. Das TS schaut sehr kompliziert aus, erstellt das die Ext selber oder soll ich das auch noch eintragen? Ich habe das css etwas geändert und eine eigene js benützt die ich im head eingetragen habe soll ich da was bei der Ext im TS auskomentieren? Danke für Deine Geduld! ### [#6](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/6) · topshopper · 2011-06-06 Hi, das TS erstellt dir das HTML-Gerüst mit den entsprechenden ul-,li-,img- und span-tags für die 1.+2. Ebene. Das funktioniert out-of-the-box. Du musst es nur ändern, wenn Du es individuell anpassen willst. Was das CSS angeht: Ich würde mir eine Kopie des CSS machen und dort die Änderungen vornehmen. Dann änderst Du im Setup einfach den Pfad zu CSS. Also beispielsweise: ```typoscript page.includeCSS.slidedownboxmenu = fileadmin/css/res/boxmenu.css ``` Zu den JS-Änderungen kann ich nichts sagen, da ich nicht weiß, was Du geändert hast. Außerdem bin ich nicht fit in JS. ### [#7](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/7) · The_C · 2011-06-06 super DANKE für die ganze Infos! ### [#8](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/8) · topshopper · 2011-06-06 Gerne, wenn´s hilft;-) ### [#9](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/9) · The_C · 2011-06-06 so... nun habe ich das probiert leider wird das menu nicht sichtbar? habe es auf lib.field_menu mit TypoScript Object Path gemappt und auch das plugin eingebunden das hier in das ts eingetragen: ```typoscript page = PAGE page { typeNum = 0 10 = USER 10.userFunc = tx_templavoila_pi1->main_page 10.disableExplosivePreview = 1 config.index_enable = 1 lib.field_menu < lib.slideDownBoxMenu { ``` was mache ich da falsch? ### [#10](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/10) · topshopper · 2011-06-06 Hi, mir fällt auf: 1. lib.field_menu < lib.slideDownBoxMenu sollte außerhalb der Klammer stehen, da es kein Page-object ist. 2. Die letzte Klammer sollte "zugehen", nicht nochmals "auf". Probiers mal so: ```typoscript page = PAGE page { # Klammer auf typeNum = 0 10 = USER 10.userFunc = tx_templavoila_pi1->main_page 10.disableExplosivePreview = 1 config.index_enable = 1 }# Klammer zu # außerhalb der Klammer! lib.field_menu < lib.slideDownBoxMenu ``` Klappts? ### [#11](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/11) · The_C · 2011-06-06 oooo... JA vielen dank jetzt klappt das auch mit dem menu#giggle# ### [#12](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/12) · topshopper · 2011-06-06 Dann markier es bitte als gelöst;-) ### [#13](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/13) · The_C · 2011-06-06 nein leider noch nicht ganz. es wird leider nicht das bild oben angezeigt nur die 2 kästen mit dem menü? ### [#14](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/14) · topshopper · 2011-06-06 Hast Du in den Seiteneigenschaften im Reiter Resources jeweils ein Bild hochgeladen? Hast Du das mitgelieferte Setup und damit die Erstellung des HTMLs geändert? Wie sieht der erzeugte Quellcode aus? ### [#15](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/15) · The_C · 2011-06-06 ahaaa das mit den reources hab ich total vergessen:o danke aber die überschriften werden nicht richtig dagestellt wo trage ich den untertitel ein? ### [#16](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/16) · The_C · 2011-06-06 habs schon beim untertitel natürlich #giggle# wenn du mir jetzt noch sagen kannst wie ich die ext interne js und css ausschalte bin ich der glücklichste mensch! ### [#17](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/17) · topshopper · 2011-06-06 Aus dem Setup entfernen oder auskommentieren ? ### [#18](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/18) · The_C · 2011-06-06 ich meine den aus der ext der funkt mir immer noch drein das css und die js scripts. ich habe das ja schon im head von templa eingebaut. ### [#19](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/19) · The_C · 2011-06-06 vielen lieben dank für alle infos! ich habe es endlich geschafft, das menu sieht so aus wie ich es haben will. habe die css in der ext überschrieben ist zwar nicht der beste weg aber es funktioniert. ### [#20](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/20) · wave · 2012-03-14 Schönen Guten Tag an alle :) Gestern habe ich die t3s_slidedownboxmenu installiert, und es funktioniert auch einigermaßen: mein Problem lautet wie folgt: Ich kann auf meine Subpages die bei Menupunkten über col3 (also mein Haupttext - verwende Templavoila) nicht klicken.. wenn ich zu einem Menupunkt gehe der über einer anderen Spalte liegt, kann ich die Submenupunkte ohne Probleme anklicken. unter könnt ihr euch gerne anschauen was ich meine Vielen Dank für eure Verbesserungsvorschläge. ### [#21](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/21) · The_C · 2012-03-14 Hallo, mach bei deinem css ul.sdt_menu li div.sdt_box einen z-index von z.b. 100 rein und es wird funktionieren ;) Hoffe ich konnte Helfen. ### [#22](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/22) · wave · 2012-03-14 oft sieht man den Wald vor lauter Bäumen kaum :) besten Dank ### [#23](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/23) · The_C · 2012-03-14 geht mir auch oft so #giggle# ### [#24](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/24) · Fischwerker · 2012-06-14 Hi, Leute! ich schlage mich gerade auch mit SlideDownBoxMenu rum. Muss jetzt allerdings etwas tiefer graben. Mein Problem ist, dass diese Extension von Helmut Hackbarth sich mit powermail nicht verträgt. Auf den Seiten, wo powermail-Formulare vorkommen, funktioniert weder Menü noch Formular richtig. Da scheint es irgendein JavaScript-Konflikt zu sein. Wie kann ich die beiden verheiraten, sodass sie glücklich zusammen leben? Mein Halbwissen reicht leider nicht aus.#paralyzed# Sieht auf dem [Testserver](http://web.hagenah.internetshop.cc/belegte-broetchen-bestellen.0.html) selbst. ### [#25](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/25) · The_C · 2012-06-14 Mit t3query :) ### [#26](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/26) · Fischwerker · 2012-06-14 Danke für die blitz-schnelle Antwort. :) t3jquery habe ich bereits installiert. Muss man vielleicht dort irgendeine Einstellung vornehmen? ### [#27](https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel/27) · The_C · 2012-06-16 Ist nicht so schweer... Bishen die Docu lesen anklicken was Du benötigst und eine Bibliothek erstellen, FERTIG. --- Quelle: „Menü mit Bildern und Untertitel“, typo3.net, https://www.typo3.net/d/105724-menue-mit-bildern-und-untertitel Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.