TYPO3 Extension Tutorials Dokumentation von T3NET

TYPO3 Extension Tutorials das TYPO3 Extension Kurzanleitung Dokumentation von T3NET

Referenzen Image
Sie befinden sich hier : 
Dokumentation / Extension Tutorials / UDM Layer-Menü / Tutorial

Accessible Website Menu

Generelles:

UDM Dokumentation auf der Website des Autors in englischer Sprache.
Ein weiteres Tutorial zu diesem Thema finden Sie bei den CSS-Tutorials.de.
Wenn Sie sich für reine CSS-Menüs ohne JavaScript interessieren, lesen Sie diesen Thread im Forum von TYPO3.net.

Aus lizenzrechtlichen Gründen können die Skripte nicht der Download-Version des TYPO3 Templates beigelegt werden. Auch die relevanten Seiten sind in der t3d Datei nicht enthalten. Sie können sich die Skripte aber selbst herunterladen und dieses Tutorial anwenden.

Skripte herunterladen

Laden Sie das Paket von der Website des Autors herunter und entpacken Sie das ZIP-Archiv auf Ihrer Festplatte. Alle dort angebotenen Pakete sind identisch, sie unterscheiden sich lediglich durch die Lizenzbedingungen. Wählen Sie die für Sie günstigste Lizenz und beachten Sie die Bedingungen.

Nach dem Entpacken finden Sie eine Verzeichnisstruktur vor, wie unten abgebildet. Das einzige was wir für dieses Tutorial benötigen, sind die Dateien im Verzeichnis udm4/udm-resources. Laden Sie diese Dateien auf Ihren Webserver hoch und zwar in das Verzeichnis fileadmin/udm. Sie können ein anderes Verzeichnis wählen, müssen dann aber die Pfade, die in diesem Tutorial verwendet werden, anpassen.

Verzeichnisstruktur

Extension Template

Das Original YAML Template mit den Sliding-Door-Buttons als Menü wollte ich nicht verändern, weil es keinen Sinn macht, daß in der Typo3 Version plötzlich ein komplett anderes Menü enthalten ist als im Original.

Deshalb erstellen wir auf der Seite, auf der das UDM 4 Menü erscheinen soll, ein Extension-Template und behalten das Original-Menü auf den restlichen Seiten bei. Das Extension-Template wird automatisch an alle darunterliegenden Seiten vererbt.

Wichtig: Das Sliding-Door Menü (wird im Original-YAML verwendet) befindet sich im DIV-Container nav_main. Dieser stellt für das Sliding-Door-Menü wichtige Eigenschaften bereit, die für das UDM-Menü aber nicht gebraucht werden. Deshalb habe ich einen neuen Container nav_mainUDM verwendet (Zeile 5 und 6). Sie müssen also entweder die HTML-Vorlage layout_2col_left_vlines.html ändern oder sie kopieren und unter dem Namen layout_2col_left_vlinesUDM.html im Verzeichnis fileadmin/template speichern (empfohlen). Danach können Sie die Vorlage im Template-Selector auswählen.

  1. #############################
  2. # subpart temp.nav_mainUDM
  3. #############################
  4. #
  5. temp.nav_mainUDM = HMENU
  6. temp.nav_mainUDM {
  7.   entryLevel = 0
  8.   excludeUidList = 30,26,34,21,10
  9.   wrap = <ul id="udm" class="udm"><li><a href="http://yaml.t3net.de/" target="_self"">Home</a></li>|</ul>
  10.   1 = TMENU
  11.   1 {
  12.     expAll = 1
  13.     noBlur = 1
  14.     wrap = |
  15.     NO = 1
  16.     NO.ATagTitle.field = abstract // description // subtitle
  17.     NO.wrapItemAndSub = <li>|</li>
  18.     NO.stdWrap.htmlSpecialChars = 1
  19.   }
  20.   2 < .1
  21.   2.wrap = <ul>|</ul>
  22.   3 < .1
  23.   3.wrap = <ul>|</ul>
  24.   4 < .1
  25.   4.wrap = <ul>|</ul>
  26. }
  27. #############################
  28. # Temp-Objekt in subpart kopieren
  29. #############################
  30. temp.mainTemplate.subparts.nav_mainUDM < temp.nav_mainUDM
  31. #############################
  32. # Erforderliche Skripte in HEADER schreiben
  33. #############################
  34. page.headerData.5 = HTML
  35. page.headerData.5.value (
  36. <script type="text/javascript" src="fileadmin/udm/udm-custom.js"></script>
  37. <script type="text/javascript" src="fileadmin/udm/udm-control.js"></script>
  38. <script type="text/javascript" src="fileadmin/udm/udm-style.js"></script>
  39. )
  40. #############################
  41. # Erforderliche Skripte in BODY schreiben
  42. #############################
  43. page.5 = HTML
  44. page.5.value = <script type="text/javascript" src="fileadmin/udm/udm-dom.js"></script>
  45. page.6 = HTML
  46. page.6.value = <script type="text/javascript" src="fileadmin/udm/udm-mod-keyboard.js"></script>
  47. page.7 = HTML
  48. page.7.value = <script type="text/javascript" src="fileadmin/udm/udm-x-sliding.js"></script>
  49. #############################
  50. # Template in Seite kopieren
  51. #############################
  52. page.10 >
  53. page.10 < temp.mainTemplate
Datei herunterladen:uploads/tx_jphcodesnippets/extUDM.txt

JavaScript anpassen

Wenn Sie möchten, daß das Menü so aussieht, wie auf dieser Seite, dann übernehmen Sie das untenstehende Skript. Sie müssen auf jeden Fall den Pfad anpassen (Zeile 20). Jede der Optionen ist in der Datei dokumentiert und sollte selbsterklärend sein. Im Zweifelsfall einfach ausprobieren und sehen was passiert. Diese Datei ist die zentrale Konfigurationsdatei, an den anderen müssen Sie nichts ändern.

  1. // UDMv4.5 //
  2. /***************************************************************/
  3. var um={'menuClasses':[],'itemClasses':[],'menuCode':[]};
  4. /***************************************************************\
  6.   ULTIMATE DROP DOWN MENU Version 4.5 by Brothercake
  7.   http://www.udm4.com/
  8.  
  9.   This script may not be used or distributed without license
  11. \***************************************************************/
  12.  
  13.  
  14. /***************************************************************\
  15. * CORE CONFIGURATION
  16. \***************************************************************/
  17.  
  18.  
  19. //path to images folder
  20. um.baseSRC = "fileadmin/udm/";
  21.  
  22.  
  23. //initialization trigger element ["id"];
  24. um.trigger = "Impressum";
  25.  
  26.  
  27. //navbar orientation
  28. um.orientation = [
  29.   "horizontal", // alignment ["vertical"|"horizontal"|"popup"|"expanding"]
  30.   "left",  // h align ["left"|"right"|"rtl"]
  31.   "top",    // v align ["top"|"bottom"]
  32.   "relative", // positioning ["relative"|"absolute"|"fixed"|"allfixed"]
  33.   "50px", // x position ["em"|"ex"|"px"|"0"]
  34.   "0",  // y position ["em"|"ex"|"px"|"0"]
  35.   "1000",  // z order ["0" to "10000"] (menu takes 20000 headroom)
  36.   ];
  37.  
  38.  
  39. //navbar list output
  40. um.list = [
  41.   "flexible", // horizontal overflow ["rigid"|"flexible"]
  42.   "yes",    // -SPARE-
  43.   "no",     // -SPARE-
  44.   ];
  45.  
  46.  
  47. //menu behaviors 
  48. um.behaviors = [
  49.   "200",    // open timer ["milliseconds"|"0"]
  50.   "500",    // close timer ["milliseconds"|"never"|"0"]
  51.   "yes",    // reposition menus to stay inside the viewport ["yes"|"no"]
  52.   "default",  // manage windowed controls for win/ie ["default","hide","iframe","none"]
  53.   ];
  54.  
  55.  
  56. //reset behaviors
  57. um.reset = [
  58.   "yes",    // reset from document mouse click ["yes"|"no"]
  59.   "yes",    // reset from window resize ["yes"|"no"]
  60.   "yes",    // reset from text resize ["yes"|"no"]
  61.   "no",  // reset after following link ["yes"|"no"]
  62.   ];
  63.  
  64.  
  65. //horizontal continuation strip
  66. um.hstrip = [
  67.   "none",  // background ["color"|"#hex"|"rgb()"|"image.gif"|"none"]
  68.   "yes",    // copy item margin-right to margin-bottom ["yes"|"no"]
  69.   ];
  70.  
  71.  
  72. /***************************************************************\
  73. * MODULE SETTINGS
  74. \***************************************************************/
  75.  
  76.  
  77. //keyboard navigation
  78. um.keys = [
  79.   "38",  // up ["n"] ("38" = up arrow key)
  80.   "39",  // right ["n"] ("39" = right arrow key)
  81.   "40",  // down ["n"] ("40" = down arrow key)
  82.   "37",  // left ["n"] ("37" = left arrow key)
  83.   "123",    // hotkey ["n"] ("123" = F12)
  84.   "none",  // hotkey modifier ["none"|"shiftKey"|"ctrlKey"|"altKey"|"metaKey"]
  85.   "27",  // escape ["n"|"none"] ("27" = escape key)
  86.   "document.getElementsByTagName('a')[4]", // exit focus ["js-expression"]
  87.   ];
  88.  
  89.  
  90. /***************************************************************\
  91. * NAVBAR DEFAULT STYLES
  92. \***************************************************************/
  93.  
  94.  
  95. //styles which apply to the navbar
  96. um.navbar = [
  97.   "2",    // nav to menu x-offset (+-)["n" pixels]
  98.   "-1", // nav to menu y-offset (+-)["n" pixels]
  99.   "auto", // width ["em"|"ex"|"px"] (vertical navbar only - horizontal navbar items have "auto" width) ("%" doesn't work right)
  100.   ];
  101.  
  102.  
  103. //styles which apply to each navbar item
  104. um.items = [
  105.   "0",    // margin between items ["n" pixels]
  106.   "2",    // border size ["n" pixels] (single value only)
  107.   "separate", // border collapse ["collapse"|"separate"] (only applies when margin = "0")
  108.   "#5d91f1 #325081 #325081 #5d91f1",// border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  109.   "solid",  // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  110.   "#5d91f1 #325081 #325081 #5d91f1",// hover/focus border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  111.   "solid",  // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  112.   "#5d91f1 #325081 #325081 #5d91f1",// visited border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  113.   "solid",// visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  114.   "8",    // left/right padding ["n" pixels] (single value only)
  115.   "3",    // top/bottom padding ["n" pixels] (single value only)
  116.   "#5482d4",// background ["color"|"#hex"|"rgb()"|"image.gif"]
  117.   "#fff",// hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
  118.   "#5482d4",// visited background ["color"|"#hex"|"rgb()"|"image.gif"]
  119.   "100%",  // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
  120.   "'Trebuchet MS',Verdana,Helvetica,Arial, sans-serif;",// font family ["font1,font2,font3"] (always end with a generic family name)
  121.   "bold",  // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
  122.   "none",  // text decoration ["none"|"underline"|"overline"|"line-through"]
  123.   "left",  // text-align ["left"|"right"|"center"]
  124.   "#fff", // color ["color"|"#hex"|"rgb()"]
  125.   "#325081",  // hover/focus color ["color"|"#hex"|"rgb()"]
  126.   "#fff", // visited color ["color"|"#hex"|"rgb()"]
  127.   "normal", // font-style ["normal"|"italic"|"oblique"]
  128.   "normal", // hover/focus font-style ["normal"|"italic"|"oblique"]
  129.   "normal", // visited font-style ["normal"|"italic"|"oblique"]
  130.   "",// additional link CSS (careful!)
  131.   "",// additional hover/focus CSS (careful!)
  132.   "",// additional visited CSS (careful!)
  133.   "right-navwhite.gif",// menu indicator character/image ["text"|"image.gif"|"none"]
  134.   "right-navblue.gif",// menu indicator rollover image ["image.gif"|"none"] (only when using image arrows)
  135.   "4",    // clipping width of indicator image ["n" pixels] (only when using image arrows)
  136.   "..",  // alt text of indicator image ["text"] (only when using image arrows)
  137.   ];
  138.  
  139.  
  140. /***************************************************************\
  141. * MENU DEFAULT STYLES
  142. \***************************************************************/
  143.  
  144.  
  145. //styles which apply to each menu
  146. um.menus = [
  147.   "-5",  // menu to menu x-offset (+-)["n" pixels]
  148.   "-3",  // menu to menu y-offset (+-)["n" pixels]
  149.   "2",    // border size ["n" pixels] (single value only)
  150.   "#5d91f1 #325081 #325081 #5d91f1",// border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  151.   "solid",  // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  152.   "12em", // width ["em"|"ex"|"px"]
  153.   "2",    // padding ["n" pixels] (single value only)
  154.   "#5482d4",  // background ["color"|"#hex"|"rgb()"|"image.gif"]
  155.   "",  // additional menu CSS (careful!) (you can use a transition here but *not* a static filter)
  156.   "none",// shadow background ["color"|"#hex"|"rgb()"|"image.gif"|"none"]
  157.   "0",    // shadow offset (+-)["em"|"ex"|"px"|"%"|"0"]
  158.   "",// additional shadow layer CSS (if you use a Microsoft.Shadow filter here then Win/IE5.5+ will do that *instead* of default shadow)
  159.   ];
  160.  
  161.  
  162. //styles which apply to each menu item
  163. um.menuItems = [
  164.   "0",    // margin around items ["n" pixels] (single value only; margins are like table cellspacing)
  165.   "1",    // border size ["n" pixels] (single value only)
  166.   "separate", // border collapse ["collapse"|"separate"] (only applies when margin = "0")
  167.   "#5482d4",  // border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  168.   "solid",  // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  169.   "#5d91f1 #325081 #325081 #5d91f1",    // hover/focus border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  170.   "solid",  // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  171.   "#5482d4",  // visited border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
  172.   "solid",  // visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge"|"inset"|"outset"] (single, double or four values; be careful with using "none")
  173.   "5",    // left/right padding ["n" pixels] (single value only)
  174.   "2",    // top/bottom padding ["n" pixels] (single value only)
  175.   "transparent",  // background ["color"|"#hex"|"rgb()"|"image.gif"]
  176.   "#fff", // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
  177.   "transparent",  // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
  178.   "100%",  // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
  179.   "'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;",// font family ["font1,font2,font3"] (always end with a generic family name)
  180.   "normal", // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
  181.   "none",  // text decoration ["none"|"underline"|"overline"|"line-through"]
  182.   "left",  // text-align ["left"|"right"|"center"]
  183.   "#fff",  // color ["color"|"#hex"|"rgb()"]
  184.   "#325081",    // hover/focus color ["color"|"#hex"|"rgb()"]
  185.   "#fff",  // visited color ["color"|"#hex"|"rgb()"]
  186.   "normal", // font-style ["normal"|"italic"|"oblique"]
  187.   "normal", // hover/focus font-style ["normal"|"italic"|"oblique"]
  188.   "normal", // visited font-style ["normal"|"italic"|"oblique"]
  189.   "",  // additional link CSS (careful!)
  190.   "",  // additional hover/focus CSS (careful!)
  191.   "",  // additional visited CSS (careful!)
  192.   "right-white.gif",// submenu indicator character/image ["text"|"image.gif"|"none"]
  193.   "right-darkblue.gif",// submenu indicator rollover image ["image.gif"|"none"] (only when using image arrows)
  194.   "3",    // clipping width of indicator image ["n" pixels] (only when using image arrows)
  195.   "..",  // alt text of indicator image ["text"] (only when using image arrows)
  196.   ];
  197.  
  198.  
  199. /***************************************************************\
  200. * MENU CLASSES
  201. \***************************************************************/
  202.  
  203.  
  204.  
  205.  
  206. /***************************************************************\
  207. * DYNAMIC MENUS
  208. \***************************************************************/
  209.  
  210.  
  211.  
  212.  
  213.  
  214. /***************************************************************\
  215. \***************************************************************/
  216.  
Datei herunterladen:uploads/tx_jphcodesnippets/udm-custom.txt

Testen der Funktionen

Das Menü sollte jetzt funktionieren. Wenn nicht, gehen Sie alle Schritte nochmal durch, bis Sie den Fehler gefunden haben. Ändern Sie die Datei udm-custom.js solange, bis das Menü hundertprozentig Ihren Anforderungen entspricht. Wenn das der Fall ist, lesen Sie die Seite weitere Schritte.

Design 1
Design 2
Bookmark this page