Hab ich grad mit folgendem Code probiert.
ul#nav li {
position: relative;
list-style: none;
background: transparent url(pfeil.gif) left center no-repeat;
Problem ist jetzt dass nun die Menüs über den Pfeil liegen und nicht dahinter.
[/img]
Menüs basierend auf CSS
Hallo, erstmal vielen Dank für dieses anschauliche Beispiel! Nachdem ich eine Woche lang vergeblich versucht hab, das ypSlideOut-Menü in meinem Projekt ans Laufen zu kriegen, war dieser Thread hier Balsam für meine geschundene Seele! 😉
Das Beispiel funktionierte anfangs wunderbar. Allerdings wollte ich die erste Ebene gerne durch ein GMENU ersetzen, seitdem klappt es nicht mehr und der IE meldet den JScriptfehler: 'document.getElementById(...)' ist Null oder kein Objekt.
Außerdem werden Rahmen um die Buttons angezeigt, obwohl ich eigentlich noBlur =1 gesetzt habe.
Da ich noch frischer T3-Einsteiger bin, hab ich sicher irgendeinen dämlichen Fehler gemacht. Ich würde mich daher über jeden Tipp freuen, an welcher Stelle ich suchen muss. :o
Mein Script (eingeklammert hinter 10.marks des page-Objekts):
#Grafikmenü oben
MENU_OBEN = HMENU
MENU_OBEN {
special = directory
special.value = 30
entryLevel = 0
expAll = 1
1 = GMENU
1.NO = 1
1.NO {
XY = 200, 30
backColor = #111111
transparentColor = #111111
maxWidth = 200
maxHeight = 30
noBlur = 1
#Menütext 1. Ebene rendern
10 = TEXT
10.text.field = title
10.align = middle
10.textMaxLength = 20
10.fontColor = #000000
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 18
10.niceText = 0
10.offset = 20, 20
#Schatten auf Ebene 5 kopieren
5 < .10
5 {
offset = 19, 21
fontColor = #555555
}
}
1.RO < .1.NO
1.RO.10.fontColor = #666666
2 = TMENU
2 {
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
3 < .2
3.wrap = <ul>|</ul>
4 < .3
}
Vielen Dank für jeden Hinweis!
Hallo just2b !!!
Ich habe dieses horizontale menu auch auf meiner Seite eingebunden und muss Dir an dieser Stelle ein großes Lob und meinen besonderen Dank aussprechen.
Was mich aber ein wenig zum staunen gebracht hat ist, dass in Opera 8.5 (ich habe keine andere OperaVersion zum testen) ein horizontaler Scrollbalken angezeigt wird, der sehr lang ist. Mit FF und ausnahmsweise auch dem IE ist das nicht der Fall. Wieso ist das so bzw. gibt es eine Möglichkeit dies auszuschalten???
liebe Grüße und nochmals "DANKE" !!!
kleiner Onkel schriebIch habe dieses horizontale menu auch auf meiner Seite eingebunden und muss Dir an dieser Stelle ein großes Lob und meinen besonderen Dank aussprechen.
Das freut mich!
Gibts wo eine URL?, vielleicht kann ich bzgl des Problems helfen
georg
Hallo Georg,
ich hab mal deine Beispiele kurz überflogen. Und natürlich Ehre wem Ehre gebührt ein dickes Lob und jede Menge Anerkennung.
Das Problem mit dem horizontalen Scrollbalken kommt imo daher, dass dein Menü immer nach rechts aufgeht, d.h. es aus dem Bildschirmrand läuft.
Ich denke mal, dass das Javascript angepasst werden muss, damit es ab einem gewissen Punkt nach links aufgeht.
Gruß
Daniel
Hallo Zusammen,
ich habe mich auch mal an das vertikale Menü gewagt und (habe es nicht anders erwartet) klappt es bei mir leider nicht.
Mein Problem ist, dass die Untermenüs entweder gar nicht aufklappen oder nur nach unten aufklappen und nicht wie ich es gerne möchte, nach rechts aufklappen...
Kann mir da jemand bitte helfen?!
Ich sag schon mal DANKE!
LG,katih
Habe euch hier mal mein TS gepostet
page.includeCSS {
file1 = fileadmin/template/main.css
file2 = fileadmin/template/navigation.css
}
page = PAGE
page {
typeNum = 0
# Allgemeine Seiteneigenschaften setzen
bodyTag = <topmargin="1" leftmargin="1"><div align="center">
meta.AUTHOR=Katja Hullesch
meta.DESCRIPTION=artifex,handwerk,wohnen,leben
stylesheet=fileadmin/style.css
# Designvorlage integrieren
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/Artifex_02.htm
# Inhalt ausgeben
INHALT = CONTENT
INHALT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}
10.marks {
# Den Platzhalter ###KLICKPFAD### erstellen
KLICKPFAD = HMENU
KLICKPFAD {
wrap = Sie befinden sich hier: |
special = rootline
special.range = 2|-1
1 = TMENU
1.NO = 1
1.NO.linkWrap = | /
}
# Den Platzhalter ###INHALT### ausgeben
INHALT = CONTENT
INHALT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}
#Den Platzhalter ###MENU_UNTEN###erstellen
MENU_UNTEN = HMENU
MENU_UNTEN {
special = directory
special.value = 223
1 = TMENU
1.NO = 1
1.NO.linkWrap = | | |*| | | |*|
}
# Inhalt ausgeben
INHALT = CONTENT
INHALT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}
# Den Platzhalter ###MENU_OBEN### erstellen
MENU_OBEN = HMENU
MENU_OBEN {
special = directory
special.value = 224
entryLevel = 0
1 = GMENU
1.NO = 1
1.NO {
wrap = |<br />
XY = 178, 40+[16.h]
backColor = #FFCC99
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/verdana.ttf
10.fontSize = 14
10.niceText = 1
10.offset = 50, 16
# Hilfsebene zur Berechnung der Höhe der Menüpunkte
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 22
16.offset = 1000,1000
}
2 = TMENU
2 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
3 < .2
3.wrap = <ul>|</ul>
4 < .3
5 < .4
}
}
}
Hallo Georg!
Da muß ich mich auch auf jeden Fall herzlich bedanken. Genau das was ich lange gesucht, aber nie gefunden habe. Und jetzt hat mir der Zufall zu Deinem super Eintrag und einer klasse Lösung verholfen.
Top - vielen Dank!
Gruß Robert
Hallo Robert,
vielen Dank für dein Feedback! Würd mich freuen wenn du mir die URL zu der Seite postest wo du das Menü eingebaut hast
lg georg
Hallo Georg,
dein Menü werde ich sicher mal bei Gelegenheit verwenden und dir die
URL dazu schicken - auf jeden Fall schon mal vielen Dank für deine
Veröffentlichung, nur davon lebt ja die Community.
Eigentlich muss das aber auch ganz ohne JS gehen, so wie hier
http://www.cssplay.co.uk/menus/final_drop.html
beschrieben - wollte ich schon immer mal in Typo umsetzen, nur leider
bisher keine Zeit gehabt.
VG
Falko
Hey, vielen Dank für diese Super-Lösung, die einwandfrei funktioniert
Die Lösung stimmt mich recht positiv! Allerdings habe ich Probleme mit der Größe der ersten Menuepunkte (immer gleich, da das Element #nav ul nicht genau formatiert werden kann bzw. ich zu doof bin)
Wäre es möglich #nav ul {} so einzusetzen, daß jeder einzelne Menuepunkt eine flexible Größe hätte ? BSP: das Wort "Affenhaus" hätte die Größe 100px , das Wort "Kontakt" allerdings nur 60px.
Bin für jede Lösung dankbar!
AndyKöln schriebWäre es möglich #nav ul {} so einzusetzen, daß jeder einzelne Menuepunkt eine flexible Größe hätte ? BSP: das Wort "Affenhaus" hätte die Größe 100px , das Wort "Kontakt" allerdings nur 60px.
IMHO nicht, wiel du ja ein display:block brauchst
Huhu, nochmal ich - gibt es ne Möglichkeit, das "standartmäßige" t_menu layer zu umgehen? Der Source-Code ist viel zu lang(bei einer sehr tiefen Navigation). Hat jemand ne Lösung? Gibt es hier nen Ansatzpunkt? Neben dem CSS basierten Layout, wäre doch bestimmt noch was anderes denkbar?
AndyKöln schriebHuhu, nochmal ich - gibt es ne Möglichkeit, das "standartmäßige" t_menu layer zu umgehen? Der Source-Code ist viel zu lang(bei einer sehr tiefen Navigation). Hat jemand ne Lösung? Gibt es hier nen Ansatzpunkt? Neben dem CSS basierten Layout, wäre doch bestimmt noch was anderes denkbar?
und zwar was? vorschläge immer willkommen
Ich habe versucht das Beispiel wie nachfolgend einzubinden !
Was mache ich falsch ?
Habe den TS-Code im Setup Bereich wie folgt eingebunden:
1.
page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/Template-4.html
workonSubpart = DOKUMENT
marks.CONTENT < styles.content.get
}
#page.stylesheet = fileadmin/styles/styles-ie.css
page.stylesheet = fileadmin/styles/horizontal.css
page.includeLibs.gmenu_layers = fileadmin/scripts/tmenu_layers.php
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/horizontal.js"></script>
page.10.marks.PRIN = HMENU
page.10.marks.PRIN {
special = directory
special.value = 850
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
2. Im HTML-Template soll der Marker ###PRIN### ersetzt werden.
Wird auch, aber es erscheint kein Layermenü
3. Die Dateien horizontal.js und horizontal.css an die entsprechenden Stellen kopiert und die Rechte per chown angepasst.
Kann mir jemand einen Tip geben ?
Ich denke ich binde die Header Darten falsch ein ??
Zeile 18,19,20 (der Zeilenumbruch bei Zeile 20 existiert nicht Forumsoftware bricht es um)
Danke und Ciao
Kazi
probier mal
page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="foo.js"></script>
}
Hallo Just2B,
danke für deine Hilfe :-)
Ich habe meinen Code auf dein anraten auf den Zeilen (10,11,12) wie nachfolgend abgeändert. Jedoch erscheint das Layermenü immer noch nicht wofür steht eigentlich nochmla diese 850 ?
page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/Template-4.html
workonSubpart = DOKUMENT
marks.CONTENT < styles.content.get
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/scripts/horizontal.js"></script>
}
#page.stylesheet = fileadmin/styles/styles-ie.css
page.stylesheet = fileadmin/styles/horizontal.css
#page.includeLibs.gmenu_layers = fileadmin/scripts/tmenu_layers.php
page.10.marks.PRIN = HMENU
page.10.marks.PRIN {
special = directory
special.value = 850
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
Just2B,
danke nochmal für deine Hilfe .
Problem gelöst !!! #giggle# #giggle# #giggle#
Lag am special.value.
Die 850 musste ich durch die Root ID bei mir nämlich 16 ersetzen.
Anfängerfehler ;-)
Ciao
Kazim
Hallo Leute,
wie bereits in meinen letzten Posts erwähnt habe ich es mit meinem Code geshcafft das CSS Menü einzubinden. Jedoch funktioniert es nur auf dem Firefox, nicht aber im IE Version 6.0.28.
PS: Javascript ist eingeschaltet.
kazi schriebJedoch funktioniert es nur auf dem Firefox, nicht aber im IE Version 6.0.28.
was ist es? wenn die 2.ebene nicht erscheint im IE? ist das JS auch richtig eingebunden, quellcode => stimmt der pfad
georg