Suche
Teilen
startseite » forum

Menü mit Bildern und Untertitel

  • The_C The_C
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    05. 06. 2011, 17:55

    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:

    1. <ul id="sdt_menu" class="sdt_menu">
    2.    <li>
    3.       <a href="#">
    4.          <img src="images/1.jpg" alt=""/>
    5.            <span class="sdt_active"></span>
    6.            <span class="sdt_link">Hauptüberschrift</span>
    7.            <span class="sdt_descr">Untertitel</span>
    8.          </span>
    9.       </a>
    10.         <div class="sdt_box">
    11.           <a href="#">Test 1</a>
    12.           <a href="#">Test 2</a>
    13.           <a href="#">Test 3</a>
    14.         </div>
    15.    </li>
    16. </ul>

    1. /*--------------------------------------------------------------------------------
    2. Foto Menu
    3. --------------------------------------------------------------------------------*/
    4.  
    5. ul.sdt_menu{
    6. 	margin: 0px 0 0 0;
    7. 	padding: 0px;
    8. 	list-style: none;
    9. 	font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
    10. 	font-size: 14px;
    11. }
    12. ul.sdt_menu a{
    13. 	text-decoration: none;
    14. 	outline: none;
    15. }
    16. ul.sdt_menu li{
    17. 	float: left;
    18. 	width: 170px;
    19. 	height: 85px;
    20. 	position: relative;
    21. 	cursor: pointer;
    22. }
    23. ul.sdt_menu li > a{
    24. 	position: absolute;
    25. 	top: 0px;
    26. 	left: 0px;
    27. 	width: 170px;
    28. 	height: 85px;
    29. 	z-index: 12;
    30. 	background: transparent url(../images/overlay1.png) no-repeat bottom right;
    31.  
    32. }
    33. ul.sdt_menu li a img{
    34. 	border: none;
    35. 	position: absolute;
    36. 	width: 0px;
    37. 	height: 0px;
    38. 	bottom: 0px;
    39. 	left: 85px;
    40. 	z-index: 100;
    41.  
    42. }
    43. ul.sdt_menu li span.sdt_wrap{
    44. 	position: absolute;
    45. 	top: 25px;
    46. 	left: 0px;
    47. 	width: 170px;
    48. 	height: 60px;
    49. 	z-index: 15;
    50. }
    51. ul.sdt_menu li span.sdt_active{
    52. 	background-image: url(../images/aluminium_menu.jpg);
    53. 	background-repeat: no-repeat;
    54. 	position: absolute;
    55.  
    56. 	top: 85px;
    57. 	width: 170px;
    58. 	height: 0px;
    59. 	left: 0px;
    60. 	z-index: 14;
    61. }
    62. ul.sdt_menu li span span.sdt_link,
    63. ul.sdt_menu li span span.sdt_descr {
    64. 	margin-left: 15px;
    65. 	text-transform: uppercase;
    66. 	text-shadow: 1px 1px 1px #000;
    67. }
    68.  
    69. ul.sdt_menu li div.sdt_box a{
    70. 	margin-left: 15px;
    71. 	text-transform: normal;
    72. 	font-weight: bold;
    73. 	text-shadow: 1px 1px 1px #000;
    74. }
    75.  
    76. ul.sdt_menu li span span.sdt_link{
    77. 	color: #fff;
    78. 	font-size: 24px;
    79. 	float: left;
    80. 	clear: both;
    81. }
    82. ul.sdt_menu li span span.sdt_descr{
    83. 	color: #FFF;
    84. 	float: left;
    85. 	clear: both;
    86. 	width: 155px; /*für IE7*/
    87. 	font-size: 11px;
    88. 	letter-spacing: 1px;
    89. }
    90. ul.sdt_menu li div.sdt_box{
    91. 	background-image: url(../images/aluminium_menu_1.jpg);
    92. 	background-repeat: no-repeat;
    93. 	display: block;
    94. 	position: absolute;
    95. 	width: 170px;
    96. 	overflow: hidden;
    97. 	height: 170px;
    98. 	top: 85px;
    99. 	left: 0px;
    100. 	display: none;
    101.  
    102. }
    103. ul.sdt_menu li div.sdt_box a{
    104. 	float: left;
    105. 	clear: both;
    106. 	line-height: 20px;
    107. 	color: #fff;
    108. }
    109. ul.sdt_menu li div.sdt_box a:first-child{
    110. 	margin-top: 15px;
    111. }
    112. ul.sdt_menu li div.sdt_box a:hover{
    113. 	color: red;
    114. }

    1. $(function() {
    2. 				/**
    3. 				* for each menu element, on mouseenter, 
    4. 				* we enlarge the image, and show both sdt_active span and 
    5. 				* sdt_wrap span. If the element has a sub menu (sdt_box),
    6. 				* then we slide it - if the element is the last one in the menu
    7. 				* we slide it to the left, otherwise to the right
    8. 				*/
    9.                 $('#sdt_menu > li').bind('mouseenter',function(){
    10. 					var $elem = $(this);
    11. 					$elem.find('img')
    12. 						 .stop(true)
    13. 						 .animate({
    14. 							'width':'170px',
    15. 							'height':'170px',
    16. 							'left':'0px'
    17. 						 },400,'easeOutBack')
    18. 						 .andSelf()
    19. 						 .find('.sdt_wrap')
    20. 					     .stop(true)
    21. 						 .animate({'top':'140px'},500,'easeOutBack')
    22. 						 .andSelf()
    23. 						 .find('.sdt_active')
    24. 					     .stop(true)
    25. 						 .animate({'height':'170px'},300,function(){
    26. 						var $sub_menu = $elem.find('.sdt_box');
    27. 						if($sub_menu.length){
    28. 							var left = '170px';
    29. 							if($elem.parent().children().length == $elem.index()+1)
    30. 								left = '-170px';
    31. 							$sub_menu.show().animate({'left':left},200);
    32. 						}	
    33. 					});
    34. 				}).bind('mouseleave',function(){
    35. 					var $elem = $(this);
    36. 					var $sub_menu = $elem.find('.sdt_box');
    37. 					if($sub_menu.length)
    38. 						$sub_menu.hide().css('left','0px');
    39.  
    40. 					$elem.find('.sdt_active')
    41. 						 .stop(true)
    42. 						 .animate({'height':'0px'},300)
    43. 						 .andSelf().find('img')
    44. 						 .stop(true)
    45. 						 .animate({
    46. 							'width':'0px',
    47. 							'height':'0px',
    48. 							'left':'85px'},400)
    49. 						 .andSelf()
    50. 						 .find('.sdt_wrap')
    51. 						 .stop(true)
    52. 						 .animate({'top':'25px'},500);
    53. 				});
    54.             });

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 10:16

    Hi,

    meinst Du ein Menu wie hier:
    [url=]tympanus.net/Tutorials/SlideDownBoxMenu/[/url]

    Dafür gibt es eine Extension [b]t3s_slidedownboxmenu[/b]. Schaus Dir mal an.
    [url=]typo3.org/extensions/repository/?tx_terfe_pi1%5Bview%5D=search&no_cache=1&tx_terfe_pi1%5Bsword%5D=menu+css3[/url]

    Hilft es Dir weiter?

  • The_C The_C
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 11:04

    Hallo topshopper,
    [b]Danke[/b] das ist genau das Menü das ich umsetzen soll!
    Hast Du damit schon Erfahrung wie funktioniert das mit der Befüllung für Redakteure?

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 11:31

    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.

    1. lib.slideDownBoxMenu = HMENU
    2.  
    3. lib.slideDownBoxMenu {
    4.  
    5.   wrap = <div id="slideDownBoxMenu">|</div>
    6.  
    7.   entryLevel = {$plugin.tx_t3sslidedownboxmenu_pi1.entryLevel}
    8.  
    9.   excludeUidList = {$plugin.tx_t3sslidedownboxmenu_pi1.excludeUidList}
    10.  
    11.   1 = TMENU  
    12.  
    13.   1.expAll = 1
    14.  
    15.   1.noBlur = 1
    16.  
    17.   1.wrap = <ul id="sdt_menu" class="sdt_menu">|</ul>  
    18.  
    19.   1 {
    20.  
    21.     NO{
    22.  
    24.  
    26.  
    27.         page_subtitle.field = subtitle // abstract
    28.  
    29.         page_subtitle.ifEmpty = &nbsp;
    30.  
    31.         page_subtitle.dataWrap = |
    32.  
    33.         page_subtitle.insertData = 1
    34.  
    35.         page_title.field = title
    36.  
    37.         page_title.dataWrap = |
    38.  
    39.         page_title.insertData = 1
    40.  
    41.         page_media.cObject = IMAGE
    42.  
    43.         page_media.cObject.file {
    44.  
    45.           import = uploads/media/
    46.  
    47.           import.field = media
    48.  
    49.           import.listNum = {$plugin.tx_t3sslidedownboxmenu_pi1.listNum}
    50.  
    51.           width = 170c
    52.  
    53.           height = 170c
    54.  
    55.           quality = 85
    56.  
    57.         }     
    58.  
    59.       }
    60.  
    61.       wrapItemAndSub = <li>|</li>
    62.  
    63.       stdWrap.dataWrap = {register:page_media} <span class="sdt_active">&nbsp;</span><span class="sdt_wrap"><span class="sdt_link">{register:page_title}</span><span class="sdt_descr">{register:page_subtitle}</span></span>
    64.  
    65.     }
    66.  
    67.   }     
    68.  
    69.   2 = TMENU  
    70.  
    71.   2.expAll = 1
    72.  
    73.   2.noBlur = 1
    74.  
    75.   2.wrap = <div class="sdt_box">|</div>
    76.  
    77.   2{  
    78.  
    79.     NO{  
    80.  
    81.       wrapItemAndSub = | 
    82.  
    83. #      ATagTitle.field = subtitle // abstract
    84.  
    85.     }       
    86.  
    87.   }
    88.  
    90.  
    91. }
    92.  
    93.  
    94.  
    95. page.includeCSS.slidedownboxmenu = typo3conf/ext/t3s_slidedownboxmenu/res/boxmenu.css
    96.  
    97.  
    98.  
    99. page.includeJSlibs {
    100.  
    101. {$plugin.tx_t3sslidedownboxmenu_pi1.jquery}    jquery = https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js    
    102.  
    103. {$plugin.tx_t3sslidedownboxmenu_pi1.jquery}    jquery {
    104.  
    105. {$plugin.tx_t3sslidedownboxmenu_pi1.jquery}        type = text/javascript
    106.  
    107. {$plugin.tx_t3sslidedownboxmenu_pi1.jquery}        external = 1
    108.  
    109. {$plugin.tx_t3sslidedownboxmenu_pi1.jquery}        forceOnTop = 1
    110.  
    111. {$plugin.tx_t3sslidedownboxmenu_pi1.jquery}    }
    112.  
    113.  
    114.  
    115. {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing}    easing = typo3conf/ext/t3s_slidedownboxmenu/res/jquery.easing.1.3.js
    116.  
    117. {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing}    easing {
    118.  
    119. {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing}      type = text/javascript
    120.  
    121. {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing}      forceOnTop = 0
    122.  
    123. {$plugin.tx_t3sslidedownboxmenu_pi1.jqueryEasing}    }
    124.  
    125.  
    126.  
    127.     slidedownboxmenu = typo3conf/ext/t3s_slidedownboxmenu/res/slidedownboxmenu.js
    128.  
    129.     slidedownboxmenu {
    130.  
    131.       type = text/javascript
    132.  
    133.       forceOnTop = 0
    134.  
    135.     }
    136.  
    137. }

  • The_C The_C
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 12:01

    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!

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 12:18

    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:

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

  • The_C The_C
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 12:48

    super DANKE für die ganze Infos!

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 16:44

    Gerne, wenn´s hilft;-)

  • The_C The_C
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 16:51

    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:

    1. page = PAGE
    2. page {
    3.   typeNum = 0
    4.   10 = USER
    5.   10.userFunc = tx_templavoila_pi1->main_page
    6.   10.disableExplosivePreview = 1
    7.   config.index_enable = 1
    8.   lib.field_menu < lib.slideDownBoxMenu
    9.   {

    was mache ich da falsch?

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2011, 16:58

    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:

    1. page = PAGE
    2. page { # Klammer auf
    3.   typeNum = 0
    4.   10 = USER
    5.   10.userFunc = tx_templavoila_pi1->main_page
    6.   10.disableExplosivePreview = 1
    7.   config.index_enable = 1
    8. }# Klammer zu
    9.  
    10. # außerhalb der Klammer!
    11. lib.field_menu < lib.slideDownBoxMenu

    Klappts?

Präsentiert von