Zum Inhalt springen

Typoscript für Mega Dropdown Menu

Erstellt am 18. Januar 2010 · 69 Antworten · letzte Antwort am 14. November 2013 · Seite 4 von 4

Tags: Frage

jank ·

bzw. die Richtigen klassen werden bei allen Menüpunkten außer bei "Produkte" eingesetzt.

Dennis.​D ·

Moin jank,
vielen Dank für Deine Geduld!

Warum die Klassen außer bei Produkten richtig gesetzt werden ist mir bis jetzt schleierhaft. Der Object Browser hilft mir da auch nicht weiter.

Unter Showroom: http://bike.diekavallerie.de.www68.your-server.de/e-showroom.html
wird nun zumindest mal ne Grafik angezeigt.. Aber diese soll sich nachher ja zwar innerhalb des Menü aber darunter befinden.. Mit padding oder margin komm ich da nicht weiter, die Grafik verschwindet dann aus der "Sichtweite"..
Meine Idee war ja am Anfang noch irgendwie ein weiteren <div> drum zu wrappen und den dann auszurichten. Total abwägig die Idee??

jank ·

Ein div direkt innerhalb eines ul's ist meines Wissens nicht konform.
Außerdem weiß ich nicht wie sich das auf das restliche css auswirkt, da dann vermutlich die selectoren/klassen nicht mehr passen.
In Firebug sehe ich, dass alle Eigenschaften bis auf das padding angewendet werden. das padding wird von ul.dropdown li überschrieben.
Die Eigenschaft wird nicht angewendet, da die Datei in der Sie steht nicht als letztes sondern als 2. im header eingebunden wird. falls es nichts bringt die styles.css als letztes einzubinden würde ich es statt mit li.id11 mit
ul.dropdown li.id11 versuchen.

etux ·

@ Dennis.D

Ein wenig Off-Topic:

An Deiner Stelle würde ich erst mal ein Schritt zurück gehen und mich um das Grund-Layout kümmern.
Dein Layout bricht nur deshalb nicht aus einander (zumindest rein optisch), weil Du massenhaft Hohen angibst. Hohen-Angaben haben aber bei Elementen, die Text enthalten, nichts zu suchen.
Lesestoff:
http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html
Die leere Elementen, die Du für die runden Ecken benutzest, haben keine semantische Bedeutung und sind völlig überflüssig - Du hast genügend Elementen, die die Ecken-Grafiken aufnehmen können.
Du schließt (beendest) die Floats nicht ein. Daher ist Dein Layout instabil (eigentlich eher zerschossen). Und das kannst Du leicht sehen, indem Du alle Hohen-Angaben entfernst.
Lesestoff:
http://little-boxes.de/lb1/IV-css-positionierung.html

Deine Navigation habe ich mir nicht angesehen. Um da einzusteigen, müsste ich mir vielleicht mehrere Vorbeiträge anschauen und die TypoScript Konfiguration erst mal finden.
Leider habe ich die Zeit dafür nicht

.

Dennis.​D ·

Hallo etux,

vielen Dank für Deine Hinweise. Ich werde mir insbesondere den 2. link von Dir mal genauer ansehen.
Das Template wurde mir so geliefert, das habe nicht ich erstellt.

Grüße
Dennis

Dennis.​D ·

Hallo jank,

ich bin ein wenig weiter gekommen mit dem Menü. Hab aber immer noch zu kämpfen.. 🙁
Besonders die Sache mit den Bildern klappt noch gar nicht so wie ich mir das vorstelle.

http://bike.diekavallerie.de.www68.your-server.de/

Was ich grad nicht verstehe:
- wie bekomme ich für die Spalten eine feste Breite, so dass die Abstände zwischen den Spalten gleich breit sind und es zu keinem Umbruch bei den links kommt?
- die Unterseiten von "Produkte" "PG Bikes" sind etwas nach rechts eingerückt.
das kommt anscheinend von: ul.dropdown ul a aus der default.advanced.css. Komischerweise wrappt er bei dem letzten das "last" herum, obwohl ich es aus dem TypoScript mal entfernt habe?!

Besten Dank und Grüße
Dennis

Nuern ·

Moin zusammen,

danke, dass es Leute gibt, die solche Ext. schreiben und dass auch noch darüber geschrieben wird.

Ich möchte mich garnicht lange aufhalten mit meinem Anliegen. Trotz der vielen gezeigten Beispiele bekomme ich das Menü nicht zum Laufen:

1. Die Extension habe ich bei den statischen Templates aufgenommen auf root-Ebene.

2. Die Konstanten habe ich auf root-Ebene hinzugefügt

plugin.freeCssDropDownMenu.themeCss =  typo3conf/ext/freecssdropdownmenu/res/css/dropdown/themes/_template/default.css
plugin.freeCssDropDownMenu.page =  page
plugin.freeCssDropDownMenu.headerDataId =  9876
plugin.freeCssDropDownMenu.horizontal =  1
plugin.freeCssDropDownMenu.horizontal.start =  2
plugin.freeCssDropDownMenu.horizontal.exclude  =
plugin.freeCssDropDownMenu.vertical = 0
plugin.freeCssDropDownMenu.vertical.start = 1
plugin.freeCssDropDownMenu.vertical.exclude =

3. Die CSS-Dateien wurden in den Header gepackt.

page.headerData.9876 = TEXT
page.headerData.9876.value (
<link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/dropdown.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/dropdown.linear.columnar.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/lwis.celebrity/default.advanced.css"  media="all" />
)

4. Der Marker wird angesprochen.

page.20.marks {
    NAVI_TOP < plugin.freeCssDropDownMenu.horizontal
    NAVI_TOP {
      special = directory
      special.value = 2
    }

Die CSS-Dateien werden richtig ausgegeben. Der Marker verschwindet auch im Quelltext, wird also angesprochen. Das Problem liegt für mein Verständnis bei der Versorgung des Markers.

Sieht jemand einen Fehler in meiner Durchführung? #paralyzed#

Grüße,
Martin

***EDIT***

Das Problem hat sich erledigt. Hatte den Marker weiter unten nochmals überschrieben, deshalb kam kein Resultat zu stande... #angry#

Nuern ·

Moin jank,

ich habe dein Menü soweit zum Laufen bekommen, ging ziemlich gut.

Kann es sein, dass unter der aktuellen Version einige Darstellungsprobleme vorliegen bezüglich des Internet Explorer (getestet unter 8 und 9)?

Nur bei diesem werden die untergeordneten Ebenen nicht angezeigt. Bei den anderen Browsern kein Problem.

Habe das ganze mit einer völlig nackten Typo3 4.5.2 probiert.

Vielleicht hast Du ja einen Tip woran das liegen könnte..

Danke für die Ext auf jeden Fall.

Gruß,
Maddin

jank ·

Bis jetzt kann ich keine Probleme, weder mit IE 8 noch IE 9 ausmachen. Vielleicht läuft der Browser im Kompatibilitätsmodus ausgelöst durch einen falschen Doctype.
Im IE < 7 wird z.B. Javascript benötigt (jquery library + jquery.dropdown.js) welches aber höhere IE Versionen notfalls auch nicht stört.
Vielleicht gibt es auch probleme mit dem Restlichen Quelltext. Hier rate ich immer wieder zum validieren.

Es ist schwer zu sagen woran es liegt, ohne wenigstens Einblick in den HTML/CSS Quelltext und vielleicht Auszüge aus dem aktuellen TS.
Du hast keine URL gepostet...

PS: Aktuell ist Typo3 4.5.3, daran wird es aber nicht liegen.

Nuern ·

Moin jank,

der Hinweis mit dem Doctype war der entscheidende. Vielen Dank!

Läuft super, Dein Menü.

Gruß,
Maddin

corona ·

Hallo zusammen,

ich habe ebenfalls die Extension nach langem Hin und Her und Dank dieses Forum eingebunden bekommen.

Ich hab das Theme lwis.celebrity gewählt.

Und die Untermenüs werden auch angezeigt. Allerdings habe ich das Problem, dass in der eigentlichen Menüleiste auch Unterpunkte angezeigt werden.

Meine Struktur sieht so aus:
- Home (Ebene 1)
- Über uns (Ebene 1)
* Vorstand (Ebene 2)
* Chronik (ebene 2)
usw.

Aber die Menü-Leiste, die man sieht (ohne ein MouseOver) beinhaltet alle diese Elemente.
Also nicht nur "Home" und "Über uns", sondern auch die Unterpunkte "Vorstand" und "Chronik".

Wie kann ich das umstellen?

Mein Setup:

plugin.freeCssDropDownMenu.horizontal = HMENU
plugin.freeCssDropDownMenu.horizontal {
	special = directory
	special.value = 56,57,58,59,60,61
	excludeUidList = 
	1 = TMENU
	1 {
		wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
		expAll = 1
		noBlur = 1
		NO = 1
		NO {
			ATagTitle.field = abstract // description // subtitle // title
			wrapItemAndSub = |*| <li> | </li> |*| <li class="last"> | </li>
			stdWrap.htmlSpecialChars = 1
		}
		IFSUB < .NO
		IFSUB {
			wrapItemAndSub = |*| <li class="dir"> | </li> |*| <li class="dir last"> | </li>
		}
	}
	#2 < .1
	#2.wrap = <ul> | </ul>
	#3 < .2
	#4 < .2
	#5 < .2
}



# Default PAGE object:
page = PAGE
page {
	includeCSS.file001 = fileadmin/templates/tvz/css/tvz-template.css
	#includeCSS.file002 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.css
	#includeCSS.file003 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.vertical.css
	#includeCSS.file004 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown.linear.columnar.css
	includeCSS.file005 = fileadmin/templates/megadropdown/default.advanced.css
	#includeJS.file011 = typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.dropdown.js
	#includeJS.file012 = typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.js

}

page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/templates/tvz/tvz-template.html
	workOnSubpart = DOCUMENT
	subparts {
		MENU_TOP < plugin.freeCssDropDownMenu.horizontal
	}

	marks {
		MENU_LEFT < plugin.freeCssDropDownMenu.horizontal
		MAIN_CONTENT < styles.content.get
	}
}

Und als Konstanten nur:

plugin.freeCssDropDownMenu.themeCss = fileadmin\templates\megadropdown\default.advanced.css
jank ·

Kann es sein, dass:
* Vorstand (Ebene 2)
* Chronik (ebene 2)
eine von den uid's haben?

special.value = 56,57,58,59,60,61

bei

special = directory
special.value = 1

dürfen nur es nur die IDs von den Oberseiten sein.

corona ·

Danke.
Das war zu einfach 😉

Mal eine andere Frage. Ist es auch möglich ein anderes Theme mit dem MegaDropDown darzustellen? Also wie bei dem lwis.celebrity, dass sich die Unterseiten nicht einzeln aufmachen, sondern bei MouseOver über den obersten Menüpunkt, man direkt zB 2 Spalten sieht mit den UNterpunkten und Unterunterpunkten? Oder muss ich dann das celebrity umwurschteln?

Also gibts einen Parameter der vllt einfahc nur gesetzt werden muss oder so?

bagstage ·

Hallo,

wir haben die extension auch testweise eingebaut - soweit klappt auch alles - nur eines: ich möchte im menü untermenüs z.b. bis zur 2ten oder 3ten seitenebene anzeigen - wie geht das?

lidahilfe ·

Hallo,

ich versuche bislang erfolglos das lwis.celebrity -Menü einzusetzen. Es sollte so wie im Original funktionieren - mehrere Listen nebeneinander. Ich habe folgendes im Haupttemplate zu stehen:

Constants:
plugin.freeCssDropDownMenu.page = page
plugin.freeCssDropDownMenu.headerDataId = 9876
plugin.freeCssDropDownMenu.horizontal = 1
plugin.freeCssDropDownMenu.horizontal.start = 2
plugin.freeCssDropDownMenu.horizontal.exclude =
plugin.freeCssDropDownMenu.vertical = 0 
plugin.freeCssDropDownMenu.vertical.start = 2 
plugin.freeCssDropDownMenu.vertical.exclude = 

Setup:
includeCSS {
            file1 = {$style}
            file1233 = fileadmin/templates/css-images/dropdown.css 
            file1234 = fileadmin/templates/css-images/dropdown.linear.columnar.css
            file1235 = fileadmin/templates/css-images/default.advanced.css          
            }

10.marks.HAUPTNAV = COA
10.marks.HAUPTNAV.10  < plugin.freeCssDropDownMenu.horizontal
10.marks.HAUPTNAV.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
10.marks.HAUPTNAV.10.1.IFSUB.doNotLinkIt = 1
10.marks.HAUPTNAV.10.2.IFSUB.doNotLinkIt = 1
10.marks.HAUPTNAV.10.2.entryLevel = 1
10.marks.HAUPTNAV.10.2.expAll = 1

Allerdings stellt sich das Menü noch http://venter2013.de.server791-han.de-nserver.de/index.php?id=3 dar also die Listen werden nicht nebeneinander sondern untereinandergesetzt...:

Ist hier noch Typoscript nötig oder habe ich auch ein Problem mit der Verwendung der css-Files?

VG Jens

Unbekannter Benutzer ·

Hallo Forum,

ich habe das cssdropdownmenu dank dieser Posts hier und mit viel Geduld und Spucke (bin Anfängerin) auf meiner Seite www.allesneu.wanderreiter-magazin.de umgesetzt. Nun habe ich nur noch ein Problem damit: Öffne ich ein Bild in der Perfectlightbox liegt dieses Bild unter dem Menü. Ein Beispiel könnt Ihr hier anschauen (einfach das untere kleine Bild anklicken): http://www.allesneu.wanderreiter-magazin.de/gastgeber/alice-en-selle-wanderreiten-in-den-nordvogesen-elsass.html

Wie kann ich die Reihenfolge der Ebenen, sowas scheint es mir jedenfalls zu sein, ändern?

Vielen Dank vorab!

Heike