Zum Inhalt springen

[Beispiel] ypMenu ( GMENU horizontal , ypSlideOutMenus )

Erstellt am 25. Januar 2005 · 119 Antworten · letzte Antwort am 13. November 2007 · Seite 4 von 6

Tags: JavaScript & AJAX, Tipp

leu ·

@rosieres

meiner Meinung ist bei dir nur die erste ebene als gmenu realisiert (wie überall.) ich will aber sämtliche menüpunkte mit dem gifbuilder erstellen. webnn ich alle punkte als gmenu angebe, würde allerdings alles durcheinadergeraten. zumindest soweit ich das überschaue.

rosieres ·

stimmt .. hab ich völlig überlesen das du alles vom gifbuilder erstellen lassen willst....
hast du noch garnicht ausprobiert ? wie sieht es denn aus wenn du das TS setup umschreibst auf gmenu ?

rosieres ·

weiss jemand wie man das menu mit TV zum laufen bringt ? .... ohne TV klappts aber ich hab meine ganze Seite mit TV realisiert und will davon nicht mehr weg....

DS XML:

<t3datastructure>
    <root type="array">
        <tx_templavoila type="array">
            <title>ROOT</title>
            <description>Select the HTML element on the page which you want to be the overall container element for the template.</description>
        </tx_templavoila>
        <type>array</type>
        <el type="array">
            <field_menu type="array">
                <tx_templavoila type="array">
                    <title>Menu</title>
                    <sample_data type="array">
                        <numindex index="0">Hier kommt das Hauptmenu hin</numindex>
                    </sample_data>
                    <etype>TypoScriptObject</etype>
                    <etype_extra type="array">
                        <objpath>temp.ypMenu</objpath>
                    </etype_extra>
                    <typoscriptobjpath>temp.ypMenu</typoscriptobjpath>
                </tx_templavoila>
            </field_menu>
            <field_content type="array">
                <tx_templavoila type="array">
                    <title>Content</title>
                    <sample_data type="array">
                        <numindex index="0">hier kommt der content</numindex>
                    </sample_data>
                    <etype>ce</etype>
                    <typoscript>
	10= RECORDS
	10.source.current=1
	10.tables = tt_content
							</typoscript>
                </tx_templavoila>
                <tceforms type="array">
                    <config type="array">
                        <type>group</type>
                        <internal_type>db</internal_type>
                        <allowed>tt_content</allowed>
                        <size>5</size>
                        <maxitems>200</maxitems>
                        <minitems>0</minitems>
                        <multiple>1</multiple>
                        <show_thumbs>1</show_thumbs>
                    </config>
                    <label>Content</label>
                </tceforms>
            </field_content>
        </el>
    </root>
</t3datastructure>

Der SETUP CODE

#################################################
# DAS DYNAMISCHE MENU
#################################################

config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/scripts/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/ypSlideOutMenus.js" language="JavaScript"></script>
temp.ypMenu.special = directory
temp.ypMenu.special.value = 1
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
          IProcFunc = user_menu->firstLevel
          expAll = 1
          wrap = |
          NO = 1
          NO {
               wrap = |
               XY = [50.w]+20, 25
               30 = IMAGE
               30.file = fileadmin/templates/Bilder/menu_bg.png
                transparentBackground = 1 
               50 = TEXT
               50 {
                   text.field = title
                   hide = 1
                    fontFile = fileadmin/templates/fonts/IMPACT.TTF                    
                    offset = 2,20
                    fontColor = #FFFFFF
                    transparentBackground = 1
              }
               
          }
          IFSUB < temp.ypMenu.1.NO
          IFSUB = 1
          
          RO < temp.ypMenu.1.NO
          RO = 1
          RO {
               
               30 >
          }
       IFSUBRO < temp.ypMenu.1.NO
        IFSUBRO = 1
          IFSUBRO {
               
               30 >
          }
     }  
      
     2 = TMENU
     2 {
          IProcFunc = user_menu->secondLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
 
     3 = TMENU
     3 {
          IProcFunc = user_menu->thirdLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
 
     4 = TMENU
     4 {
          IProcFunc = user_menu->fourthLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
}

temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd 


#################################################
# STANDARD PAGE
#################################################

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/templates/main.css
page.8 = USER
page.8.userFunc = tx_templavoila_pi1->main_page
page.8{
temp.ypMenu = COA
temp.ypMenu {
20 < temp.user_menu
   }
}
Cocopapa ·

TEMPLA VOILA und ypMENU

Hallo zusammen

Bin echt begeistert von dem Menü und es will sogar auf unserer Seite laufen. Naja Feintuning ist noch angesagt.
Ich arbeiten auch mit Templa Voila und bin gerade dabei alles umzustellen. So läuft es bei uns:

####################################################
###Setting up the page object
####################################################
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

################################
###ypSlideOutMenu horizontal
################################
config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/LAYOUT/scripts/ypSlideOutMenuH/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/LAYOUT/scripts/ypSlideOutMenuH/ypSlideOutMenus.js" language="JavaScript"></script>

################################
###Body and Includes
################################
page.bodyTag = <body>

...

Jetzt folgt das Setup der Extension gov_accessibility

...

page.config.index_enable = 1

####################################################
### Configuring Dynamic CSS
####################################################

page.CSS_inlineStyle (
BODY
	{
...

Hier im css-Abschnitt des Setups habe ich eingefügt:

...
#####################################################
###ypSlideOutMenu Horizontal CSS
#####################################################
/*
###################
#  ypMenu Styles  #
###################
 #cMenu {
     height:31px;
     width: 708px;
     margin-left:1px;
     margin-bottom:1px;
     background: #FFFFFF url(/fileadmin/LAYOUT/scripts/ypSlideOutMenuH/menu.png) repeat-x top left;
     position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */
}
*/
.mmContent {
font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
}

# Untermenü Ebene 1
.mmContent ul {
margin: 0px; padding: 0px;
list-style: none;
z-index:2;
position:relative;
left:0px; top:0px;
}
.mmContent li {
padding: 0px; margin: 0px;
 }

.menuBackground {
position:absolute;
left:0px; top:0px;
z-index:1;
}

.mmContent li a {
display: block;
color: #222222;
font-weight:normal;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
width: 150px;
padding: 5px;
text-decoration: none;
border-bottom: solid 1px #CCCCCC;
}

* html .mmContent li a {
width: 160px;
width: 160px;
}
...

und so weiter ... der Code wurde schon so oft dargestellt! Danach geht es wieder weiter mit dem Setup der Extension gov_accessibility

...
#centercontent .contentWrapper
...

Im Abschnitt nach

####################################################
###Setting up doctype, language-stuff and Adminpanel
####################################################

fügte ich folgendes ein

...
####################################################
###ypSlideOutMenu Horizontal
####################################################
temp.ypMenu.special = directory
# 1849 ist die ID der root-page - siehe screenshot
temp.ypMenu.special.value = 1
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
          IProcFunc = user_menu->firstLevel
          expAll = 1
          wrap = |
          NO = 1
          NO {
               wrap = |
               XY = [50.w]+20, 31
               30 = IMAGE
               30.file = fileadmin/LAYOUT/scripts/ypMenu/menu_bg.png
               50 = TEXT
               50 {
...

der gesamte Code ist ja bekannt. Es folgen wiederum alle anderen Setupteile der gov_acessibility Extension.
Im Abschnitt mit den marks

...
####################################################
###feeding TYPO3 with the xhtml-template
####################################################
page.10 = TEMPLATE
page.10 {
  template = FILE
  template.file = {$maintemplate}
  workOnSubpart = {$templateWorkOnSubpart}

kopiert ich folgendes

##################################################
  ###ypSlideOutMenu Horizontal
  ##################################################
  marks.MENU = COA
    marks.MENU {
    10 < temp.ypMenu
    20 < temp.user_menu

Danach folgt wieder der Rest aus dem gov_acessibilty setup

####################################################
  ###replacing static markers with dynamic content
  ####################################################
  marks.CONTENT = COA
...

Das Menü funktioniert einwandfrei, jedoch ist bei mir noch einiges Tuning angesagt
http://andi.lisandi.com

schmutti ·

Hat denn keiner ausser mir das Problem das im Internet Explorer nichts mehr dargestellt wird wenn man mehr als 34 Unterseiten=Menüeinträge hat?
Basti

Fabian1981 ·

Hallo,

ich bin auch noch ziemlich neu und bin schwer am kämpfen mit Typo3 :o

Ich habe das Problem, dass das Menu bei mir garnicht angezeigt wird, dabei denke ich, dass ich das externe Template richtig eingebunden habe. Ich habe auch zusätzlichen TScode eingetragen, der genau wie vorher, wo er im RootTemplate war, funktioniert.

Hier ist mein Rootverzeichnis

page = PAGE
page.typeNum = 0
page.config.doctype = xhtml_trans
page.config.index_enable = 1
page.headerData.1 = TEXT
page.headerData.1.value = <link rel="stylesheet" type="text/css" href="fileadmin/MMBtemp/main.css" /> <script type="text/javascript" src="fileadmin/MMBtemp/scripts/ypSlideOutMenus.js" language="JavaScript"></script> 

page.30 = TEMPLATE
page.30 {
template = FILE
template.file = fileadmin/MMBtemp/template.htm 
workOnSubpart = DOCUMENT_BODY
     marks.MENU = COA
     marks.MENU {
     10 < temp.ypMenu
     20 < temp.user_menu
     }

# Menu 1 cObject
subparts.Menu_Links = HMENU
# First level menu-object
subparts.Menu_Links.1 = GMENU
subparts.Menu_Links.1 {
  NO {
XY = 179, 26
5 = IMAGE
5.file = fileadmin/MMBtemp/images/upperbutton.jpg
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/MMBtemp/fonts/{$font.menulinks}
10.fontSize = 13
# offset bestimmt die vertikale Ausrichtung der Schrift
10.offset = 0,17
10.fontColor = #153B63
10.align = center
10.before.cObject = TEXT
10.before.cObject.field = uid
}
RO < .NO
  RO = 1
  RO {
10.fontColor = #A83F4A
}
} 


# Second level menu-object, textual
subparts.Menu_Links.2 = GMENU
subparts.Menu_Links.2 < .subparts.Menu_Links.1
subparts.Menu_Links.2 {
  NO {
5.file = fileadmin/MMBtemp/images/lowerbutton.jpg
10.fontColor = #153B63
}
  RO {
5.file = fileadmin/MMBtemp/images/lowerbutton.jpg
}
} 

#Footer
subparts.Firmeninfo = TEXT
subparts.Firmeninfo.value = Mayr Miesbach - Druckerei und Verlag GmbH - Am Windfeld 15 - 83714 Miesbach
#Überschriften
subparts.Mitte_Header = Image

subparts.Mitte_Header.file = GIFBUILDER {
    backColor = white
    10 = image
    10.file = fileadmin/MMBtemp/images/lowerbutton.jpg
    18 = TEXT
    18 {
      text.field = title
      fontSize = 35
      fontFile = {font.title}
      fontColor = red
    
  }
}
}

Hier ist das externe Template:

config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/MMBtemp/scripts/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/MMBtemp/scripts/ypSlideOutMenus.js" language="JavaScript"></script>
temp.ypMenu.special = directory
# 9 ist die ID der root-page - siehe screenshot
temp.ypMenu.special.value = 9
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
          IProcFunc = user_menu->firstLevel
          expAll = 1
          wrap = <div class="cMenu"> |
          NO = 1
          NO {
               wrap = |
               XY = [50.w]+20, 31
               40 = IMAGE
               40.file = fileadmin/MMBtemp/images/small-pics.jpg
               50 = TEXT
               50 {
                    text.field = title
                    fontSize = 10
                    fontFile = fileadmin/MMBtemp/fonts/HELVNM.TTF
                    fontColor = #222222
                    offset = 10,20
                    niceText = 0
                    transparentBackground = 1
               }
               100 = || IMAGE
               100.file = fileadmin/MMBtemp/images/small-pics.jpg
          }
 
          IFSUB < temp.ypMenu.1.NO
          IFSUB = 1
 
          RO < temp.ypMenu.1.NO
          RO = 1
          RO {
               backColor = #DDDDDD
               40 >
          }
 
          IFSUBRO < temp.ypMenu.1.NO
          IFSUBRO = 1
          IFSUBRO {
               backColor = #DDDDDD
               40 >
          }
     }    
 
     2 = TMENU
     2 {
          IProcFunc = user_menu->secondLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
 
     3 = TMENU
     3 {
          IProcFunc = user_menu->thirdLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
 
     4 = TMENU
     4 {
          IProcFunc = user_menu->fourthLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
}
 
temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd 

page.30 {
subparts.CONTENT < styles.content.get
subparts.Specials < styles.content.getRight
subparts.Suchfunktion < plugin.tx_gstcontentsearch_pi1
result_link_target = subparts.CONTENT
}

Das mark verschwindet auch, hier ist noch mein Template, wobei es daran ja nicht liegen dürfte, ich habe das Beispiel mit den div's einfach mal so eingetragen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body leftmargin="0" topmargin="0">
<!-- ###DOCUMENT_BODY### start -->
<table width="1024" border="0" cellspacing="0" cellpadding="0" align="center">

<tr valign="top">
<td colspan="2" rowspan="2" bgcolor="#FFFFFF">
  <img src="fileadmin/MMBtemp/images/Mayr_Logo.jpg" width="254" height="152" alt="" /></td>
<td align="right" id="suchfunktion"><!--###Suchfunktion### start -->Suchfunktion<!--###Suchfunktion### stop --></td>

</tr>

<tr>
<td id="menu_oben"><!--###Menu_Oben### start -->Menu_Oben<!--###Menu_Oben### stop --></td>
</tr>

<tr valign="top">
<td colspan="3"><img src="fileadmin/MMBtemp/images/bildleiste_klein.jpg" width="1024" height="112" alt="" /></td>
</tr>
</table>
<table width="1024" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td rowspan="2" width="179" valign="top" id="Menu_Links"><!--###Menu_Links### start -->Menu_Links<!--###Menu_Links### stop -->
</td>


	
	<td width="26"></td>
	<td valign="top" width="874" id="mitte_header"><!--###Mitte_Header### start -->Mitte_Header<!--###Mitte_Header### stop --></td>
	<td width="26"></td>
	<td rowspan="3" width="100" align="right" valign="top" id="specials"><!--###Specials### start -->Specials<!--###Specials### stop --></td>
	</tr>
	<tr>
	<td width="26" height="250"></td>
	<td rowspan="2" valign="top" id="content"> <!--###CONTENT### start -->CONTENT<!--###CONTENT### stop --></td>
	<td width="26"></td>
	</tr>


<tr>
<td colspan="1" height="90" bgcolor="#90AEC0" valign="top"><img src="fileadmin/MMBtemp/images/small-pics.jpg" width="198" height="62" alt="" /></td>
</tr>


<tr>
<td bgcolor="#004F78"> </td>
<td height="30" colspan="4" align="center" valign="middle" class="Firmeninfo"><!--###Firmeninfo### start -->Firmeninfo<!--###Firmeninfo### stop --> </td>

</tr>
</table>
<!-- ###DOCUMENT_BODY### ende -->
</body>

</html>td>
<td height="30" colspan="4" align="center" valign="middle" class="Firmeninfo"><!--###Firmeninfo### start -->Firmeninfo<!--###Firmeninfo### stop --> </td>

</tr>
</table>
<!-- ###DOCUMENT_BODY### ende -->
</body>

</html>

Wäre super, wenn ihr mir helfen könnt #paralyzed#

Nicklas ·

bei mir lag es daran, dass ich im root template nicht das ext template und include basis template eingebunden hatte..

hoffe es hilft..

Kann mir einer sagen, was ich machen muss, dass das menü nach oben aufgeht???

nikhob ·

Hallo miteinander,

mein ypMenu funtioniert in allen Browsern, nur nicht im IE6. Schein als würde er das JavaScript vollkommen übergehen, ist aber mit Sicherheit nicht deaktiviert. Woran könnte das liegen?

Yannis ·

Hey,
ich habe leider genau das gleich Problem:
der IE ignoriert das JAvaScript und es bewegt sich gar nichts!

Hat irgendwer eine idee??

Yannis

nordic ·

Hi,
ich benutze auch das ypmenu und es hat auch die ganze zeit optimal funktioniert, doch jetzt hab ich irgendwie ein sehr sonderbares problem:
Im Firefox und Safari funktionier alles, im IE6 zerstört er das komplette layou! ....wenn ich einen menüpunkt rausnehme funktionierts im IE6 auch wieder, allerdings nur, wenn der menüpunkt, den ich rausnehme auch unterseiten hat #evil# beschäftige mich mit typo noch nicht sooo lange und habe deshalb auch keine ahnung woran DAS liegen kann....

zu sehen auf: http://www.meranier-gymnasium.de

Wäre schön, wenn mir jemand helfen könnte :o

lg nordic

Yannis ·

hey, ich habe nen bisschen was geschafft: man sieht jetzt auch im IE etwas, nur es passt nöch nicht wirklich: http://web18.claudia.hosting-friends.de/test/

muss natürlich nochh alles angepasst werden, aber ich möchte erst das menu am laufe haben. Das Design wird natürlich auch noch anders, dies wird die neuauflage unserer seite.
Hofentlich könnt ihr mir helfen!

Yannis

nordic ·

sorry ich kann dir leider auch net helfen :o

Aber kann das sein, dass der IE bei einer bestimmten menge an menüpunkten zusammen mit dem ypmenu streikt?! der zerhaut das ganze layout, während es im FF normal geht! ....habe deswegen das menü auf zwei teile aufgeteilt, im FF geht es auch wieder - im IE funktioniert das erste normal, beim zweiten sind die menüpunkte aber leider untereinander angeordnet...

kann mir jemand sagen woran das liegt, oder ob das überhaupt einen sinn hat, das in 2 teilezu teilen?!

Link: http://www.meranier-gymnasium.de

vielen Dank, nordic

Yannis ·

Also, bei meade.de / sci-worx.de gehts ja, vllt kann uns jemand mal die Dateien und das TS als .zip zuschicken der es hingekriegt hat?

E-mail: info@yannis-k.de

Wäre echt nett;
bis dann, euer Yannis

charly83 ·

Hallo

Bin auch noch neu und verzweifle schön langsam mit dem ypMenu.
Vielleicht kann mir wer weiterhelfen.
Wenn ich im Template den Code für die Unterpunkte weglasse funktioniert mein Menü einwandfei. Gebe ich sie wieder dazu macht Typo beim jeweiligen Menüpunkt enen Zeilenumbruch und schreibt die Unterpunkte wie einen Link darunter.

Für eine Antwort wäre ich sehr dankbar.

Mit freundlichen Grüßen
Thomas

WeVo ·

Hallo @ all,

also ich kann mich charly83 nur anschliessen! Ich habe das selbe Prob #angry#
Ich habe die Dateien downgeloadet den Menüeintrag in mein Hauptemplate erstellt. Das Template ypMenu erstellt und anschließend ins Maintemplate mit eingebunden. Die ID im ypMenutemp von 57 auf 1 gesetzt. Anstatt der Hintergrundbilder einfach mal wilde Farben eingegeben, Cache geleert und los geht's! :o Oh man und was kommt raus .... so en Mißt (bitte nicht denken dass das mein Haupttemplate mal wird / es sind im Moment nur wilde Basteleien - bin noch so ein halber typo3 newbe :o )

Bild: zffh.de/hc.jpg

Wie man sehen kann werden die Hauptmenüeinträge richtig gesetzt. Auch der Rollover funktioniert - aber nur bei den Menüpunkten welche keine Untermenüs haben!Allerdings werden die Untermenüeinträge einfach rechts vertikal aufgelistet. Wieso?
Sobald ich über einen Hauptmenüeintrag drübergehe, welcher Unterpunkte besitzt, bekomme ich unten im IE 6 einen Scriptfehler im ypSlideOutMenu in der Zeile 184 Zeichen 1. Oh Gott #angry# !!! Naja leider habe ich keine Ahnung an was es liegt! Hoffentlich kann mir BITTE! jemand von Euch helfen! Falls Ihr das TS brauchen solltet, einfach bescheid sagen! Vielen Dank!

Viele Grüße

Markus

charly83 ·

@WeVo

Bei mir hat es folgendes Problem gehabt.
Typo hat im externen Template kein js geladen. Jetzt hab ich das ganze ins main Template eingebunden und es funktioniert wunderbar.

Mit freundlichen Grüßen
Thomas

marsian ·

Hallo allseits

ich suche dringend die Dateien für das horizontale ypMenu. Die Links am Anfang dieses Threads sind leider tot und ich finde leider nur die Dateien für das vertikale ypMenu (Diese umzubauen ist leider auch nicht so einfach).

Kann mir jemand einen funktionierenden Link angeben?

Gruss Simon

marsian ·

Habs nun geschafft das ypMenu auf horizontal zu stellen.

Falls jemand die Dadeien benötigt kann er hier posten.

Gruss Simon