Zum Inhalt springen

Horiz, Click Menü um weitere Ebene erweitern

Erstellt am 6. November 2007 · 13 Antworten · letzte Antwort am 6. November 2007

Tags: Frage

GizmotroniX ·

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 = <div id="outer">|</div>
        # Hauptmenue
        1 = TMENU
        1 {
            wrap = <ul id="menu"> | </ul>
                expAll = 1
                
                NO.ATagTitle.field = subtitle//title
                NO.wrapItemAndSub = <li> | </li> 
                
                
        IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li class="sub"> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                        doNotLinkIt = 1
                }
        }
        
        2 = TMENU
        2 {
                wrap = <ul> | </ul><!--[if lte IE 6]></a><![endif]-->
                expAll = 1
                
                NO.ATagTitle.field = subtitle//title
                NO.wrapItemAndSub = <li> | </li> 
                
                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li class="unclick"> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        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<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";
				}
			}
		}
	}

Ich vermute das Probleme im JS dass ja dem <li> 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 <li> 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 ·

Hallo,

am besten ist wohl du fragst den Ersteller des Scripts. JS Profis sind hier weniger zu treffen (nehm ich einfach mal an)

georg

GizmotroniX ·

OK,

ich wollt auch nur sichergehen dass es viel. doch nicht mit CSS gelöst werden kann und ich unnötig herumexperimentiere.

Aber soweit ich das JS verstehe glaube ich nicht. Denn das JS weisst ja das "onclick" zu was ja bewirkt dass das Menü auf oder zuklappt. Mit CSS kann man sowas ja nicht realisieren.

Falls doch jemand ne Idee hat bitte posten ! Danke !

Unbekannter Benutzer ·

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 ·

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

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

GizmotroniX ·

@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 ·

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 ·

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 ·

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 ·

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