Zum Inhalt springen

Menüs basierend auf CSS

Erstellt am 7. März 2006 · 136 Antworten · letzte Antwort am 16. November 2006 · Seite 1 von 7

Tags: Frage

markus.​l ·

Mega großes LOB!

Danke Dir für das tolle Beispiel. Ich ärgere mich nämlich auch seit ein paar Tagen über den Berg an Java Script Code welchen TMENU_Layers in die Seiten haut.

Tolle Sache von Dir, dank solcher Beiträge engagiert man sich noch lieber in so einem Forum.

Viele Grüße

Markus

fantriXx ·

Hi,

ich würde dieses Menü auch gerne in meiner Seiter einbauen nur weiss ich leider nicht 🙁 Wäre nett wenn mir einer erklären kann wie man die Dateien:

vertikal_CSS.css
vertikal_JS.js

in meiner Seite einbinden kann ?

schon mal mal danke im voraus.

just2b ·

mit LESEN, im 1. Posting steht wie man JS einbinden und CSS findet man auch genug, zB so

	page.includeCSS {
		file1 = fileadmin/template/main.css
		file2 = fileadmin/template/navigation.css
	}

georg

fantriXx ·

Ist ja Nett, nur bi nein Anfänger in Sachen Typo3 und weiss nicht wo und wie ich das alls mache, du müsstest mir das schon bischen detalierter erklären würdest ?!
Muss ich das in mein Templater einbinden oder wie ?

Danke im voraus.

fantriXx ·

Hmm ja gut ok und wo genau ?! :o
Muss das in die "Constants" oder in die "Include static" oder wie ?

Sorry, aber um was zu lernen muss man was Fragen ...

just2b ·
fantriXx schrieb

Sorry, aber um was zu lernen muss man was Fragen

Man kann es aber auch selbst versuchen, bzw Dokus, wie diese hier lesen, um das Konzept von TYPO3 bzw TS verstehen zu lernen

nicht böse sein
lg georg

fantriXx ·

Klar lese ich Dokumentationen ich bin gerade beim Buch von Galileo Computing "Typo3 Das Handbuch für Entwickler" und bin fleißig am lesen und die Grundlagen habe ich auch shcon durch und kenne mich schon mit dem Programm einiger maßen aus. Nur wollte ich mich mal an sowelche Sachen wie Script wagen und bin in einem Fremden Gebiet und deswegen diese Fragen.

jnreutel ·

Hi just2b,

Dein HOW-TO ist echt klasse und funktioniert auch spitzenmäßig. Eine kurze Frage hätte ich noch: Was muss ich machen damit beim vertikalen Menü Aufzählungszeichen erscheinen oder wo muss dies in der CSS-Datei eingefügt werden. (<ul type="square">)

just2b ·

Hi,

jnreutel schrieb

Was muss ich machen damit beim vertikalen Menü Aufzählungszeichen erscheinen oder wo muss dies in der CSS-Datei eingefügt werden.

hm funktioniert auf Anhieb grad nicht ganz, warum machst du es nicht über ein background-image in ul#nav li {}, find ich IMHO sowieso schöner und bietet mehr Möglichkeiten

lg georg
ps: thx

jnreutel ·

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]

gumble77 ·

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!

kleiner Onkel ·

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" !!!

just2b ·
kleiner Onkel schrieb

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.

Das freut mich!
Gibts wo eine URL?, vielleicht kann ich bzgl des Problems helfen

georg

d.​walter ·

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

katih ·

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
}


 }

}
Gecko6 ·

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