drop menü, selbst öffnen ?

P

phpMars

Erfahrenes Mitglied
Also, ich habe folgendes Problem:
Bei dieser Navigation muss man vorerst auf "weg damit" klicken bevor sich das eigentliche Menü öffnet.
Soweit schön und gut. Es funktioniert wie es eigentlich soll. Aber ich möchte das man nicht auf "weg damit" klicken muss um zu den Links zu kommen. Sie sollen gleich aufgeklappt sein....

PHP: 
<script src="scripts/prop.js" type="text/javascript"></script>
<script src="scripts/tree.js" type="text/javascript"></script>
<script src="scripts/param.js" type="text/javascript"></script>

prop.js:
PHP: 
Browser={isSupported:function(){return(Boolean(document.getElementsByTagName)&&Boolean(document.getElementById));},id:new function(){var ua=navigator.userAgent;var OMNI=ua.indexOf("Omni")>0;this.OP5=ua.indexOf("Opera 5")>=0||ua.indexOf("Opera 6")>=0;this.OP7=ua.indexOf("Opera 7")>=0;this.MAC=ua.indexOf("Mac")>0;if(!this.OP5&&!OMNI){this.IE5=ua.indexOf("MSIE 5")>0;this.IE5_0=ua.indexOf("MSIE 5.0")>0;this.NS6=ua.indexOf("Gecko")>0;this.MOZ=this.NS6&&ua.indexOf("Netscape")==-1;this.MAC_IE5=this.MAC&&this.IE5;this.IE6=ua.indexOf("MSIE 6")>0;this.KONQUEROR=ua.indexOf("Konqueror/")>0;}}};var px="px";TokenizedExps={};function getTokenizedExp(t){var x=TokenizedExps[t];if(!x)
x=TokenizedExps[t]=new RegExp("\\b"+t+"\\b");return x;}function hasToken(s,t){return getTokenizedExp(t).test(s);};function getChildNodesWithClass(p,kl){var coll=p.childNodes;var rc=[];var exp=getTokenizedExp(kl);for(var i=0,n=0;i<coll.length;i++)
if(exp.test(coll[i].className))
rc[n++]=coll[i];return rc;}function getElementsWithClass(p,t,kl){var rc=[];var exp=getTokenizedExp(kl);var coll=(t=="*"&&p.all)?p.all:p.getElementsByTagName(t);for(var i=0,n=0;i<coll.length;i++){if(exp.test(coll[i].className))
rc[n++]=coll[i];}return rc;}function get_elements_with_class_from_classList(el,t,classList){var rc=new Array(0);var coll=(t=="*"&&el.all)?el.all:el.getElementsByTagName(t);var exps=[];for(var i=0;i<classList.length;i++)
exps[i]=getTokenizedExp(classList[i]);for(var j=0,coLen=coll.length;j<coLen;j++){kloop:for(var k=0;k<classList.length;k++){if(exps[k].test(coll[j].className)){rc[rc.length]=coll[j];break kloop;}}}return rc;}function findAncestorWithClass(el,kl){var exp=getTokenizedExp(kl);for(var p=el.parentNode;p!=null;){if(exp.test(p.className) )
return p;p=p.parentNode;}return null;}function getDescendantById(p,id){var childNodes=p.all?p.all:p.getElementsByTagName("*");for(var i=0,len=childNodes.length;i<len;i++)
if(childNodes[i].id==id)
return childNodes[i];return null;}function removeClass(el,kl){el.className=el.className.replace(getTokenizedExp(kl),"").normalize();}
function repaintFix(el){el.style.visibility='hidden';el.style.visibility='visible';}String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"");};String.prototype.normalize=function(){return this.trim().replace(/\s\s+/g," ");};
if(!Array.prototype.unshift)
Array.prototype.unshift=function(){this.reverse();for(var i=arguments.length-1;i>-1;i--)
this[this.length]=arguments[i];this.reverse();return this.length;};

tree.js:
PHP: 
function toggleMenu(el){if(Browser.id.OP5||Browser.id.NS4) return;var l=Btn.gL(el);if(l.isDp){if(TreeParams.OPEN_MULTIPLE_MENUS||l.m.ct.aM==l.m){l.m.cS();l.m.ct.aM=null;}}else{if(TreeParams.OPEN_MULTIPLE_MENUS||l.m.ct.aM==null ){l.m.oS();l.m.ct.aM=l.m;}else{l.m.ct.aM.cS();if(!TreeParams.OPEN_WHILE_CLOSING){if(l.m.ct.aM!=l.m)
l.m.ct.aM.mic=l.m;else{l.m.mic=null;l.m.oS();}}else{l.m.oS();l.m.ct.aM=l.m;}}}}function activateMenu(id){if(!window.toggleMenu||Browser.id.OP5)
return;var b=document.getElementById(id);if(!b) return;var parentMenuEl=findAncestorWithClass(b,"menu");if(parentMenuEl!=null){var bId=parentMenuEl.id.replace(/Menu$/,"");activateMenu(bId);}var l=Btn.gL(getElementsWithClass(b,"*","buttonlabel")[0]);if(!l.isDp){toggleMenu(l.el);l.isDp=true;}}function buttonOver(el){window.status=el.parentNode.id;l=Btn.gL(el);if(hasToken(l.el.className,"labelHover"))
return;l.el.className+=" labelHover";}function buttonOff(l){window.status=window.defaultStatus;removeClass(l,"labelHover");}if(typeof document.getElementsByTagName=="undefined"||Browser.id.OP5)
buttonOver=buttonOff=function(){};Btn=function(el,cat){this.el=el;this.cat=cat;this.m=new Mnu(document.getElementById(this.cat+"Menu"),this);var ics=el.getElementsByTagName("img");this.ic=(ics.length>0)?ics[0]:null;this.isIc=false;if(el.tagName.toLowerCase()=="img"){this.isIc=true;this.ic=el;}this.isDp=false;};Btn.gL=function(el){var bEl=findAncestorWithClass(el,"button");for(var m in Mns)
if(Mns[bEl.id]!=null)
return Mns[bEl.id].ob;return new Btn(el,bEl.id);};Btn.prototype.sdl=function(){if(this.isIc)
return void(this.ic.src=TreeParams.CLOSED_MENU_ICON);removeClass(this.el,"labelHover");removeClass(this.el,"labelDown");if(this.ic!=null)
this.ic.src=TreeParams.CLOSED_MENU_ICON;};Mnu=function(el,l){this.ob=l;this.id=l.cat;this.el=el;this.its=getChildNodesWithClass(el,"menuNode");this.its.unshift(el);this.all=getElementsWithClass(el,"*","menuNode");this.all.unshift(el);this.cur=0;this._r=null;this.ct=this.getC();this.aM=null;this.mic=null;Mns[this.id]=this;};Mns={};Mnu.prototype={oS:function(){if(this.isO) return;if(this.ob.ic!=null)
this.ob.ic.src=TreeParams.OPEN_MENU_ICON;if(this.isC){this.cE();if(this.itc){this.ito=this.itc.reverse();this.cur=this.itc.length-this.cur;}}else{this.cur=0;this.ito=new Array();if(this.itc)
this.ito=this.itc.reverse();else
this.ito=this.its;if(!this.ob.isIc)
this.ob.el.className+=" labelDown";}this.isC=false;this.isO=true;if(this.ito[0]!=this.el)
this.ito.reverse();this.pat=setInterval("Mns."+this.id+".o()",TreeParams.TIME_DELAY);this.ob.isDp=true;},cS:function(){if(this.isC) return;if(this.isO){this.oE();}else{this.isO=false;this.cur=0;this.itc=new Array();for(var i=this.all.length-1,n=0;i>0;i--)
if(this.all[i].style.display=="block")
this.itc[n++]=this.all[i];}this.itc[this.itc.length]=this.el;this.pat=setInterval("Mns."+this.id+".c()",TreeParams.TIME_DELAY);this.isC=true;this.ob.isDp=false;},o:function(){this.ito[this.cur].style.display="block";if(++this.cur==this.ito.length)
this.oE();},c:function(){this.itc[this.cur].style.display="none";if(++this.cur>=this.itc.length)
this.cE();},oE:function(){clearInterval(this.pat);this.isO=false;this.itc=this.ito.reverse();this.cur=this.ito.length-this.cur;if(!TreeParams.OPEN_MULTIPLE_MENUS&&this.ct.aM!=this)
this.cS();this.ct.aM=this;},cE:function(){clearInterval(this.pat);this.isC=false;if(this.cur>=this.itc.length)this.ob.sdl();if(!TreeParams.OPEN_WHILE_CLOSING&&this.ct.aM&&this.ct.aM.mic!=null&&this.ct.aM.mic!=this){this.ct.aM.mic.oS();if(this.mic)
this.ct.aM=this.mic;}else{}this.mic=null;if(Browser.id.IE6)
setTimeout("repaintFix(document.getElementById('"+this.el.id+"'));",50);},getC:function(){var p=findAncestorWithClass(this.el,"menu");if(p!=null)
return Mns[p.id.replace(/Menu$/,"")];if(!this._r){var rt=findAncestorWithClass(this.el,"AnimTree");if(!rt)
rt=document.body;if(!rt.id)
rt.id="AnimTree_"+Math.round(Math.random()*1E5);if(Trees[rt.id]!=null)
this._r=Trees[rt.id];else
this._r=new Tree(rt);return this._r;}}};Tree=function(el){this.el=el;this.aM=null;this.id=el.id;Trees[this.id]=this;};Trees={};if(document.getElementById&&!Browser.id.OP5&&!window.Tree_inited){document.writeln("<style type='text/css'>","\n",".menu,.menuNode{display:none;}\n","","<"+"/style>");window.Tree_inited=true;}


param.js:
PHP: 
TreeParams = {
      OPEN_MULTIPLE_MENUS    : false,
      OPEN_WHILE_CLOSING     : true,
      TIME_DELAY             : 20,
      OPEN_MENU_ICON         : "",
      CLOSED_MENU_ICON       : "" 
};






PHP: 
<table height="175" width="123" cellpadding="0" cellspacing="0" border="0">
              <tr> 
                <td valign="top"> 
                  <div align="left"> 
                    <div id="homepagemenu" class="button"> <span class="buttonlabel" onClick="toggleMenu(this)"><a href="#">weg 
                      damit</a></span></div>
                    <div class="menu" id="homepagemenu"> 
                      <div id="punkt1" class="button menuNode"> <span class="buttonlabel level1label" onClick="toggleMenu(this)"><a href="#">men&uuml;punkt1</a></span></div>
                      <div class="menu" id="punkt1menu"> 
                        
						<div class="menuNode"> <a href="klasse1">klasse1</a></div>
                        <div class="menuNode"> <a href="klasse2">klasse2</a></div>
                        
					   </div>
                      <div id="punkt2" class="button menuNode"> <a href="#"><span class="buttonlabel level1label" onClick="toggleMenu(this)">men&uuml;punkt2</span></a></div>
                      <div class="menu" id="punkt2Menu"> 
                        
						<div class="menuNode"><a href="2klasse1">klasse1</a></div>
                        <div class="menuNode"> <a href="2klasse1">klasse2</a></div>
                        <div class="menuNode"> <a href="2klasse1">klasse3</a></div>
						
						
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
 
Zuletzt bearbeitet:
Mit der Antwort dauert das noch a bisserl,

....bis die Tutorials.de-Glaskugel aus dem wohlverdienten Sommerurlaub wiederkommt(ein Blick in Selbige wird nämlich nötig sein, um das, was sich hinter den <script>-Tags verbirgt, ausfindig zu machen)

...und bis du dazu in der Lage bist, unter Verwendung von Gross-/Kleinschreibung und wohlverteilten Absätzen eine Frage zu formulieren, welche man nicht erst 20mal lesen muss, bis man ihren Sinn erfasst.
 
Das sieht doch gleich besser aus;)


Ich muss gestehen, dass die Sache bei mir, auch nachdem ich die Smiley-Codes daraus entfernt habe:-), nicht funktioniert.
Deine Frage kann ich aber trotzdem beantworten.

Entferne folgendes:
Code: 
document.writeln("<style type='text/css'>","\n",".menu,.menuNode{display:none;}\n","","<"+"/style>");

....zu finden in tree.js(ziemlich am Schluss)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück