int_ypslideoutmenu

Armin Bartsch,Donnerstag, 28. Juni 2007

Das ypSlideOutMenu (ypmenu) ist ein einfaches JavaScript Layer-Menü. Jetzt ist es möglich das ypSlideOutMenu per TypoScript zu generieren.

Für das ypSlideOutMenu gibt es bei typo3.intervation.de bereits eine reine TypoScript-Lösung, ypSlideOutMenu. Die TypoScript-Lösung ist etwas schwer einzubinden und an den eigenen Bedürfnisse anzupassen, so da ich mich entschlossen habe das ypSlideOutMenu auch als Extension anzubieten.

Das ypSlideOutMenu ist eine Erweiterung des Objects TMENU und kann ebenso leicht eingebunden werden. Es können verschiedenen Menüzustände ( ACT, CUR etc.) verwendet werden, alle strWarp Möglichkeiten können benutzt werden.

Das ypmenu setze ich mit am liebsten ein; das Ein- und Aus-Scrollen der Menü-Ebenen trifft meinen Geschmack. Leider ist dieser Effekt nicht mit einem reinem CSS-Layer-Menü zu erreichen. Das ypmenue kann im Einsatz auf der Website vom seglerverband-sh.de und und bei http://www.kristinboese.com betrachtet werden.

MENU Object tx_menu_ypslideoutmenu

tx_menu_ypslideoutmenu ist eine Erweiterung von TMENU und verfügt über zusätzliche Eigenschaften für HMENU und TMENU.

Erweiterte Eigenschaften für HMENU
Eigenschaft Datentyp Beschreibung Standard

cssfile

string

Pfad zum CSS-File

Eigenschaften:
Leer oder 1: Standard-CSS wird genommen
0: Kein CSS wird eingefügt, muss seperat eingefügt werden
Pfad-Angabe: Pfad zum CSS wird im header eingefügt

EXT:int_ypslideoutmenu/res/ypSlideOutMenus.js

korek_css

string

Zusätliche CSS Angaben für das ID-Container-Element

 

aniLen

integer

Geschwindigkeit des ausfahrens, als Bezug wird die Länge des Container genommen

0

hideDelay

interger

Zeit bis zum einfahren des Container

50

minCPUResolution

interger

Schrittgröße beim ausfahren

10

kore_so_x

interger

Korektur der Container, relative Angabe für die X, gilt für alle Browser außer für Netscape

 

kore_so_y

interger

Korektur der Container, relative Angabe für die Y, gilt für alle Browser außer für Netscape

 

kore_ns_x

interger

Korektur der Container, relative Angabe für die X, für Netscape

 

kore_ns_y

interger

Korektur der Container, relative Angabe für die Y, für Netscape

 

div_id_layer

string

id für umgebenden DIV für die Layer

yymenu

Erweiterte Eigenschaften für tx_menu_ypslideoutmenu
Eigenschaft Datentyp Beschreibung Standard

moveTo

string

Richtung des ausfahrens des Container

down, right

down

height

integer

Höhe einzelner Link-Elemente im Container

450

width

interger

Breite einzelner Link-Elemente im Container

50

doNotLinkIt

boolean

Es wird ein a-Tag ohne href erzeugt!
Der Link kann mit CSS über .empty_href angepasst werden

0

TypoScript Beispiel

Das MENU Object tx_menu_ypslideoutmenu ist leicht einzubinden, es wird verwendet wie das Object TMENU / TMENU_LAYERS.

Die erste Ebene ist keine Container-Ebene, aus diesem Grund fügen Sie die erste Ebene wie gewohnt ein mit wrap/linkWrap etc..

Die weiteren Ebenen werden von der Extension schon gewrapt, dort muss kein zusätzlicher wrap/linkWrap etc. eingefügt werden. Allerdings stehen sämtliche strWrap zur Verfügung, aber setzen Sie diese mit Vorsicht ein um nicht die Funktionalität zu beeinflussen!

  1. page.includeLibs.ypMenu = typo3conf/ext/int_ypslideoutmenu/class.tx_menu_ypslideoutmenu.php
  2.  
  3. lib.menue = HMENU
  4. lib.menue {
  5.   special = directory
  6.   special.value = 5
  7.   stdWrap.dataWrap = <ul>|</ul>
  8.   stdWrap.required = 1
  9.  
  10.   korek_css = padding-bottom:20px;margin-left:1px;text-align:left
  11.   aniLen = 800
  12.   hideDelay = 5
  13.   minCPUResolution = 10
  14.   kore_so_x = -2
  15.   div_id_layer = yymenu
  16.  
  17.   1 = tx_menu_ypslideoutmenu
  18.   1 {
  19.  
  20.     expAll=1
  21.     NO = 1
  22.     NO {
  23.       linkWrap = <span>|</span>
  24.       ATagBeforeWrap = 1
  25.       allWrap = <li>|</li>
  26.     }
  27.   }
  28.   2 = tx_menu_ypslideoutmenu
  29.   2 {
  30.       moveTo = down
  31.       height = 22
  32.       width = 177
  33.       expAll=1
  34.       NO {
  35.       }
  36.   }
  37.   3 < .2
  38.   3.moveTo = right
  39.   3.width= 177
  40.  
  41. }
  42.  

CSS

Die Extension stellt ein CSS für die Container zur Verfügung, also ab der 2. Ebene. Für die erste Ebene ist kein CSS in der Extension vorhanden.

Mit der Eigenschaft cssfile wird festgelegt, ob die CSS der Extension eingebunden werden soll oder ob eine andere Quelle genutzt werden soll.

Download

Download im TER: typo3.org/extensions/repository/

Int-Extensionen

MERKLISTE

Sponsored by:

ideenwerft webhosting

Wunschzettel