Menü mit Bildern und Untertitel: Seite 2

The_C · 2011-06-05T15:55:37+00:00

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: Hauptüberschrift Untertitel Test 1 Test 2 Test 3 /*-------------------------------------------------------------------------------- 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; } $(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); }); });

The_C · 6. Juni 2011 19:54

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.

The_C · 6. Juni 2011 21:38

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.

wave · 14. März 2012 16:48

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 http://www.wagyuverein.at/index.php?id=286 könnt ihr euch gerne anschauen was ich meine

Vielen Dank für eure Verbesserungsvorschläge.

The_C · 14. März 2012 17:07

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.

wave · 14. März 2012 17:17

oft sieht man den Wald vor lauter Bäumen kaum 🙂 besten Dank

The_C · 14. März 2012 17:20

geht mir auch oft so #giggle#

Fischwerker · 14. Juni 2012 12:52

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 selbst.

The_C · 14. Juni 2012 13:04

Mit t3query 🙂
http://typo3.org/extensions/repository/view/t3jquery

Fischwerker · 14. Juni 2012 14:07

Danke für die blitz-schnelle Antwort. 🙂

t3jquery habe ich bereits installiert.

Muss man vielleicht dort irgendeine Einstellung vornehmen?

The_C · 16. Juni 2012 14:00

Ist nicht so schweer...
Bishen die Docu lesen anklicken was Du benötigst und eine Bibliothek erstellen, FERTIG.