JavaScript umbauen, wer kann helfen ?

[GizmotroniX]

Hallo Leute,

ich muss für unseren Webauftritt ein Menü realisieren dass 3 Ebenen hat und jede Ebene soll auf Mausklick raus und wieder reinfahren. Mit 2 Ebenen hab ich das hinbekommen aber die 3. Ebene fährt nur auf mouseover und mouseout raus oder rein. Ich brauch jemand der mir das JS entsprechend umbauen kann. Ich kenn mich in JS nicht wirklich aus und rumprobieren ist da nicht. Ein Strich zuviel oder zuwenig und nix geht mehr.

Hier mal das JS:

Code: Alles auswählen

clickMenu = function(menu) {
	var getEls = document.getElementById(menu).getElementsByTagName("LI");
	var getAgn = getEls;

	for (var i=0; i<getEls.length; i++) {
			getEls[i].onclick=function() {
				for (var x=0; x<getAgn.length; x++) {
				getAgn[x].className=getAgn[x].className.replace("unclick", "");
				getAgn[x].className=getAgn[x].className.replace("click", "unclick");
				}
			if ((this.className.indexOf('unclick'))!=-1) {
				this.className=this.className.replace("unclick", "");;
				}
				else {
				this.className+=" click";
				}
			}
			getEls[i].onmouseover=function() {
				this.className+=" hover";
			}
			getEls[i].onmouseout=function() {
				this.className=this.className.replace("hover", "");
			}
		}
	}

Ich denke für jemand der das versteht was da oben steht ist das nicht so ein Ding. Die letzten beiden Funktionen müssten eben nur auf onclick umgebaut werden. Bitte um Hilfe wenn sich jemand auskennt damit, ich komm hier sonst nicht weiter und die Zeit läuft mir davon. Danke !

lG
Roland

[Timon]

Moin,

in dem JS gibt es keine Einschränkung auf 2 Ebenen, der Fehler muss im HTML zu suchen sein. Kannst du das auch mal posten?

Gruß
Frank

[GizmotroniX]

Hmm,

das Menü setzt sich aus CSS und JS zusammen. Ich habe das in meinem Typo3 CMS im Einsatz.

Ursprünglich stammt das Menü von Stu Nicholls
http://www.stunicholls.com/menu/simple.html

Ich hab den HTML Aufbau genauso in Typo3 übernommen was das Menü ja dynamisch erstellt.

Die Seite auf der es im Einsatz ist sieht man hier:
http://www.svoboda.at/svoboda_at/

Das CSS dazu sieht so aus:

Code: Alles auswählen

#outer {width:100%; position: relative;}
#menu {list-style-type:none; padding:0; margin:0 auto; float: right;}

#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li, #menu li ul li, #menu li.click ul li, #menu li.click ul li.hover ul li {float:left; background:#ccc; margin:1px 1px 0 0; position:relative;}
#menu li.sub {background:#000; font-size: 12px;}
#menu li.sub2 {background:#ccc; font-size: 11px;}
#menu li, #menu li a, #menu li.click ul li a, #menu ul li a {display:block; color:#fff; font-family:arial; font-size:11px; line-height:20px; width:135px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;}
#menu li:hover, #menu li a:hover, #menu li.click:hover, #menu li.click a:hover, #menu li.hover:hover, #menu li.hover a:hover {background:#666;}

#menu ul {position:absolute;left:-9999px;width:135px;}
#menu li.click ul ul {position:absolute;left:-9999px;width:135px;}
#menu li.click ul li.hover ul ul {position:absolute;left:-9999px;width:135px;}

#menu li.hover {background:#333; z-index:500;}
#menu li.click {background:#333;}

#menu li.click ul li {margin-top:1px;}

#menu li.click ul {left:0px; top:20px; background:url(clear.gif);} /* the background image is for IE7 */
#menu li.click ul li.hover ul, #menu li.click ul li.hover ul li.hover ul {left:135px; top: -1px; background:url(clear.gif);}

Kannst du damit was anfangen ?

[Gentsai]

Also an Typo3 liegt es ja nicht weil das Menü vollständig dargestellt wird, nur eben nicht richtig

Und die CSS-Vorlage sagt auch nichts über die Struktur vom Menü an, ist schliesslich nur zur Gestaltung da.

Die Stu Nicholls Vorlage sieht jedenfalls nur eine Unterebene vor, inwiefern hast du das Script verändert dass im Mouseover die nächste Ebene angezeigt wird?

Ich selbst habe leider keine Ahnung von Java Script

[madmat]

Öhm...warum machst Du das nicht über den Typo3 Menubuilder ?
Das wäre weniger fehleranfällig, da JS frei und wesentlich einfacher zu handhaben.

Müsste ca so aussehen:

Code: Alles auswählen

10.marks.DEINMARKER{
1 = TMENU
1.wrap=<ul>|</ul>
1.NO{
allWrap=<li class="level1">|
wrapItemAndSub = |</li>
}

1.ACT = 1
1.ACT{
allWrap=<li class="level1-act">|
wrapItemAndSub = |</li>
}

2<.1
2.NO{
allWrap=|
wrapItemAndSub=<li class="level2">|</li>
    }
2.ACT{
allWrap=|
wrapItemAndSub=<li class="level2-act">|</li>
    }
3<.2       
}

Damit hättest Du ein astreines 3-Stufen Listenmenü, beliebig formatierbar.

[Timon]

Moin,

so auf die Schnelle steige ich da auch nicht komplett durch. Meine Vermutung geht dahin, dass das CSS nicht für eine weitere Ebene ausgelegt ist. Tipps für einen Umbau kann ich dir für die Schnelle aber nicht geben. Eventuell im JS mal die mouseover und mouseout-Zeilen auskommentieren und gucken, was passiert.

Was spricht dagegen, dass so zu lassen? Ohne den mouseover hätte ich nichtmal gewusst, dass hinter Tische sich noch ein Untermenü verbirgt.

Gruß
Frank

[GizmotroniX]

Oops,

also das Menü von Stu Nichholls war das falsche, das habe ich jetzt in Verwendung:
http://www.stunicholls.com/menu/tree_fr ... ontal.html


@madmat
Ich gehe davon aus, dass das Menü dass du gepostet hast nicht auf Click auf und zuklappt. Genau das brauche ich aber, da es von Marketing so gewünscht wird. Mit der Begründun .."bei BMW ist das auch so und die werden sich ja was dabei gedacht haben".

Ich hatte vorher ein tolles CSS only Drop Down Menü - das musste ich jetzt einstanzen weil wir jetzt ein tolles JS Menü brauchen. Ich hab daher das TypoScript vom DropDown gleich angepasst.

@timon
Ich hab dem Marketing gesagt dass auch sehr große Seiten auf DropDown Menüs setzen die bei mouseover selbst ausklappen. Nein, den Leuten ist das zu unruhig und nicht User freundlich da man wenn man aus dem Feld rutscht die Orientierung verliert.

Die Punkte wie Tische, Schränke etc. müsste man dann noch kennzeichnen damit man weiss das dahinter noch was steckt. Aber das ist dann CSS.

[madmat]

Ich gehe davon aus, dass das Menü dass du gepostet hast nicht auf Click auf und zuklappt

Und wie das auf Klick auf und zu klappt...
Ab ins Haupttemplate-Setup damit und fertig.

Beispiel hier:
http://141.56.132.164/mv4/

[Gentsai]

Das ist ja das ganz normale einspaltige Menü, die Vorgabe ist dass das Menü auf dieser Seite so bleiben soll wie bisher, nur ohne Mouseover, und das ist ein Javascript-problem.

Weiss das Typo3 Forum von Mittwald vielleicht einen Rat?

[GizmotroniX]

Klappt das dann auch horizontal angeordnet aus ? Also so wie es brauchen würde in meiner Seite ?

Kann mich im Moment nicht eingehend damit beschäftigen, hier gehts grad zu wie im Irrenhaus ...