Ultimate Drop Down Menu in Typo3 einfügen

Pie · #1 07.01.07, 08:17

Hallo Leute,

ich verzweifele langsam am UDM. Ich bin allerdings auch absoluter Typo-nOOb

Naja, vielleicht kann mir jemand auf die Sprünge helfen.

Zunächst kurz zur Umgebung: Typo3 v4 mit TemplaVoilá, Version 1.1.1

Nun zum Problem:

Ich habe versucht folgendes Tutorial umzusetzen: Ultimate Drop Down Menu in Typo3 einfügen - css-tutorials.de

Mein Main Template sieht wie folgt aus:

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

page.headerData.10 = COA
page.headerData.10 = TEXT
page.headerData.10.value (
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-custom.js"></script>
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-control.js"></script>
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-style.js"></script>
)

config.spamProtectEmailAddresses = 1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

Mein Extension Template (+extMyUDMmenu)

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:

temp.tmenu = HMENU
temp.tmenu.wrap = |
temp.tmenu.excludeUidList =
temp.subnav {
1 = TMENU
1 {
expAll = 1
wrap = <ul id="udm" class="udm">|</ul>
noBlur = 1
NO {
wrapItemAndSub = <li>|</li>
stdWrap = upper
ATagTitle.field = description // title
}
ACT {
wrapItemAndSub = <li>|</li>
stdWrap = upper
ATagParams = class = "nohref act"
ATagTitle.field = description // title
}
}

2 < .1
2 {
wrap = <ul>|</ul>
NO {
wrapItemAndSub = <li>|</li>
stdWrap = upper
ATagTitle.field = description // title
}
ACT {
wrapItemAndSub = <li>|</li>
stdWrap = upper
ATagParams = class = "nohref act"
ATagTitle.field = description // title
}
}

3 < .2
3 {
wrap = <ul>|</ul>
NO {
wrapItemAndSub = <li>|</li>
stdWrap = upper
ATagTitle.field = description // title
}
ACT {
wrapItemAndSub = <li>|</li>
stdWrap = upper
ATagParams = class = "nohref act"
ATagTitle.field = description // title
}
}
}

Extension Template ist im Main Template eingebunden.

Gehen wir davon aus, dass die Pfade zu den Java-Scripts stimmen.

Seite, um die es geht: test: test
Die Stelle im Code, an der das Menü erscheinen soll ist <div id="brothercake">

Nun die große Frage:

Wie setze ich ich den Marker richtig und wie bekomme ich den Output des Menüs hin?
Bei mir wird das Menü partout nicht angezeigt.

Ich bin für jede Hilfe sehr dankbar. Sitze nun seit Stunden vor dem Problem und bekomme es einfach nicht hin...

Gruß
- Pie

Pie · #2 07.01.07, 23:55

Hallo zusammen,

ich bin absoluter Typo3 nOOb und komme einfach nicht weiter.
Wie kann ich in dem von TemplaVoila erstellten Template-Setup einen Marker für ein Menü (UDM Menü) setzen, bzw, die Ausgabe des Templates veranlassen?

Ich habe das Posting mit weiteren Informationen bereits im Menü-Forum gepostet: http://www.typo3forum.net/forum/gmen...einfuegen.html

Allerdings ist es glaube ich kein Problem des Menüs, sondern eher, dass ich das Page Objekt nicht richtig konfiguriert habe...

Kann mir da jemand helfen?

Gruss
- Pie

**Armin** · #3 08.01.07, 08:41

Guten Morgen,

beim erstellen der Struktur musst du ein field erstellen das als "Mapping Type" Element erhält, als Editing Type "TypoScript object Path" und als "Object path" z.B. lib.tmenu .

Willst du ein vorhandenes TO erweitern, dann wähle "Update Mapping" und dann "Modify DS/TO). Da kannst du vorhandene Felder bearbeiten oder neue hinzufügen.

Dieses lib.tmenu kannst du nun im setup deines Tempales mit Daten füllen und so mit arbeiten wie gewohnt.

ALs Beisppiel könntest du nun temp.tmenu auf lib.tmenu kopieren.

Typoscript-Code:

1:	lib.tmenu < temp.tmenu

Armin

Pie · #4 08.01.07, 15:21

Hallo Armin,

vielen Dank für deine Antwort. Ich habe jetzt folgendes erreicht:

test: test

Das Menü wird dargestellt, allerdings ohne Styles. Die Javascripts liegen im Verzeichnis fileadmin/templates/udm/

Hier nochmal meine aktuelle Konfiguration:
Main Template

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

config.baseURL = [url=http://s190983785.online.de/t3site/]minitest2: minitest2
config.spamProtectEmailAddresses = 1
page.stylesheet = fileadmin/templates/scripts/default.css
page.headerData.10 = COA
page.headerData.10 = TEXT
page.headerData.10.value (
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-custom.js"></script>
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-control.js"></script>
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-style.js"></script>
)

lib.tmenu < temp.tmenu

page = PAGE
page.typeNum = 0

page.5 = HTML
page.5.value = <script type="text/javascript" src="fileadmin/udm/udm-dom.js"></script>
page.6 = HTML
page.6.value = <script type="text/javascript" src="fileadmin/udm/udm-mod-keyboard.js"></script>
#page.7 = HTML
#page.7.value = <script type="text/javascript" src="fileadmin/udm/udm-x-sliding.js"></script>

page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

+Ext

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

temp.tmenu = HMENU
temp.tmenu {
entryLevel = 0
excludeUidList =
wrap = <ul id="udm" class="udm"><li><a href="index.php?id=357" target="_self"">Home</a></li>|</ul>
1 = TMENU
1 {
expAll = 1
noBlur = 1
wrap = |
NO = 1
NO.ATagTitle.field = abstract // description // subtitle
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
}
2 < .1
2.wrap = <ul>|</ul>
3 < .1
3.wrap = <ul>|</ul>
4 < .1
4.wrap = <ul>|</ul>
}

DS:

Code:

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<T3DataStructure>
	<ROOT type="array">
		<tx_templavoila type="array">
			<title>ROOT</title>
			<description>Select the HTML element on the page which you want to be the overall container element for the template.</description>
			<tags>body</tags>
		</tx_templavoila>
		<type>array</type>
		<el type="array">
			<field_content type="array">
				<tx_templavoila type="array">
					<title>Main Content Area</title>
					<description>Pick the HTML element in the template where you want to place the main content of the site.</description>
					<sample_data type="array">
						<numIndex index="0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque porta erat vitae nisl. In hac habitasse platea dictumst. Aliquam ac urna. Morbi magna mauris, semper ut, varius in, convallis vitae, nulla. Proin massa lorem, mollis eget, rutrum vitae, commodo id, risus. Curabitur scelerisque risus eget odio. Proin laoreet blandit elit. Aenean varius, sapien laoreet dapibus volutpat, risus lorem ornare wisi, lobortis venenatis nisl augue sed purus. Nam suscipit viverra justo. Suspendisse tincidunt. Nullam vel quam.</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>table:outer,td:inner,div:inner,p,h1,h2,h3,h4,h5</tags>
					<oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
					<TypoScript>
	10= RECORDS
	10.source.current=1
	10.tables = tt_content
	10.wrap = &lt;!--TYPO3SEARCH_begin--&gt; | &lt;!--TYPO3SEARCH_end--&gt;
                    </TypoScript>
				</tx_templavoila>
				<TCEforms type="array">
					<config type="array">
						<type>group</type>
						<internal_type>db</internal_type>
						<allowed>tt_content</allowed>
						<size>5</size>
						<maxitems>200</maxitems>
						<minitems>0</minitems>
						<multiple>1</multiple>
						<show_thumbs>1</show_thumbs>
					</config>
					<label>Main Content Area</label>
				</TCEforms>
			</field_content>
			<field_menu type="array">
				<tx_templavoila type="array">
					<title>Main menu</title>
					<description>Pick the HTML container element where you want the automatically made menu items to be placed.</description>
					<sample_data type="array">
						<numIndex index="0">[Menu steht hier]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>table:inner,ul,div,tr,td</tags>
					<eType_EXTRA type="array">
						<objPath>lib.tmenu</objPath>
					</eType_EXTRA>
					<TypoScriptObjPath>lib.tmenu</TypoScriptObjPath>
				</tx_templavoila>
			</field_menu>
		</el>
	</ROOT>
</T3DataStructure>

Wo liegt das Problem, warum wird das Menü ungestyled dargestellt?

Gruss
- Pie

**Armin** · #5 08.01.07, 15:46

moin,

dann binde doch einfach die Styles ein!

Entweder per "Select HTML header parts" beim mapping mit TV wenn die Styles in der Vorlage definiert sind oder per TS mit

Typoscript-Code:

1:	page.includeCSS.file1 = file.css

Armin

Pie · #6 08.01.07, 16:01

Sorry,

ich meinte nicht "ungestyled" im Sinne von CSS
Habs aber trotzdem mal eingebunden und es wird angezeigt. Allerdings habe ich das so verstanden, dass das CSS nur dann zum Tragen kommt, wenn Javascript abgeschaltet ist, oder?

Bleiben also 2 Fragen:

1. Warum bekomme ich das JavaScript Menü nicht angezeigt?
2. Warum wird das CSS-gestylte Menü an dieser Position angezeigt? (siehe test: Produkte)

Tut mir leid, aber ich bin halt ein nOOb

Gruss
- Alex

**Armin** · #7 08.01.07, 16:33

moin,

Zitat:

Allerdings habe ich das so verstanden, dass das CSS nur dann zum Tragen kommt, wenn Javascript abgeschaltet ist, oder?

Das CSS ist dafür da, das bei ausgeschalteten JS ein einigermaßen ordentliches Menue dargestellt wird.

Zitat:

1. Warum bekomme ich das JavaScript Menü nicht angezeigt?

Das Menue wird doch angezeigt! Es handelt sich um ein ganz einfaches Listen-Menue, über JS wird erst die Funktionalität erreicht. Die Ansicht ist zur Zeit so, als wenn ein User JS deaktiviert hat.

Da es nun so angezeigt wird, deutet daraus hin dass das JS noch nicht richtig eingebunden ist! Überprüfe die Pfade zu den JS-Scripten, die passen nicht alle!!!!!

Zitat:

2. Warum wird das CSS-gestylte Menü an dieser Position angezeigt?

Du musst halt das CSS an deine Seite anpassen damit es passend positioniert wird!

Armin

Pie · #8 08.01.07, 16:43

Nochmals danke für deine schnellen Antworten. Ich weiß das zu schätzen!

Das mit dem CSS hatte ich dann also richtig verstanden, es sollte nur dann angezeigt werden, wenn das js nicht funktionert. Ok soweit.

Die Scripte sind allerdings alle da (fileadmin/templates/udm/). Wie du dem TS entnehmen kannst, habe ich diese Pfade verwendet.

Ich hatte sogar schon die Base-URL hinzugefügt, um falsche Pfade auszuschließen.

Wenn du dir den Quellcode der Seite ansiehst, stehen dort die Pfade auch korrekt:

Code:

<head>

...SNIP...

	<base href="http://s190983785.online.de/t3site/" />
	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e99aac0be0.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/templates/scripts/default.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/templates/udm/udm-style.css" />
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-custom.js"></script>
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-control.js"></script>
  <script type="text/JavaScript" src="fileadmin/templates/udm/udm-style.js"></script>

...SNIP...

</head>
<body>
<script type="text/javascript" src="fileadmin/udm/udm-dom.js"></script><script type="text/javascript" src="fileadmin/udm/udm-mod-keyboard.js"></script>
... SNIP ...

Habe ich da was falsch gemacht?

Gruss
-Pie

Pie · #9 08.01.07, 17:49

Moinsen,

also, ich habe jetzt die Pfade im TS absolut angegeben (hätte ich auch mal früher drauf kommen können

) und das Menü läuft.

TS wie folgt:

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

config.baseURL = [url=http://s190983785.online.de/t3site/]minitest2: minitest2
config.spamProtectEmailAddresses = 1
page.stylesheet = fileadmin/templates/scripts/default.css
page.headerData.10 = COA
page.headerData.10 = TEXT
page.headerData.10.value (
  <script type="text/JavaScript" src="http://s190983785.online.de/t3site/fileadmin/templates/udm/udm-custom.js"></script>
  <script type="text/JavaScript" src="http://s190983785.online.de/t3site/fileadmin/templates/udm/udm-control.js"></script>
  <script type="text/JavaScript" src="http://s190983785.online.de/t3site/fileadmin/templates/udm/udm-style.js"></script>
)
page.includeCSS.file1 = fileadmin/templates/udm/udm-style.css

lib.tmenu < temp.tmenu

page = PAGE
page.typeNum = 0
page.5 = HTML
page.5.value = <script type="text/javascript" src="http://s190983785.online.de/t3site/fileadmin/templates/udm/udm-dom.js"></script>
page.6 = HTML
page.6.value = <script type="text/javascript" src="http://s190983785.online.de/t3site/fileadmin/templates/udm/udm-mod-keyboard.js"></script>

page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

Frage ist, warum passen die relativen Pfade nicht?

Gruss
- Pie

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Suche

Userpanel

Ultimate Drop Down Menu in Typo3 einfügen

Wie Extension Template (UDM Menü) in Page Objekt einfügen?

Du hattest auf jeden Fall recht