Zum Inhalt springen

Menüs basierend auf CSS

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

Tags: Frage

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

just2b ·

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

lulatsch ·

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

Unbekannter Benutzer ·

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!

just2b ·
AndyKöln schrieb

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.

IMHO nicht, wiel du ja ein display:block brauchst

Unbekannter Benutzer ·

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?

just2b ·
AndyKöln schrieb

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?

und zwar was? vorschläge immer willkommen

kazi ·

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

just2b ·

probier mal

page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="foo.js"></script>
}
kazi ·

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
}
kazi ·

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

kazi ·

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.

just2b ·
kazi schrieb

Jedoch 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

littlejoe ·

Habe das CSS-menu von CSS-Play in Typo3 eingebunden erfolgreich in Firefox und IE eingbunden.

Den Typo Code findet ihr unter folgendem Post.

#436414

Gruß LittleJoe
[/url]

flowtime ·

hallo, erstmal danke für das menü,allerdings hab ich ein problem. ich hab alles wie beschrieben eingerichtet, bekomme aber bei den menüpunkten ohne unterpunkte nen zeilenumbruch nach dem a-tag... also so ->
<li><a href="47.0.html">Ansprechpartner</a><br></li>

kann mir jemand erklären wo das herkommt?
wie gesagt, es schaut alles so aus wie im ersten post beschrieben...

schonmal danke!

mve2602 ·

mich würde sehr interessieren, wie das Menu als Gmenu realisiert wird.
Momentan sieht der Code so aus, allerdings funktioniert es nur im IE 6
richtig. Im Firefox passiert gar nix.
Wäre lieb, wenn mir da jemand weiterhelfen könnte, leider gibt es ja bei Gmenus kein "wrapItemAndSub" :-(

temp.gmenu-2 = HMENU 
temp.gmenu-2{ 
special = directory
special.value = 20
#entryLevel = 0 

1 = GMENU 
1 { 
	  expAll = 1
	  wrap = <ul id="nav">|</ul>
	  noBlur = 1
          NO = 1
          NO {
               ATagTitle.field = title
		 #wrap = <li>|</li>
		 wrap = <li class="menuparent">|</li>
               XY = 178, 28 |*| 84,28 |*| 84,28
               backColor = #b74249 |*| #c8706d |*| #c8706d
               50 = TEXT
               50 {
                    text.field = title
                    fontSize = 18
                    fontFile = fileadmin/template/fonts/ATRotSemSanBol.ttf
                    fontColor = #000000
		    align = left
                    offset = 18,20 |*| 3,20 |*| 3,20
                    transparentBackground = 1
               }
          } 

          ACT < .NO
	  ACT = 1	
          ACT.50.fontColor = #FFFFFF	   

          RO < .ACT
          RO = 1
  } 

2 < .1
2 = GMENU
2 {
	wrap = <ul>|</ul>
	NO = 1	
	NO {
              XY = 178, 15
	      backColor = #FFFFFF
		50 = TEXT
		50 {
		     niceText = 1
                     offset = 100,10
		     fontSize = 12
		}
	}

	ACT < .NO
	ACT = 1
	ACT.50.fontColor = #a7032f

	RO < .ACT
	RO = 1
	RO.50.fontColor = #a7032f
}
}