Horiz, Click Menü um weitere Ebene erweitern

GizmotroniX · 2007-11-06T09:40:28+00:00

Hallo Leute, ich habe für mein aktuelles Projekt von Stu Nicholls das "Simple Click Menü" verwendet. Soweit auch wunderbar umgesetzt aber ich scheitere im Moment an folgender Sache. Das Menü ist nur für 2 Ebenen gebaut worden also Top Level + 1 Ebene die man auf Klick aus und einblenden kann. Ich brauch aber noch zusätlich noch eine Ebene die ebenfalls auf Klick ein und ausgeblendet wird, allerdings nicht unter sondern rechts von dem jeweiligen Menüpunkt. Seite von Stu Nicholls: http://www.stunicholls.com/menu/simple.html Mein TS: temp.clickmenu = HMENU temp.clickmenu { special = directory special.value = 260 wrap = | # Hauptmenue 1 = TMENU 1 { wrap = | expAll = 1 NO.ATagTitle.field = subtitle//title NO.wrapItemAndSub = | IFSUB = 1 IFSUB { wrapItemAndSub = | allWrap = | linkWrap = | ATagBeforeWrap = 1 doNotLinkIt = 1 } } 2 = TMENU 2 { wrap = | expAll = 1 NO.ATagTitle.field = subtitle//title NO.wrapItemAndSub = | IFSUB = 1 IFSUB { wrapItemAndSub = | allWrap = | linkWrap = | ATagBeforeWrap = 1 doNotLinkIt = 1 } } 3 < .2 } Mein CSS dazu: #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 {float:left; background:#ccc; margin:2px 2px 0 0;position:relative; padding-bottom: 2px;} #menu li.sub {background:#000;} #menu li.sub2 {background:#999;} #menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; padding-bottom: 2px; font-size:12px; line-height:25px; width:135px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;} #menu li:hover, #menu li a:hover {background:#666;} #menu ul, #menu li.sub2 ul{position:absolute;left:-9999px;width:135px;} #menu li.click {background:#333;} #menu li.click ul{left:0px; top:25px; background:url(transparent.gif);} /* the background image is for IE7 */ Das JS das dazu benötigt wird: 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 Tag die Klasse "click" zuweist. So kann ich zwar per CSS die zusätzliche Ebene ausblenden lassen, aber sobald ich den Top Level anklicke wird dem Tag wieder "click" zugewiesen und die Ebene hinter der ersten eingeblendet. Man müsste das Javascript so erweitern dass er der weiteren Ebene eine andere Klasse zuweist. Oder denke ich hier falsch ? Ist jemand ein JS Könner und kann mir das kurz entsprechend hinbiegen ? lG Roland

just2b · 6. November 2007 11:05

mit css alleine geht das sicher nicht

Unbekannter Benutzer · 6. November 2007 11:42

Ich müsste das Ding mal nachbauen, aber im Prinzip musst du doch nur den li in der zweiten Ebene eine andere Position zuweisen...

#menu li.click {background:#333;}
#menu li.click ul{left:0px; top:25px; background:url(transparent.gif);} /* the background

/* hier jetzt left und top verändern, damit es rechts vom ersten untermenü erscheint, hab mal testweise Werte angegeben */
#menu li.click ul li.click ul{left:150px; top:0px; background:url(transparent.gif); } /* the background

Falls das nicht reicht könnte man natürlich die JS Funktion so anpassen, dass die zweite Ebene eine andere Class bekommt.

ArminB · 6. November 2007 11:45

moin,

nimm das The ULTIMATE von Stu, geht auch ohne JS, Info und TS http://typo3.intervation.de/snippets/menues/drop-down-menu.html

Armin

Unbekannter Benutzer · 6. November 2007 11:47

Das ist aber nicht valide und reagiert nicht auf Klick, so wie hier gewünscht.

ArminB · 6. November 2007 12:06

..ops, das mit dem Klick habe ich überlesen....

..naja, das Menue gauckelt aber valide vor.... 😃 #giggle#

Unbekannter Benutzer · 6. November 2007 12:15

He,he, stimmt das tut es, aber ich mag ein bisschen JS doch lieber, als diese 5000 Zeilen Conditional Code. 🙂

GizmotroniX · 6. November 2007 12:18

@Kitsunet

Das mit CSS hat nicht geklappt. Ich hab hier auch schon viel rumgespielt aber nichts hat annähernd ein weiteres Klappmenü erzeugt.

Hier die Liveansicht des Ganzen:

www.svoboda.at/svoboda_at/

@ArminB

Das Ultimate Drop Down hatte ich vorher, lief auch einwandfrei aber das Marketing ist der Meinung das Menü muss unbedingt auf Klick funktionieren und nicht mit mouseover. Das alles natürlich bis Freitag fertiggestellt. Ist ihnen gestern abend eingefallen.

Was ich auch noch nicht rausgefunden habe. An was sich das JS orientiert um dem richtigen <li> die onlick Funktion zuzuweisen. Im Quelltext der Seite kommt nämlich kein Link "onclick" oder eine Klasse "click" vor.

lG
Roland

Unbekannter Benutzer · 6. November 2007 12:29

Da das JS die onlick Events dynamisch zuweist, d.h. erst wenn die SEite geladne wird, sind die im Quelltext so nicht zu sehen. So wie ich das verstehe bekommen alle LI innerhalb des Elements mit der ID "menu" dieses onclick Verhalten zugewiesen. Da müsste man dann filtern zwischen erster und zweiter Ebene.

GizmotroniX · 6. November 2007 12:51

Hier mal ein Ausschnitt aus Stu's Quellcode der Beispieldatei:

<div id="outer">
<ul id="menu">
<li class="sub">Products
		<ul>
			<li><a href="#nogo1">Wall Clocks</a></li>
			<li><a href="#nogo2">Watches</a></li>
			<li><a href="#nogo3">Pocket Watches</a></li>
			<li><a href="#nogo4">Chronometers</a></li>
			<li><a href="#nogo5">Astronomical</a></li>
			<li><a href="#nogo5">Pendulum</a></li>
		</ul>
</li>
<li class="sub">Services
		<ul>
			<li><a href="#nogo6">Repair</a></li>
			<li><a href="#nogo7">Servicing</a></li>
			<li><a href="#nogo8">Battery Replacement</a></li>
			<li><a href="#nogo9">Cleaning</a></li>
		</ul>
</li>
<li class="sub">Shop 
		<ul>
			<li><a href="#nogo10">Online</a></li>
			<li><a href="#nogo11">Catalogue</a></li>
			<li><a href="#nogo12">Mail Order</a></li>
		</ul>
</li>
<li class="sub">Contacts
		<ul>
			<li><a href="#nogo13">Support</a></li>
			<li><a href="#nogo14">Sales</a></li>
			<li><a href="#nogo15">Buying</a></li>
			<li><a href="#nogo16">Clock Makers</a></li>
			<li><a href="#nogo17">Stockist</a></li>
			<li><a href="#nogo18">General</a></li>
		</ul>
</li>
</ul>
</div>

Und hier meiner der von Typo3 erzeugt wird:

<div id="outer">
<ul id="menu">
<li class="sub">PRODUKTE
  <ul>
  <li><a href="index.php?id=263" title="enjoy-collection" onfocus="blurLink(this);"  >enjoy-collection</a></li>
    <li class="sub">Tische
    <ul>
    <li><a href="index.php?id=334" title="Einzelarbeitsplätze" onfocus="blurLink(this);"  >Einzelarbeitsplätze</a></li>
    <li><a href="index.php?id=335" title="Arbeitsplatzkombis" onfocus="blurLink(this);"  >Arbeitsplatzkombis</a></li>
    <li><a href="index.php?id=336" title="Besprechung" onfocus="blurLink(this);"  >Besprechung</a></li>
    <li><a href="index.php?id=337" title="Gestelle" onfocus="blurLink(this);"  >Gestelle</a></li>
    <li><a href="index.php?id=338" title="Empfänge/Garderobe" onfocus="blurLink(this);"  >Empfänge/Garderobe</a></li>
    <li><a href="index.php?id=339" title="Konfiguration" onfocus="blurLink(this);"  >Konfiguration</a></li>
    </ul>
  </li>
  <li class="sub">Schränke
    <ul>
    <li><a href="index.php?id=348" title="G1 Edition" onfocus="blurLink(this);"  >G1 Edition</a></li>
    <li><a href="index.php?id=347" title="Schiebetüren" onfocus="blurLink(this);"  >Schiebetüren</a></li>
    <li><a href="index.php?id=346" title="Querrollo" onfocus="blurLink(this);"  >Querrollo</a></li>
    <li><a href="index.php?id=345" title="Schrankeinrichtung" onfocus="blurLink(this);"  >Schrankeinrichtung</a></li>
    <li><a href="index.php?id=344" title="Rollover" onfocus="blurLink(this);"  >Rollover</a></li>
    <li><a href="index.php?id=343" title="Drehtüren" onfocus="blurLink(this);"  >Drehtüren</a></li>
    <li><a href="index.php?id=342" title="Zusatzmöbel" onfocus="blurLink(this);"  >Zusatzmöbel</a></li>
    <li><a href="index.php?id=341" title="Schrankdetails" onfocus="blurLink(this);"  >Schrankdetails</a></li>
    <li><a href="index.php?id=340" title="Fahrbare Unterschränke" onfocus="blurLink(this);"  >Fahrbare Unterschränke</a></li>
    <li><a href="index.php?id=349" title="Trennschränke" onfocus="blurLink(this);"  >Trennschränke</a></li>
    </ul>
  </li>
  <li class="sub">Gliederungselemente
    <ul>
    <li><a href="index.php?id=351" title="Boards &amp; Panels" onfocus="blurLink(this);"  >Boards & Panels</a></li>
    <li><a href="index.php?id=350" title="Accessoires" onfocus="blurLink(this);"  >Accessoires</a></li>
    </ul>
  </li>
  <li><a href="index.php?id=267" title="Executive" onfocus="blurLink(this);"  >Executive</a></li>
  <li class="sub">Stühle & Accessoires
    <ul>
    <li><a href="index.php?id=327" title="Drehstühle" onfocus="blurLink(this);"  >Drehstühle</a></li>
    <li><a href="index.php?id=328" title="Stühle" onfocus="blurLink(this);"  >Stühle</a></li>
    <li><a href="index.php?id=360" title="Komfortsitzmöbel" onfocus="blurLink(this);"  >Komfortsitzmöbel</a></li>
    <li><a href="index.php?id=359" title="Accessoires am Schreibtisch" onfocus="blurLink(this);"  >Accessoires am Schreibtisch</a></li>
    <li><a href="index.php?id=358" title="Garderoben" onfocus="blurLink(this);"  >Garderoben</a></li>
    <li><a href="index.php?id=357" title="Abfallbehälter" onfocus="blurLink(this);"  >Abfallbehälter</a></li>
    <li><a href="index.php?id=356" title="Pflanzengefässe" onfocus="blurLink(this);"  >Pflanzengefässe</a></li>
    <li><a href="index.php?id=355" title="Leuchten" onfocus="blurLink(this);"  >Leuchten</a></li>
    <li><a href="index.php?id=353" title="Ergänzungen" onfocus="blurLink(this);"  >Ergänzungen</a></li>
    <li><a href="index.php?id=354" title="Zusatzmöbel" onfocus="blurLink(this);"  >Zusatzmöbel</a></li>
    <li><a href="index.php?id=352" title="Teppiche" onfocus="blurLink(this);"  >Teppiche</a></li>
    </ul>
  </li>
  <li><a href="index.php?id=269" title="Trennwände" onfocus="blurLink(this);"  >Trennwände</a></li>
 </ul>
</li>
<li class="sub">UNTERNEHMEN
 <ul>
  <li><a href="index.php?id=407" title="Unternehmensprofil" onfocus="blurLink(this);"  >Unternehmensprofil</a></li>
  <li><a href="index.php?id=271" title="Facts &amp; Figures" onfocus="blurLink(this);"  >Facts & Figures</a></li>
 </ul>
</li>
<li class="sub">REFERENZEN
<ul>
<li><a href="index.php?id=273" title="Referenzliste" onfocus="blurLink(this);"  >Referenzliste</a></li>
<li><a href="index.php?id=274" title="Referenzbilder" onfocus="blurLink(this);"  >Referenzbilder</a></li>
</ul>
</li>
<li class="sub">KONTAKT
<ul>
<li><a href="index.php?id=276" title="Österreich" onfocus="blurLink(this);"  >Österreich</a></li>
<li><a href="index.php?id=277" title="International" onfocus="blurLink(this);"  >International</a></li>
<li><a href="index.php?id=278" title="Lizenzpartner" onfocus="blurLink(this);"  >Lizenzpartner</a></li>
<li><a href="index.php?id=331" title="Händler/Vertrieb" onfocus="blurLink(this);"  >Händler/Vertrieb</a></li>
</ul>
</li>
<li class="sub">PRESSE
<ul>
<li><a href="index.php?id=282" title="Presseinformationen" onfocus="blurLink(this);"  >Presseinformationen</a></li>
<li><a href="index.php?id=284" title="Archiv" onfocus="blurLink(this);"  >Archiv</a></li>
<li><a href="index.php?id=283" title="Medienberichte" onfocus="blurLink(this);"  >Medienberichte</a></li>
<li><a href="index.php?id=285" title="Pressefotos" onfocus="blurLink(this);"  >Pressefotos</a></li>
<li><a href="index.php?id=286" title="Facts &amp; Figures" onfocus="blurLink(this);"  >Facts & Figures</a></li>
<li><a href="index.php?id=287" title="Pressekontakt" onfocus="blurLink(this);"  >Pressekontakt</a></li>
</ul><
/li>
<li class="sub">JOBS
<ul>
<li><a href="index.php?id=408" title="Jobbörse" onfocus="blurLink(this);"  >Jobbörse</a></li>
</ul>
</li>
</ul>
</div>

Gibt es denn keine einfache Lösung um das JS nach der Klasse "sub" suchen zu lassen und dem LI das die Klasse "sub" besitzt noch die "click" (oder eine andere) zuzuweisen ?

Vom Aufbau her ist es ja sonst ident mit dem von Stu.

ArminB · 6. November 2007 14:12

moin,

@GizmotroniX

Sollte mit ein wenig Erweiterung vom CSS gehen.

Als Ansatz:

#menu li ul li.unclick {background:#0099FF;}
#menu li ul li.unclick ul {top:0px;left:160px;}

@Kitsunet

He,he, stimmt das tut es, aber ich mag ein bisschen JS doch lieber, als diese 5000 Zeilen Conditional Code

Hauptsache das Ergebnise stimmt.... #giggle#

GizmotroniX · 6. November 2007 15:28

Hallo nochmal,

ich hab mich aufs Stu Seite noch umgesehen und ein Menü entdeckt dass schon sehr an das rankommt was ich brauche.

http://www.stunicholls.com/menu/tree_frog_horizontal.html

Ich hab das natürlich sofort umgearbeitet. In der Zip war auch geändertes JS drinnen allerdings wird hier für die 2. Ebene mit "mouseover" und "mouseout" gearbeitet. Soweit funktioniert jetzt auch alles bei mir.

Ich müsste nur noch nen Weg finden dass mouseover und mouseout auch nochmal mit onclick zu lösen um wirklich selbst bestimmen zu können wenn das menü erscheint oder verschwinden soll.

Das aktualisierte CSS:

#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);}

Das aktuelle JS:

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", "");
			}
		}
	}

Hat jemand ne Idee ? Wenn ich anstatt mousover und mouseout onclick verwende klappt gar nix mehr. Es scheint wohl dann zu oft onclick vorzukommen.

lG
Roland