Zum Inhalt springen

aufklappendes Menü (TMENU)

Erstellt am 14. Januar 2004 · 47 Antworten · letzte Antwort am 8. Januar 2009 · Seite 1 von 3

Tags: Frage

Cre8tive ·

Da in letzter Zeit auch oft danach gefragt wurde und ich mir selbst zuletzt die Lösung aus einigen Topics zusammen suchen musste, hier einmal das komplette Setup solch einen Menüs.

So sieht das Menü nachher aus:
<img src="http://www.be-cre8tive.com/howto_typo3/t_menu.jpg">

Setup:

##############################
 HAUPTEMENU: MENU_MAIN
##############################

   # Benoetigte Libaries einfuegen
   page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

   # Menu erzeugen
   temp.MENU_MAIN = HMENU 

   ################
   # MENU EBENE 1 #
   ################
     # Ebene 1 erzeugen
     temp.MENU_MAIN.1 = TMENU_LAYERS 
     # Eigenschaften Ebene 1
     temp.MENU_MAIN.1 { 
 
                layerStyle = position:absolute;VISIBILITY:hidden;
 
                # Menu verankern, damit es nicht der Maus folgt 
                lockPosition = x 

                # Position wo sich die naechste Ebene oeffnen soll (Ebene 2) 
                relativeToParentLayer=1 
                relativeToTriggerItem=1 
                topOffset=16 
                leftOffset=0
                # Angabe wann sich die naechste Ebene wieder schliessen soll 
                hideMenuWhenNotOver = 50 
                hideMenuTimer = 70 

                # alle Menuepunkte anzeigen 
                expAll=1 

                # Darstellung der aktuellen Ebene 
                wrap = <table border="0" cellspacing="0" cellpadding="0" class="menu1_main"><tr>|</tr></table> 
                # Darstellung im Normalmodus
                NO {
                    allWrap = <td class="menu1_main"> | </td>
                   }
                # Darstellung wenn Aktiv
                ACT = 1
                ACT { 
                     allWrap =  <td class="menu1_main_act"> | </td> 
                     }

                # Ende Ebene 1
                } 


   ################
   # MENU EBENE 2 #
   ################
     # Ebene 1 erzeugen
     temp.MENU_MAIN.2 = TMENU_LAYERS 
     # Eigenschaften Ebene 1
     temp.MENU_MAIN.2 { 
 
                layerStyle = position:absolute;VISIBILITY:hidden;
 
                # Menu verankern, damit es nicht der Maus folgt 
                lockPosition = x 

                # Position wo sich die naechste Ebene oeffnen soll (Ebene 2) 
                relativeToParentLayer=1 
                relativeToTriggerItem=1 
                topOffset=0 
                leftOffset=140


                # alle Menuepunkte anzeigen 
                expAll=1 

                # Darstellung der aktuellen Ebene 
                wrap = <table border="0" cellspacing="0" cellpadding="0">|</table> 
                # Darstellung im Normalmodus
                NO {
                    allWrap = <tr><td class="menu1_main2"> | </td></tr>
                   }
                # Darstellung wenn Aktiv
                ACT = 1
                ACT { 
                     allWrap =  <tr><td class="menu1_main2_act"> | </td></tr> 
                    }
                # Darstellung fuer Unterpunkte mit Subpunkten
                IFSUB = 1
                IFSUB { 
                     allWrap =  <tr><td class="menu1_main2_sub"> | </td></tr> 
                    }

                # Ende Ebene 2
                } 



   ################
   # MENU EBENE 3 #
   ################
     # Ebene 1 erzeugen
     temp.MENU_MAIN.3 = TMENU 
     # Eigenschaften Ebene 1
     temp.MENU_MAIN.3 { 
 

                # Darstellung der aktuellen Ebene 
                wrap = <table border="0" cellspacing="0" cellpadding="0">|</table> 
                # Darstellung im Normalmodus
                NO {
                    allWrap = <tr><td class="menu1_main2"> | </td></tr>
                   }
                # Darstellung wenn Aktiv
                ACT = 1
                ACT { 
                     allWrap =  <tr><td class="menu1_main2_act"> | </td></tr> 
                     }

                # Ende Ebene 3
                } 

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN

die Stylesheets:

/*MENUES */
.menue_main
{
	background: #000099;
	text-align: left;
	height: 16 px;
	width: 602 px;
		
}

/*MENU_MAIN */
.menu1_main
{	
	background-color: #000099;	
}




.menu1_main A, .menu1_main A:visited {
	color: #ffffff;	
	text-decoration: none;
	display: block;
	background-color: #000099;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #ffffff;
	font-weight: bold;
	font-size: 10pt;
	font-family: verdana;		
}

.menu1_main A:hover, .menu1_main A:bb:hover {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	display: block;
	background-color: #FFCC00;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #ffffff;
	font-weight: bold;
	font-size: 10pt;
	font-family: verdana;
	
}

.menu1_main_act A, .menu1_main_act A:visited {
	color: #000099;
	font-weight: bold;
	text-decoration: none;
	display: block;
	background-color: #CCCCEB;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #ffffff;
	font-weight: bold;
	font-size: 10pt;
	font-family: verdana;
	
}

.menu1_main_act A:hover, .menu1_main_act A:bb:hover {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	display: block;
	background-color: #FFCC00;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 1px solid #ffffff;
	font-weight: bold;
	font-size: 10pt;
	font-family: verdana;
	
}
 

/* MENU_MAIN LEVEL 2 */

.menu1_main2 A, .menu1_main2 A:visited {
	color: #009900;
	font-weight: bold;
	text-decoration: none;
	background: #CCEBCC;
	border-bottom: 1px solid #009900;
	padding-left: 5px;
	width: 140px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 8pt;
	font-family: verdana;
}

.menu1_main2 A:hover, .menu1_main2 A:bb:hover {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	background: #FFCC00;
	border-bottom: 1px solid #009900;
	padding-left: 5px;
	width: 140px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 8pt;
	font-family: verdana;
}


.menu1_main2_act A, .menu1_main2_act A:visited {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	background: #009900;
	border-bottom: 1px solid #009900;
	padding-left: 5px;
	width: 140px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 8pt;
	font-family: verdana;
}

 .menu1_main2_act A:hover, .menu1_main2_act A:bb:hover {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	background: #FFCC00;
	border-bottom: 1px solid #009900;
	padding-left: 5px;
	width: 140px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 8pt;
	font-family: verdana;
}

.menu1_main2_sub A, .menu1_main2_sub A:visited {
	color: #009900;
	font-weight: bold;
	text-decoration: none;
	background-image : url(main/images/menu_sub_back.jpg);
	border-bottom: 1px solid #009900;
	padding-left: 5px;
	width: 140px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 8pt;
	font-family: verdana;
}

 .menu1_main2_sub A:hover, .menu1_main2_sub A:bb:hover {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	background-image : url(main/images/menu_sub_back_act.jpg);
	border-bottom: 1px solid #009900;
	padding-left: 5px;
	width: 140px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: bold;
	font-size: 8pt;
	font-family: verdana;
}

Im Template muss lediglich irgendwo der Marker MENU_MAIN gesetzt werden.

Hoffe das hilft einigen.

TschakaZulu ·

Hallo,

danke fuer das HowTo. Ich werde sowas in naechster Zeit zwar nicht machen (aktuell suche ich #8191...). Aber eine Frage hab ich:

# Marker durch Menü ersetzten:
subparts.MENU_MAIN < temp.MENU_MAIN

Ist das zwingend notwendig, und was hat das substituieren des 'temp.' fuer Vorteile? reicht es nicht direkt die subparts.MENU_MAIN zu definieren? So mache ich des naemlich. Ich seh halt noch keinen Unterschied darin, ausser das es etwas komplexer wird?!

Gruss

Thomas
[/quote]

Cre8tive ·

Meine ersten Schritte in Typo3 war das "Modern Template Building" Tutorial. Dort werden dann die Marker aus dem Template so wie von dir zitiert ersetzt und der Rest in einer externen Datei in die Seite includet.

Warum das jetzt genauso gemacht wird, habe ich nicht verstanden - aber ich habe das seitdem so übernommen und lagere einfach sämtliche solcher Sachen auf diese Art und Weise aus.

maxhb ·

Hi!

TschakaZulu schrieb

reicht es nicht direkt die subparts.MENU_MAIN zu definieren? So mache ich des naemlich. Ich seh halt noch keinen Unterschied darin, ausser das es etwas komplexer wird?!

Es reicht völlig aus, direkt das Menu dem Marker zuzuordnen.
Der Vorteil der Zuweisung wie es im Beispiel gezeigt, wird liegt darin, dass Du das komplette Menu in ein separates (Extension-) Template auslagern kannst, z.B. "Hauptmenu". Dieses kannst Du dann in Dein entsprechendes "Haupttemplate" importieren und so den Code etwas übersichlicher Gestalten. Ich nutze diese Möglichkeit TS-Code-Fragmente (Hauptmenu, Submenu, Fusszeile, etc.) auszulager so oft es geht, dadurch finde ich mich im Code deutlich besser zurecht - ist aber Geschmackssache.

CU
maxhb

woodworker ·

trotz Copy n' Paste ist es mir nicht gelungen dein Menu zu laufen zu bekommen

glaube zwar das es an mir liegt aber poste trotzdem mal *G*

EDIT: durch ein anderen Post ist mir aufgefallen das ich es flasch eingebunden habe
Link: #8582

Klaus34 ·

Ich habe die "Modern Template Buildings" 1-3 durchgearbeitet und am Ende funktioniert auch alles.

Ich möchte jetzt im Template Selector ein neues Menü (wie oben beschrieben) als Auswahl anbieten.

Wie muss ich dieses im neu zu erstellenden template_3.html einbinden, damit es auch angezeigt wird?

Das kriege ich einfach nicht hin.

Cre8tive ·
Cre8tive schrieb

Im Template muss lediglich irgendwo der Marker MENU_MAIN gesetzt werden.

Ich habs wie folgt eingebunden:

<td id="MENU_MAIN" class="menue_main">
<!-- >> MENU_MAIN << -->
</td>

Das Aussehen hab ich dann nachher im meinem Stylesheet definiert, dewegen das "class=menue_main".

Klaus34 ·

So hatte ich es auch gemacht, ging aber trotzdem nicht.

Jetzt funktioniert es aber prima.
Ich hatte das Menü als ext: Menu 2 ausgelagert.
Beim include muss man aber wohl eine bestimmte Reihenfolge beachten, wenn ich das richtig in Erinnerung habe.

Habe es dann wieder gelöscht und einfach in das bestehende Menu 1 reinkopiert. Jetzt funzt es.

Cre8tive ·

du musst es dann auch unter "edit whole template record" im template der root seite einbinden... dann gehts auch als ext: menu 2.
lager so eigentlich fast alles aus.

maxhb ·

Hi!

Klaus34 schrieb

Beim include muss man aber wohl eine bestimmte Reihenfolge beachten, wenn ich das richtig in Erinnerung habe.

Habe es dann wieder gelöscht und einfach in das bestehende Menu 1 reinkopiert. Jetzt funzt es.

Genau, die Reihenfolge ist wichtig. Einfach mal in die Templateansicht einer Seite wechseln und dann den "Template-Analyzer" anwerfen. Da kann man genau sehen, wann welches Template eingebunden wird.

Cu
maxhb

Klaus34 ·

Das meinte ich eben.
Dabei muss man aber wohl aufpassen, dass es an der richtigen Stelle steht, und das war sicher der Fehler.

Jedenfalls funzt es jetzt und vielleicht hat es anderen auch weiter geholfen.

steffen_b ·

Hmmm ich scheine noch zu dumm zu sein das hinzubekommen 🙁

Mein Setup sieht so aus:

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/typo3test/menu.css

# Benoetigte Libaries einfuegen
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php

page.20 = TEMPLATE
page.20 {
template = FILE
template.file = fileadmin/typo3test/template.htm

workOnSubpart = BODY
subparts.content < styles.content.get
subparts.content.select {
orderBy = sorting
}

temp.MENU_MAIN = HMENU
....
copy&paste von oben
....

# Marker durch Menü ersetzten:
subparts.navi < temp.MENU_MAIN
}

navi heisst mein subpart. Der subpart wird garnicht angefasst, das heisst es steht noch der Dummy Text zwischen den noch im Quelltext sichtbaren subpart Markern 🙁

Hoffe es sieht hir jemand meinen Fehler

Cre8tive ·

du hast das menü aber nicht ausgelagert oder?

bei mir steht das setup vom menü in einer eigenen datei, die ich dann einbinde und nur im root setup steht dann

subparts.MENU_MAIN < temp.MENU_MAIN
steffen_b ·

Nein Ich habe nichts ausgelagert. Ich hätte gar keine Ahnung wie ich das anstellen könnte 😃

Ich habe das was ich oben beschrieben habe im Setup stehen. Für das Menü ist es fast 100% copy and paste ich habe nur den Include ein wenig nach oben gesetzt.

Gruß

Steffen

jeff ·

vielen dank für deinen "howto"-code,
damit habe ich meine navigation von graphischen pop-ups auf text-pop-ups umgestellt und dadurch meine ladezeit mehr als halbiert! siehe: http://www.muenichreith.com

trotzdem bin ich noch nicht 100%ig zufrieden.

ich hätte nämlich gerne, dass ein menu, das unterpunkte hat, eingefärbt bleibt wenn man zu diesen unterpunkten mit der maus fährt. habs mit " freezeMouseover = 1" probiert, hat aber nix gebracht.
wie könnte das gehen.

außerdem möchte ich menupunkte mit submenues mit einem kleinen pfeilchen versehen.
wieder das problem habs mit "afterImg = fileadmin/right.gif" probier, funkt auch nicht?!?!

irgendwer eine idee?
danke!

llandi ·

Hi,

also das menü ist wirklich Klasse und funzt auch im IE hervorragend.

Ich hab nur ein Problem im Netscape und Opera.
Ich habe leftOffset in für Ebene 2 auf -120, damit die 2. Ebene linksbündig aufgeht (Menükasten genau unter dem Hauptmenüpunkt).

Im Netscape verschiebt es mir aber die Ebenen um 120 nach links, da er bei 0 linksbündig aufgehen würde (d.h. eigentlich macht es der IE falsch).

Wie kann ich das Problem abfangen.

Vielen Dank.

Andi

Cre8tive ·

Hallo.

Weiss ich leider auch nicht, ich habe vor längerer Zeit aufgehört für Netscape, etc zu optimieren. Der überwiegende Teil der Menschheit benutzt eben den IE (nach den Zugriffsstatistiken auf Kundenseiten sogar über 90%).

Aber generell würde mich natürlich eine Lösung schon interessieren. Kann ja nicht schaden 8-)

Scrat ·

Hallo Cre8tive,

danke für Dein Howto! Mit dessen Hilfe habe ich es schnell geschafft, ein erstes Menü zu bauen (bin totaler TYPO-Newbie).

Eine Frage: wie schwierig ist es, das Menü in ein senkrechtes Menü, das nach rechts ausklappt, umzustricken? Wie geht das?

Kurze Anmerkung für alle, die mit dem ModernTemplateBuilding 1 und dem AutoParser arbeiten: das Menü-Setup schreibt ihr am besten nach der Konfiguration des AutoParsers rein. ABER: die Ersetzung des Markers muss unter die Zeile workOnSubpart = DOCUMENT_BODY, also in das Template cObject für <body>. Nach einigem Probieren hat es bei mir so geklappt.