Mano mein Menü mag net so wie es soll. Kann mir denn keiner helfen ?
So soll es aussehen, wenn ein Hauptmenüpunkt aktiviert ist
Bild: 666kb.com/…/10j0zgnh5x2io.jpg
Und so, wenn ein Untermenüpunkt aktiviert ist:
Bild: 666kb.com/…/10j0zpvqeisqo.jpg
Ich bin jetzt soweit gekommen:
page.10 {
template = FILE
template.file = fileadmin/templates/index1.html
marks.NAVI = HMENU
marks.NAVI.entryLevel = 0
marks.NAVI.1 = GMENU_LAYERS
marks.NAVI.1 {
#XY = [30.w]+12,
#Unetrmenü wird erst sichtbar, wenn aktiviert
layerStyle = position:absolute; left:0px;top:300px;width:100px;VISIBILITY:hidden;
#Abstand des Menüs von dem Punkt, an dem es aktiviert wurde
#xPosOffset = -80
topOffset = 300
leftOffset = 164
#horizontales fixiertes Menü
lockPosition = x
expAll = 1
NO {
allWrap = | |*|<img src="fileadmin/images/strich.jpg" width="1px" height="12px" alt="" /></img>||*|<img src="fileadmin/images/strich.jpg" width="1px" height="12px" alt="" /></img>|
ATagParams = class="navi"
backColor = #FFFFFF
#Breite zzgl zur Objekt-Weite und Höhe
XY = [10.w]+24, 10
10 = TEXT
10.text.field = title
10.textStyle = Verdana
10.fontsize = 12
10.fontcolor = #006699
10.offset = 10, 10
10.niceText = 0
}
}
marks.NAVI.2 = GMENU
marks.NAVI.2.wrap = |<br />
marks.NAVI.2.NO {
ATagParams = class="navi"
backColor = #FFFFFF
XY = 120, 20
10 = TEXT
10.text.field = title
10.textStyle = Verdana
10.fontsize = 12
10.fontcolor = #67554A
10.offset = 10, 10
10.niceText = 0
10.offset = 10,10
}
}
Aber schon allein, die Ausrichtung der Untermenüpunkt bekomme ich nicht hin 🙁 Geschweige denn die Balken dadrüber und dadrunter. Und auch die Schriftformatierung mag nicht. MANO *verzweifel* 😢
Hi Amelia.
Die Balken darüber und darunter hinzukriegen: entweder mit CSS oder einem alternativen Hintergrundbild - du musst einfach sehen, dass du 2 unterschiedliche ACT-Arten möchtest, von deinem Hauptmenüpunkt.
Eine Möglichkeit fällt mir gerade ein:
Du überschreibst im ACT-Status deines Submenüpunktes, die Werte des Hauptmenüpunktes betreffend Schriftfarbe und Background-Bild.
sollte so klappen.
byebye
mmhhh naja so theoretisch kann ich mir das vorstellen..
aber umsetzen ? mmhhhhh *räusper*
also so versteh ich das:
Haupttemplate: Backgroundbild mit Balken unten komplett und blaue Schrift
Template Submenüpunkte: Backgroundbild und Farbe überschreiben
Und woher weiß mein Template, welchen Menüpunkt er gerade ändern soll??? :o
ACT, NO... mehr müssen deine Menüpunkte doch nich wissen 🙂
Du hast/verwendest 4 "Styles" deiner Buttons.
- Hauptmenüpunkt an
- Hauptmenüpunkt aus
- Submenüpunkt an
- Submenüpunkt aus
Schau doch in die TypoScript Referenz !!!!!
-->>> https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Index.html > GMENU
ja ber dann überschreib ich jedes mal das komplette menü oder wie ???
also 1 haupttemplate und für jeden submenüpunkt ein extra template was das haupttemplate überschreibt !?
Zitat TypoScript Referenz (den Link poste ich dir nicht umsonst) ..
ACTIFSUB
-- boolean / (config)
-- Konfiguration für Menüelemente mit Unterseiten, die in der rootLine gefunden wurden.
IFSUB definiert beispeilsweise einen Hauptmenüpunkt der Untermenüpunkte aufweist.
Dann sollte ACTIFSUB eigentlich das Pendant sein, wenn ein Untermenüpunkt aktiviert ist. (wenn nicht, dann finde ich dieses Attribut ein wenig unnütz).
Kann dir keine Garantie geben, habs nie getestet.
bye
edit:
-----
Link zu obiger Information: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Index.html#confval-menu-tmenu-item-states - oder poste ich die Information wieder umsonst 😉
Hallo!
Danke für die Antworten! Habe 1 Problem mitlerweile gelöst. Allerdings jetzt ein zweites: Ich soll die erste Ebene jetzt statisch darstellen und die 2.Ebene als Layermenü.
Folgendes Problem: das Menü wird nicht mal angezeigt!
Geht das überhaupt, wenn die obere Ebene statisch im HTML Code steht???
Mein TS sieht so aus:
page = PAGE
page.typeNum = 0
page.config.index_enable = 1
page.10 = TEMPLATE
#lib für Text-/Grafikmenü mit automatichen Layern bei Mouseover
page.includeLibs.gmenu_layers = media/scripts/tmenu_layers.php
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 {
template = FILE
template.file = fileadmin/templates/index1.html
temp = HMENU
temp.entryLevel = 1
temp.1 = GMENU_LAYERS
temp.1 {
XY = [30.w]+12,
layerStyle = position:absolute; left:0px;top:300px;width:100px;VISIBILITY:hidden;
#Abstand des Menüs von dem Punkt, an dem es aktiviert wurde
xPosOffset = -80
topOffset = 300
leftOffset = 164
#horizontales fixiertes Menü
lockPosition = x
expAll = 1
NO {
backColor = #FFFFFF
XY = 120, 20
10 = TEXT
10.text.field = title
10.textStyle = Verdana
10.fontsize = 12
10.fontcolor = #67554A
10.offset = 10, 10
10.niceText = 0
10.offset = 10,10
}
}
}
PLEASE HELP!
Hi.
Bevor du/ich uns darin vertiefen: warum bitte wird ein "statisches" Menü gefordert???? Man kann die Hauptnavigation ja so lassen wie sie ist, dann ist sie auch statisch ;P
Desweiteren ist der Sinn eines Layermenüs ja darin, dass das Hauptlevel immer angezeigt wird, als Hauptnavigation, und die Sublevels als Unterpunkte ausfahren.
Oder ich hab deinen Post ned verstanden ..
cya
Ja so hab ich TS auch verstanden.
Der Kunde (und somit auch mein Chef) will aber die Hauptmenüpunkte statisch und die Unterpunkte übers Typo3 generiert! Also ist das meine Aufgabe, das so umzusetzten, wenns denn möglich ist!
Hab jetzt mal dieses Bsp aus der TSReferenz 1:1 eingebaut. Bekomme aber so rein garnichts angezeigt!? 😢
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {
layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden;
xPosOffset =-10
lockPosition = x
expAll=1
NO {
backColor = #cccccc
XY = [10.w]+10, 14
10 = TEXT
10.text.field = title
10.offset = 5,10
}
}
page.10.2 = GMENU
page.10.2.wrap = |<br />
page.10.2.NO {
backColor = #99cccc
XY = 120, 14
10 = TEXT
10.text.field = title
10.offset = 5,10
}
wow ..
Eine Variante:
Die Links im "harten" HTML müssten auf die Hauptmenüpunkte in deinem Typo3-Root zeigen. Diese HauptPunkte im root müssten aus Seiten bestehen, die nicht im Template/Menü vorkommen.
Aber ich bitte dich wirklich ganz feste um Eines: TU ES NICHT !! Diese Bitte vom Kunden muss gerechtfertigt sein. Wenn der Kunde die Navigation aus einem externen HTML-Code haben muss (ich kenn die Rahmenbedinungen ja nicht), ist das ein Argument, ja. Aber wenn er einfach eine Navigation aus dem HTML heraus mit Typo3 verbinden will ist das unsinnig und macht auf Dauer nur Aufwand. Wenn schon eine statische Navigation, dann ganz - aber sicher ned einen Menülevel aus HTML benutzen...
Bitte um Aufklärung - und mein Tipp ist wirklich da zu kommunizieren, denn den Sinn sehe ich überhaupt nicht.
cya
edit: du hast mit Abstand die exotischsten Menü-Fragen =x
Also das Problem ist, dass die Hauptmenüpunkte aufgrund des Layouts aus Grafiken besteht - wie auch, die Balken drüber und drunter, welche wiederum auch alle unterschiedlich lang sind...
Desweiteren, sollen die Hauptmenüpunkte nicht über das Typo3 veränderbar sein (seitens des Kunden). Sprich, wenn der Kunde Hauptmenüpunkte hinzufügt, dürfen die nicht angezeigt werden etc... Mit Untermenüpunkten kann der Kunde aber tun was er will, die sollen von Typo3 generiert werden!
Wie sollte ich das anders realisieren ??? Ich hab Null Ahnung.
Ganz schön schwer, für'n Anfänger, finde ich!? #paralyzed#
Anhang:
Wäre es nicht möglich. Das SubMenü über weiter Templates in den Unterpunkten generieren zu lassen - via entryLevel = 1 ???
PS: Was ich ganz vergessen habe:
Es muss ein Layermenü sein, weil das Subemnü über dem Inhalt liegen soll !!!
Anhang 2:
Nur mal zur Info: Ich habe das Hauptmenü und die welchselnden balken oben und unten momentan so eingebaut: Ist nicht die feine Art ich weiß, aber ich weiß es einfach (noch) nicht besser:
marks.S = IMAGE
marks.S.file = fileadmin/images/sw.jpg
marks.Su = IMAGE
marks.Su.file = fileadmin/images/s.jpg
marks.B1 = IMAGE
marks.B1.file = fileadmin/images/b1w.jpg
marks.B2 = IMAGE
marks.B2.file = fileadmin/images/b2w.jpg
marks.B3 = IMAGE
marks.B3.file = fileadmin/images/b3w.jpg
marks.B4 = IMAGE
marks.B4.file = fileadmin/images/b4w.jpg
marks.B5 = IMAGE
marks.B5.file = fileadmin/images/b5w.jpg
marks.M1 = IMAGE
marks.M1.file = fileadmin/images/menu_home.jpg
marks.M1.wrap = <a href="/Typo3/dummy-3.8.0/"> | </a>
marks.M2 = IMAGE
marks.M2.file = fileadmin/images/menu_projekte.jpg
marks.M2.wrap = <a href="/Typo3/dummy-3.8.0/?id=2"> | </a>
marks.M3 = IMAGE
marks.M3.file = fileadmin/images/menu_aktuelles.jpg
marks.M3.wrap = <a href="/Typo3/dummy-3.8.0/?id=3"> | </a>
marks.M4 = IMAGE
marks.M4.file = fileadmin/images/menu_presse.jpg
marks.M4.wrap = <a href="/Typo3/dummy-3.8.0/?id=4"> | </a>
marks.M5 = IMAGE
marks.M5.file = fileadmin/images/menu_kontakt.jpg
marks.M5.wrap = <a href="/Typo3/dummy-3.8.0/?id=5"> | </a>
marks.B1u = IMAGE
marks.B1u.file = fileadmin/images/b1.jpg
marks.B2u = IMAGE
marks.B2u.file = fileadmin/images/b2.jpg
marks.B3u = IMAGE
marks.B3u.file = fileadmin/images/b3.jpg
marks.B4u = IMAGE
marks.B4u.file = fileadmin/images/b4.jpg
marks.B5u = IMAGE
marks.B5u.file = fileadmin/images/b5.jpg
Is schon heftig, ja 🙂
Ich bin bei euch wirklich bald Freelancer, oder in der Art ..
Vorschlag 1):
Mit Typo3 kann man auch grafische Menüs machen. Per optionSplit (falls dir das was sagt) kann man alle Menüpunkte einzeln so definieren wie man will. Desweiteren ist es möglich ein GMENU zu erstellen, welches über Symbole/Bilder verfügt, und sogar keinen Text beinhaltet (der wird dann halt rausgeschossen).
Vorschlag 2):
schicke mir per PM mal Bilder, Links, damit ich den Überblick bekomme, oder auf rw@web-kultur.ch ..
Ich habe den Eindruck, im Vorfeld wurde nicht ausreichend kommuniziert, wie das umgesetzt werden soll.
(Ausserdem kann euer Kunde ja Hauptmenüpunkte einfügen, die nicht auftauchen. Mit "not-in-menu", special-Menüs, etc. lässt sich da ne Menge anstellen).
ciaoi
Mmhhh. Die Bilder vom Menü Layout hatte ich ins erste Posting gestellt! Mehr hab ich auch nicht :/
ach, ich dachte ihr seit schon weiter bzw. habt euch anders entschieden, sry.
2 Dinge:
1. Was passiert bei einem aktiven Submenüpunkt? In deinen Grafiken wird dieser fett und dominant dargestellt - wo ist der Rest?
2. Dein Hauptlevel erstellst du entweder mit CSS oder per optionSplit und einer heiden Bastelei mit den Hintergrundbildern..
Dynamisch ist es z.B. mit CSS hinzukriegen.
Ein Menüpunkt wird dann so dargestellt:
-------------------
obere braune Zeile
-------------------
Hauptmenüpunkt mit dünem Strich an der Seite
-------------------
untere weisse Zeile
-------------------
Je nachdem ob der HauptMenüpunkt an oder aus ist, fütterst du die obere und untere Zeile mit einer Klasse "line_brown" und "line_white" - als Beispiel.
Das ist lösbar mit einem Div, oder einer Tabelle - HTML halt.
bye
edit:
dein Codebeispiel entspricht aber nicht deiner Footer-Weissheit ;P
1. Achso ich vergas zu erwähnen. Also:
- Start: Hauptmenü wird angezeigt, wie oben ohne Submenü mit durchgezogenem grauen Balken darunter.
- Beim Mausover eines Hauptmenüpunktes wird das Submenü geöffnet wie im Bild 1
- Klickt man auf einen Unterpunkt verschwindet das Submenü und dort erscheint der Inhalt beginnend mit der Überschrift, wie in Bild 2
(Erkennbar ist der aktive Menüpunkt durch die andere Farbe)
2.
dein Codebeispiel entspricht aber nicht deiner Footer-Weissheit ;P
Wie meinen ??? "Footerweisheit" ???
Ich weiß, es ist nicht professionell umgesetzt sofern. Das muss es aber auch nicht zwingend (so Chef) 🙂 Es soll nur erstmal funktionieren - egal wie !!!
PS: Per CSS und div-Containern - das war mein Vorschlag Nr 1. So hatte ich begonnen. Das fand Chef nicht so toll und meinte, ich soll mir nicht so viel Arbeit machen - mit Dingen, die ich noch nicht kann und das ganze gefälligst mit Tabellen machen!!!
PPS: optionSplit ist schick und kenn ich n bissl :o) Aber wie ist das gemeint???
first1 || first2 |*| middle1 || middle2 || middle3 |*| last1 || last2
wer ist first1 und wer ist first2 ???
zu 2.
Weissheit, Weisheit - macht beides hell 😉
Zu deinem Problem:
Ich glaube für deine Skills (das jetzt nicht falsch verstehen) ist es am besten, wirklich für jeden HauptMenüpunkt einfach das GMENU_LAYER zu verwenden, dass du ja schon begonnen hast. Dann besteht ein Menüpunkt aus einem Bild, fertig. Gibt keine Bastelei und keine Probleme in anderen Browsern (kann bei div und table hoch-drei-verschachtelungen schnell passieren).
Dein Hintergrundbild-Problem kann man austricksen. Deine Hauptmenüpunkte sind so minim verschieden breit, dass ein einzelnes Bild (z.b. braun) für alle reichen sollte. Ob ein Menüpunkt mit deiner Linie im Hintergrund nun 3px mehr oder weniger aufweist, sollte nicht auffallen. Probier es einfach aus. Den Text darin zu formatieren sollte ja kein Problem sein, oder? Nur weil du Formatierungsprobleme erwähnt hattest. Evtl. ist dein Code an der Stelle falsch.
Du musst dich darauf konzentrieren, dass dein Layermenü nun erstmal alle Hauptmenüpunkte ausgibt, und die Subpunkte ausfahren, dann sehen wir weiter. (schick mir per PM doch den Link zu eurem Frontend, dann kann ich auch mal draufgucken).
Wie dein Kunde dann Hauptmenüpunkte erstellt die nicht angezeigt werden ist sekundär.
Danke schonmal für die Deine Unterstützung!!!
Hintergrundbild? Was meinst Du? Die Balken ?
Und: Ich "darf" Pixelgenau arbeiten!!! :o) Also nix von wegen, das fällt doch nicht auf! 🙁
Kann Dir keinen Zugang geben, da wir local arbeiten, bis zur Fertigstellung! Sorry!
PS: Wieso bekomme ich hier eigentlich absolut nichts angezeigt ???
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 = HMENU
page.10.1 = GMENU_LAYERS
page.10.1 {
layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden;
xPosOffset =-10
lockPosition = x
expAll=1
NO {
backColor = #cccccc
XY = [10.w]+10, 14
10 = TEXT
10.text.field = title
10.offset = 5,10
}
}
page.10.2 = GMENU
page.10.2.wrap = |
page.10.2.NO {
backColor = #99cccc
XY = 120, 14
10 = TEXT
10.text.field = title
10.offset = 5,10
}
@Hintergrund und Pixelgenau:
Versuche es einfach ;P Du verwendest ein Bild als GMENU-Hintergrund, wo dann dein Text drüberkommt. Dann siehst du immernoch, ob das auffällt, oder nicht (würde mich nämlich wundern). Verwende von der Grösse her ein Mittleres deiner Bilder(ohne den Text darin natürlich). Mein Anliegen ist simpel: jedesmal wenn ein Menüpunkt verändert wird oder hinzukommt, muss TypoScript angepasst werden - das kann's nich sein .. Also so dynamisch wie möglich machen.
Zu deinem TypoScript.
Also bitte einmal ganz, bzw. was alles mit Markern und Menü zu tun hat, ist etwas mühsam. Aber nicht immer schnippeln o.O
@nichts angezeigt: wird dein Marker im HTML-Code ersetzt im Frontend? Schau im Quellcode nach.
Also hier erstmal komplett ohne ohne nochtfunktionierendes LayerMenü:
page = PAGE
page.typeNum = 0
page.config.index_enable = 1
page.10 = TEMPLATE
page.stylesheet = fileadmin/css/style.css
#lib für Text-/Grafikmenü mit automatichen Layern bei Mouseover
page.includeLibs.gmenu_layers = media/scripts/tmenu_layers.php
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
page.10 {
template = FILE
template.file = fileadmin/templates/index1.html
##### schwarz/weiß Balken (aktiv/inaktiv) #####
##### überschreiben per Subtemplates braunen Balken ######
marks.S = IMAGE
marks.S.file = fileadmin/images/sw.jpg
marks.Su = IMAGE
marks.Su.file = fileadmin/images/s.jpg
##### die Numerierung entspricht den einzlenen Menüpunkten #####
##### B steht für Balken und M für Menü #####
##### weißer Balken oben #####
marks.B1 = IMAGE
marks.B1.file = fileadmin/images/b1w.jpg
marks.B2 = IMAGE
marks.B2.file = fileadmin/images/b2w.jpg
marks.B3 = IMAGE
marks.B3.file = fileadmin/images/b3w.jpg
marks.B4 = IMAGE
marks.B4.file = fileadmin/images/b4w.jpg
marks.B5 = IMAGE
marks.B5.file = fileadmin/images/b5w.jpg
##### Menüpunkte und Striche dazwischen #####
marks.M1 = IMAGE
marks.M1.file = fileadmin/images/menu_ecutio.jpg
marks.M1.wrap = <a href="/Typo3/dummy-3.8.0/"> | </a>
marks.M2 = IMAGE
marks.M2.file = fileadmin/images/menu_projekte.jpg
marks.M2.wrap = <a href="/Typo3/dummy-3.8.0/?id=2"> | </a>
marks.M3 = IMAGE
marks.M3.file = fileadmin/images/menu_aktuelles.jpg
marks.M3.wrap = <a href="/Typo3/dummy-3.8.0/?id=3"> | </a>
marks.M4 = IMAGE
marks.M4.file = fileadmin/images/menu_presse.jpg
marks.M4.wrap = <a href="/Typo3/dummy-3.8.0/?id=4"> | </a>
marks.M5 = IMAGE
marks.M5.file = fileadmin/images/menu_kontakt.jpg
marks.M5.wrap = <a href="/Typo3/dummy-3.8.0/?id=5"> | </a>
##### braune Balken unten #####
marks.B1u = IMAGE
marks.B1u.file = fileadmin/images/b1.jpg
marks.B2u = IMAGE
marks.B2u.file = fileadmin/images/b2.jpg
marks.B3u = IMAGE
marks.B3u.file = fileadmin/images/b3.jpg
marks.B4u = IMAGE
marks.B4u.file = fileadmin/images/b4.jpg
marks.B5u = IMAGE
marks.B5u.file = fileadmin/images/b5.jpg
##### Inhalt #####
marks.CONTENT = CONTENT
marks.CONTENT = tt_content
marks.CONTENT < styles.content.get
}
Das mit dem Hintergrund kann ich so wirklich nicht machen, da der Abstand zwischen den Rändern immer gleich sein soll! Und das bekomm ich so nicht hin, da ja schon allein "presse" und "aktuelles" sehr verschieden lang sind!
Gegen dynamisch hab ich ncihts einzuwenden, wäre mir persönlich auch am liebsten! Wie wäre es mit der Idee: Das ganze mit den oben und unten Balken und weiß überschreiben so lassen (per Tabellen und Markern und Subtemplates) aber in Backgrounds ändern und die einzelnen Menüpunkte per Layermenü und optionSplit dort reinmanövrieren. Würde das gehen ???
Könnte man also die als Background integrieren ???
marks.B1 = IMAGE
marks.B1.file = fileadmin/images/b1w.jpg
Meine Vorstellung:
marks.B1 = IMAGE
backgroundImage = marks.B1.file = fileadmin/images/b1w.jpg
Mir ist noch ein alter CSS-Trick eingefallen: dynamisch breite und hohe Buttons/Linien lassen sich mit einem 1-3 px-breiten Bild erzielen, das in der Breite (y-Achse) wiederholt wird. Wenn dein Menüpunkt ein durchsichtiges GMENU-Bild als Text/Link bekommt, und der Hintergrund eben eine CSS-Klasse darstellt, deren Hintergrund in der Breite wiederholt wird, dann ist das Problem gelöst. Dieses wiederholte, Minibild ist so hoch wie ein Menüpunkt (z.B. 50) und eben 1-3 px breit.
Also so:
<table>
<tr>
<td class="myMenu-ACT" height="50" width=""><img src="generiertesbild1.png" alt="" /></td>
<td class="myMenu-NO" height="50" width=""><img src="generiertesbild2.png" alt="" /></td>
<td class="myMenu-NO" height="50" width=""><img src="generiertesbild3.png" alt="" /></td>
</tr>
</table>
Hoffe, damit kannst du was anfangen. Durch width="" wird dein Menüpunkt gerade so breit, wie das Bild Platz braucht. Und hinter dem durchsichtigen "img" wird durch die Klasse das Hintergrundbild in der y-Achse wiederholt