Dropdown/Pulldown Navigation wie auf www.adobe.de

daffyduck · 16. Oktober 2005 22:26

Hi Guys/Girls

Vergeblich versuche ich seit Stunden die Navigation wie auf http://www.adobe.de in Typo3 3.8 einzurichten. Auch das längere Suchen und noch mehr Lesen hier in den Foren, machte mich auch nicht glücklicher. Ich denke es wird eine simple Lösung für mein Problem geben. Momentan sehe ich aber den Wald vor lauter Bäume nicht mehr...

Zur Navigation:
Diese sollte wie bei Adobe horizontal angelegt sein. Beim darüberfahren mit dem Mauszeiger sollen die Subnavigationen erscheinen.

Die Hauptpunkte (Produkte, Lösungen, Support...) sollten per Gifbuilder erstellt werden.
Die Subpunkte können auch Bilder sein, müssen aber nicht.
Im Webseiten-Template habe ich bereits einen Platzthalter ###NAVIGATION### eingerichtet.

Kann mann das ganze im SETUP mit HMENU/GMENU realiesieren oder brauch man da ein Extension?
Wenn jemand so etwas schon mal realiesiert hat, bitte postet es hier wie Ihr dies gelöst habt.

Herzlichen Dank im voraus
Gruss Daffy

just2b · 16. Oktober 2005 22:37

Hi Daffy,

das Stichwort lautet wohl GMENU_LAYER bzw TMENU_LAYER

viel erfolg
georg

daffyduck · 18. Oktober 2005 21:59

Ja genau das ist es o.O

Ich habe mich hier im Forum durch viel Seiten druchgekämpft und das Menü einigermassen hingekriegt.
Momentan hängts aber wieder mal.

Bild: diethelmdesign.ch/…/problem.jpg

Problem 1:
Wenn ich mit der Maus über die Navigation fahre, erscheint die Subnavigation (sh Screenshot). Diese aber verschiebt sich immmer mit der Bewegung der Maus nach oben und unten.

Wie kann ich diese Fixieren?

Problem 2:
Ich möchte die Hauptnavigationspunkte mit einer senkrechten weissen Linie (1px) trennen.
Wie baue ich so etwas ein?

Hier mein Setup:

seite = PAGE
seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.stylesheet = fileadmin/design/style.css
seite.bodyTag = <body bgcolor="DEEBF4">
seite.10 = TEMPLATE
seite.10 {
            template = FILE
            template.file = fileadmin/design/designtemplate2.html
            workOnSubpart = DOKUMENT

# Hier wird das Menu konfiguriert
page.includeLibs.gmenu_layers = fileadmin/design/gmenu_layers.php
marks.MENU = HMENU
marks.MENU.entryLevel = 0
marks.MENU.1 = GMENU_LAYERS
marks.MENU.1 {
XY = [10.w]+20,20
layerStyle = position:absolute;left:0px;top:30px;width:10px;VISIBILITY:hidden; 
xPosOffset =-295
yPosOffset = -10
lockPosition = x
expAll=1
NO {
backColor = #787878
XY = [10.w]+20,30
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/design/lithospro-bold.otf
10.fontColor = #ffffff
10.fontSize = 7.5
10.offset = 15,26
}
}

marks.MENU.2 = GMENU
marks.MENU.2.wrap = |<br />
marks.MENU.2.NO {
backColor = #99cccc
XY = 120, 15
10 = TEXT
10.text.field = title
10.offset = 5,10
} 

# Hier wird der Content für die Seite geladen
marks.TEXT < styles.content.get
}
}

Herzlichen Dank für Eure Hilfe
Gruss Daffy

mavo · 19. Oktober 2005 08:29

Hallo,

schau mal hier:
#15065

daffyduck · 22. Oktober 2005 14:33

Sorry mavo, so wies dort beschrieben ist würd es schon sehr schön aussen, doch bei mir will es einfach nicht funktioniren.
Die vielen postings dort (15 Seiten) zeigen auch nicht gerade, dass es einfach ist so etwas zu ralisieren.

Gibt es wirklich keine möglichkeit die Subnavigation in der X und Y Achse zu fixieren? Ich brauche kein auf und zuscrollen, es soll einfach unter dem entsprecheden
Navigationspunkt fixiert aufgehen.

Bitte helft mir. 😢

daffyduck · 22. Oktober 2005 15:01

Momentan sieht meine Naviagtionsdartsellung so aus:
Bild: people.freenet.de/…/Menu1071866d3a0.jpg

Der Vorteil ist, sie ist jetzt fix. Nur bringe ich diese nicht direkt unter den zB. Mitgliederbereich.
Wenn ich die Zeile "yPosOffset =-10" eingebe ist zwar die Subnavi am richtigen Ort aber nicht mehr fixiert.

Was mache ich falsch?

daffyduck · 22. Oktober 2005 16:42

😃 Ich beanworte meine Frage(n) gleich selber 😉

Korrekt possitioniert sieht es so aus:
Bild: people.freenet.de/…/Menu210718be91e0.jpg

Setup:

seite = PAGE
seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.stylesheet = fileadmin/design/style.css
seite.bodyTag = <body bgcolor="DEEBF4">
seite.10 = TEMPLATE
seite.10 {
            template = FILE
            template.file = fileadmin/design/designtemplate2.html
            workOnSubpart = DOKUMENT

# Hier wird das Menu konfiguriert
page.includeLibs.gmenu_layers = fileadmin/design/gmenu_layers.php
marks.MENU = HMENU
marks.MENU.entryLevel = 0
marks.MENU.1 = GMENU_LAYERS
marks.MENU.1 {
  layerStyle = position:absolute;left:0px;top:238px;width:10px;VISIBILITY:hidden;
  xPosOffset =-290
  lockPosition = x
  expAll=1
  NO {
    backColor = #787878
    XY = [10.w]+20,30
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 15,26
  }
}
marks.MENU.2 = GMENU
marks.MENU.2.wrap = |<br />
marks.MENU.2.NO {
  backColor = #99cccc
  XY = 120, 14
  10 = TEXT
  10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
  10.offset = 5,10
}

Um die position genau zu bestimmen muss man die folgenden zwei Eintraäge verändern:

  layerStyle = position:absolute;left:0px;top:238px;width:10px;VISIBILITY:hidden;
  xPosOffset =-290

Auf zB. (obere Zeile = y-Axhse / untere Zeile = x-Achse:

  layerStyle = position:absolute;left:0px;top:100px;width:10px;VISIBILITY:hidden;
  xPosOffset =-100

Das schöne am ganzen ist, man braucht keine JAVA-Sripts 🙂

Gruss Daffy

daffyduck · 23. Oktober 2005 12:51

So... nachdem ich nun das Menu für ein linksliegendes Templade erstellt habe, versuche ich mich mal an einem Zentrierten.

Dies klappt auch schon gut mit dem folgenden CODE:

seite = PAGE
seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.stylesheet = fileadmin/design/style.css
seite.bodyTag = <body bgcolor="DEEBF4">
seite.10 = TEMPLATE
seite.10 {
            template = FILE
            template.file = fileadmin/design/designtemplate2.html
            workOnSubpart = DOKUMENT

# Hier wird das Menu konfiguriert
page.includeLibs.gmenu_layers = fileadmin/design/gmenu_layers.php

marks.MENU = HMENU
marks.MENU.1 = TMENU_LAYERS
marks.MENU.1 {
    VISIBILITY:hidden;
    lockPosition = x
    relativeToParentLayer=1
    relativeToTriggerItem=1
    topOffset=22
    leftOffset=0
    hideMenuWhenNotOver = 10
    hideMenuTimer = 70
    expAll=1
    wrap = <table cellspacing="0" cellpadding="0"><tr><td width="1"></td> | </table>
    NO.allWrap =  <td><div class="nav1"> | </div></td>
    ACT = 1
    ACT.allWrap = <td><div class="nav1_act"> | </div></td>
}
marks.MENU.2 = TMENU_LAYERS
marks.MENU.2 {
    VISIBILITY:hidden;
    lockPosition = x
    relativeToParentLayer=1
    relativeToTriggerItem=1
    hideMenuWhenNotOver=1
    wrap = <table cellspacing="0" cellpadding="0"><tr> | </table>
    NO.allWrap =  <tr><td><div class="nav2"> | </div></td></tr>
    ACT = 1
    ACT.allWrap = <tr><td><div class="nav2_act"> | </div></td></tr>
}

Nun möchte ich aber das ganze nicht mit Textlinks sonder mit Bildlinks (gmenu_layers).
Am besten wäre es, wenn ich den Bildcode aus dem linksliegenden Templade übernehmen könnte:

backColor = #787878
XY = [10.w]+20,30
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/design/lithospro-bold.otf
10.fontColor = #ffffff
10.fontSize = 7.5
10.offset = 15,26

Nur wie baue ich den am einfachsten ein?
Kann mir damit jemand helfen?

Gruss Daffy

daffyduck · 23. Oktober 2005 13:37

Ich habe herausgefunden das ich

    NO.allWrap =  <td><div class="nav1"> | </div></td>

Umscreiben muss in

NO {
    Wrap = <td>|</td>
    backColor = #787878
    XY = [10.w]+20,30
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 15,26
}

Das Problem ist nur, dass die Buttons jetzt nicht mehr nebeneinander sondern untereinander dargestellt werden. Was ich auch im CODE verändere, es passiert nichts.

Bis hier hin gings ja noch einigermassen, doch jetzt blick ich nicht mehr durch.
Bitte helft mir :o

Hier noch der aktuelle CODE:

seite = PAGE
seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.stylesheet = fileadmin/design/style.css
seite.bodyTag = <body bgcolor="DEEBF4">
seite.10 = TEMPLATE
seite.10 {
            template = FILE
            template.file = fileadmin/design/designtemplate2.html
            workOnSubpart = DOKUMENT

# Hier wird das Menu konfiguriert
page.includeLibs.gmenu_layers = fileadmin/design/gmenu_layers.php

marks.MENU = HMENU
marks.MENU.1 = GMENU_LAYERS
marks.MENU.1 {
    VISIBILITY:hidden;
    lockPosition = x
    relativeToParentLayer=1
    relativeToTriggerItem=1
    topOffset=22
    leftOffset=0
    hideMenuWhenNotOver = 10
    hideMenuTimer = 70
    expAll=1
    wrap =<table cellspacing="0" cellpadding="0"><tr><td width="1"></td> | </table>

NO {
    Wrap = <td>|</td>
    backColor = #787878
    XY = [10.w]+20,30
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 15,26
}
    ACT = 1
    ACT.allWrap = <td><div class="nav1_act"> | </div></td>
}
marks.MENU.2 = TMENU_LAYERS
marks.MENU.2 {
    VISIBILITY:hidden;
    lockPosition = x
    relativeToParentLayer=1
    relativeToTriggerItem=1
    hideMenuWhenNotOver=1
    wrap = <table cellspacing="0" cellpadding="0"><tr> | </table>
    NO.allWrap =  <tr><td><div class="nav2"> | </div></td></tr>
    ACT = 1
    ACT.allWrap = <tr><td><div class="nav2_act"> | </div></td></tr>
}

daffyduck · 24. Oktober 2005 12:45

😃 😃 😃 Geschaft!!! 😃 😃 😃
Dies war für meine Verhältnisse ein gewaltiger Fortschritt 😉

Zusätzlich habe ich noch den Trenner zwischen den einzelnen Navigationspunkt als GIF eingebaut.
Wenn ein Menüpunkt ausgewählt wird bleibt dieser Dunkelgrau hinterlegt.

Den Mouseover-Effekt könnt Ihr natürlich auch noch einbauen. Bei meinem Projekt habe ich ihn weggelassen da sowieso immer die Subnavigation bei jedem Menüpunkt aufklappt (ausser bei Home).

Und zueltzt: Vergesst nicht den Marker ###MENU### in Eurem Template einzubinden.

Viel Spass damit 😃
Gruss Daffy

Bild: people.freenet.de/…/Menue_fertig1072230f62a.jpg

Hier das dazugehörige SETUP:

seite = PAGE
seite.typeNum = 0
seite.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
seite.stylesheet = fileadmin/design/style.css
seite.bodyTag = <body bgcolor="DEEBF4">
seite.10 = TEMPLATE
seite.10 {
            template = FILE
            template.file = fileadmin/design/designtemplate.html
            workOnSubpart = DOKUMENT

# Hier wird das Menu konfiguriert
page.includeLibs.gmenu_layers = fileadmin/design/gmenu_layers.php


marks.MENU = HMENU
marks.MENU.1 = GMENU_LAYERS
marks.MENU.1 {
    VISIBILITY:hidden;
    lockPosition = x
    relativeToParentLayer=1
    relativeToTriggerItem=1
    topOffset=32
    leftOffset=0
    hideMenuWhenNotOver = 10
    hideMenuTimer = 70
    expAll=1
    wrap = <table cellspacing="0" cellpadding="0"><tr> | </table>

NO {
    allWrap = <td> | </td><td valign="bottom"><img src="fileadmin/design/bilder/trennlinie.gif" height="31" alt="" /></td><td> |*| | </td><td valign="bottom"><img src="fileadmin/design/bilder/trennlinie.gif" height="31" alt="" /></td><td>  |*| | </td>
    backColor = #787878
    XY = [10.w]+20,30
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 10,26
}
ACT = 1
ACT {
    allWrap = <td> | </td><td valign="bottom"><img src="fileadmin/design/bilder/trennlinie.gif" height="31" alt="" /></td><td> |*| | </td><td valign="bottom"><img src="fileadmin/design/bilder/trennlinie.gif" height="31" alt="" /></td><td>  |*| | </td>
    backColor = #505050
    XY = [10.w]+20,30
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 10,26
}

}
marks.MENU.2 = GMENU_LAYERS
marks.MENU.2 {
    VISIBILITY:hidden;
    lockPosition = x
    relativeToParentLayer=1
    relativeToTriggerItem=1
    hideMenuWhenNotOver=1
    wrap = | 

NO {
    allWrap = <td> | </td>
    backColor = #999999
    XY = 150,20
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 10,13
}
ACT = 1
ACT {
    allWrap = <td> | </td>
    backColor = #505050
    XY = 150,20
    10 = TEXT
    10.text.field = title
    10.fontFile = fileadmin/design/lithospro-bold.otf
    10.fontColor = #ffffff
    10.fontSize = 7.5
    10.offset = 10,13
}
} 
      marks.INHALT = CONTENT 
      marks.INHALT { 
         table = tt_content 
         select.orderBy = sorting 
         select.where = colPos = 0 
      }
      marks.RECHTS = CONTENT 
      marks.RECHTS { 
         table = tt_content 
         select.orderBy = sorting 
         select.where = colPos = 1 
      }
}