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:
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_link">Hauptüberschrift</span>
<span class="sdt_descr">Untertitel</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Test 1</a>
<a href="#">Test 2</a>
<a href="#">Test 3</a>
</div>
</li>
</ul>
/*--------------------------------------------------------------------------------
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);
});
});
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?
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.
lib.slideDownBoxMenu = HMENU
lib.slideDownBoxMenu {
wrap = <div id="slideDownBoxMenu">|</div>
entryLevel = {$plugin.tx_t3sslidedownboxmenu_pi1.entryLevel}
excludeUidList = {$plugin.tx_t3sslidedownboxmenu_pi1.excludeUidList}
1 = TMENU
1.expAll = 1
1.noBlur = 1
1.wrap = <ul id="sdt_menu" class="sdt_menu">|</ul>
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 = <li>|</li>
stdWrap.dataWrap = {register:page_media} <span class="sdt_active"> </span><span class="sdt_wrap"><span class="sdt_link">{register:page_title}</span><span class="sdt_descr">{register:page_subtitle}</span></span>
}
}
2 = TMENU
2.expAll = 1
2.noBlur = 1
2.wrap = <div class="sdt_box">|</div>
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
}
}
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!
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:
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.
super DANKE für die ganze Infos!
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:
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?
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:
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?
oooo... JA vielen dank jetzt klappt das auch mit dem menu#giggle#
Dann markier es bitte als gelöst;-)
nein leider noch nicht ganz.
es wird leider nicht das bild oben angezeigt nur die 2 kästen mit dem menü?
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?
ahaaa das mit den reources hab ich total vergessen:o danke
aber die überschriften werden nicht richtig dagestellt wo trage ich den untertitel ein?
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!
Aus dem Setup entfernen oder auskommentieren ?
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.
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.
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.