Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/07/2013, 08:42
Avatar de don_fransisco
don_fransisco
 
Fecha de Ingreso: junio-2004
Mensajes: 193
Antigüedad: 19 años, 10 meses
Puntos: 1
Problemas con botones jscript

Hola maestros tengo el sigui ente problema con un menu vertical, lo que pasa es que cuando selecciono uno de los cuatro botones quiero que el boton cuando se selecci one quede activo asi como rollover y despu es que se deselecciona el menu el boton vuelva a su estado normal he i ntentado de todo y no logro hacerlo



Código:
 
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
 

/* modifica las caracteristicas de los menus hijos */
function menu_set(){ 
 var i,d='',h="<sty"+"le type=\"text/css\">",tA=navigator.userAgent.toLowerCase();if(window.opera){
 if(tA.indexOf("opera 5")>-1||tA.indexOf("opera 6")>-1){return;}}if(document.getElementById){
 for(i=1;i<20;i++){d+='ul ';h+="\n#menunav "+d+"{position:absolute;left:-9000px;width:11em;}";}
 document.write(h+"\n<"+"/sty"+"le>");}}menu_set();

/* modifica caracteristicas de apertura de menus */
function menu_init(){
 var i,g,tD,tA,tU,pp,lvl,tn=navigator.userAgent.toLowerCase();if(window.opera){
 if(tn.indexOf("opera 5")>-1||tn.indexOf("opera 6")>-1){return;}}else if(!document.getElementById){return;}
 menup=arguments;menuct=new Array;tD=document.getElementById('menunav');if(tD){tA=tD.getElementsByTagName('A');
 for(i=0;i<tA.length;i++){tA[i].menucl=menuct.length;menuct[menuct.length]=tA[i];g=tA[i].parentNode.getElementsByTagName("UL");
 tA[i].menusub=(g)?g[0]:false;ev=tA[i].getAttribute("onmouseover");if(!ev||ev=='undefined'){tA[i].onmouseover=function(){
 menu_trig(this);};}ev=tA[i].getAttribute("onfocus");if(!ev||ev=='undefined'){tA[i].onfocus=function(){menu_trig(this);};}
 if(tA[i].menusub){pp=tA[i].parentNode;lvl=0;while(pp){if(pp.tagName&&pp.tagName=="UL"){lvl++;}pp=pp.parentNode;}
 tA[i].menulv=lvl;}}tD.onmouseout=menu_close;menu_open();}
}

function menu_trig(a){
 var b,t;if(document.menut){clearTimeout(document.menut);}document.menua=1;b=(a.menusub)?'menu_show(':'menu_tg(';
 t='document.menut=setTimeout("'+b+a.menucl+')",160)';eval (t);
}

/*muestra los menus */
function menu_show(a,bp){ 
 var u,lv,oft,ofr,uw,uh,pp,aw,ah,adj,mR,mT,wW=0,wH,w1,w2,w3,sct,pw,lc,pwv,xx=0,yy=0,wP=true;
 var iem=(navigator.appVersion.indexOf("MSIE 5")>-1)?true:false,dce=document.documentElement,dby=document.body;document.menua=1;
 if(!bp){menu_tg(a);}u=menuct[a].menusub;if(u.menuax&&u.menuax==1){return;}u.menuax=1;lv=(menup[0]==1&&menuct[a].menulv==1)?true:false;
 menuct[a].className=menuct[a].className.replace("menutrg","menuon");oft=parseInt(menup[3]);ofr=parseInt(menup[4]);
 uw=u.offsetWidth;uh=u.offsetHeight;pp=menuct[a];aw=pp.offsetWidth;ah=pp.offsetHeight;while(pp){xx+=(pp.offsetLeft)?pp.offsetLeft:0;
 yy+=(pp.offsetTop)?pp.offsetTop:0;if(window.opera||navigator.userAgent.indexOf("Safari")>-1){
 if(menuct[a].menulv!=1&&pp.nodeName=="BODY"){yy-=(pp.offsetTop)?pp.offsetTop:0;}}pp=pp.offsetParent;}
 if(iem&&navigator.userAgent.indexOf("Mac")>-1){yy+=parseInt(dby.currentStyle.marginTop);}adj=parseInt((aw*ofr)/100);mR=(lv)?0:aw-adj;
 adj=parseInt((ah*oft)/100);mT=(lv)?0:(ah-adj)*-1;w3=dby.parentNode.scrollLeft;if(!w3){w3=dby.scrollLeft;}w3=(w3)?w3:0;
 if(dce&&dce.clientWidth){wW=dce.clientWidth+w3;}else if(dby){wW=dby.clientWidth+w3;}if(!wW){wW=0;wP=false;}wH=window.innerHeight;
 if(!wH){wH=dce.clientHeight;if(!wH||wH<=0){wH=dby.clientHeight;}}sct=dby.parentNode.scrollTop;if(!sct){sct=dby.scrollTop;if(!sct){
 sct=window.scrollY?window.scrollY:0;}}pw=xx+mR+uw;if(pw>wW&&wP){mR=uw*-1;mR+=10;if(lv){mR=(wW-xx)-uw;}}lc=xx+mR;if(lc<0){mR=xx*-1;}
 pw=yy+uh+ah+mT-sct;pwv=wH-pw;if(pwv<0){mT+=pwv;}u.style.marginLeft=mR+'px';u.style.marginTop=mT+'px';
 if(menup[2]==1){if(!iem){menu_anim(a,20);}}u.className="menushow";
}

/* oculta los menus */
function menu_hide(u){ 
 var i,tt,ua;u.menuax=0;u.className="menuhide";ua=u.parentNode.firstChild;ua.className=ua.className.replace("menuon","menutrg");
}

function menu_tg(a,b){ 
 var i,u,tA,tU,pp;tA=menuct[a];pp=tA.parentNode;while(pp){if(pp.tagName=="UL"){break;}pp=pp.parentNode;}if(pp){
 tU=pp.getElementsByTagName("UL");for(i=tU.length-1;i>-1;i--){if(b!=1&&tA.menusub==tU[i]){continue;}else{menu_hide(tU[i]);}}}
}

function menu_close(evt){
 var pp,st,tS,m=true;evt=(evt)?evt:((event)?event:null);st=document.menua;if(st!=-1){if(evt){
 tS=(evt.relatedTarget)?evt.relatedTarget:evt.toElement;if(tS){pp=tS.parentNode;while(pp){if(pp&&pp.id&&pp.id=="menunav"){m=false;
 document.menua=1;break;}pp=pp.parentNode;}}if(m){document.menua=-1;if(document.menut){clearTimeout(document.menut);}
 document.menut=setTimeout("menu_clr()",360);}}}
}

function menu_clr(){
 var i,tU,tUU;document.menua=-1;tU=document.getElementById('menunav');if(tU){tUU=tU.getElementsByTagName("UL");if(tUU){
 for(i=tUU.length-1;i>-1;i--){menu_hide(tUU[i]);}}}
}

/* crea la animaci�n */
function menu_anim(a,st){ 
 var g=menuct[a].menusub,sp=30,inc=20;st=(st>=100)?100:st;g.style.fontSize=st+"%";if(st<100){st+=inc;setTimeout("menu_anim("+a+","+st+")",sp);}
}

function menu_mark(){document.menuop=arguments;}

function menu_open(){ 
 var i,x,tA,op,pp,wH,tA,aU,r1,k=-1,kk=-1,mt=new Array(1,'','');if(document.menuop){mt=document.menuop;}op=mt[0];if(op<1){return;}
 tA=document.getElementById('menunav').getElementsByTagName("A");wH=window.location.href;r1=/index\.[\S]*/i;for(i=0;i<tA.length;i++){
 if(tA[i].href){aU=tA[i].href.replace(r1,'');if(op>0){if(tA[i].href==wH||aU==wH){k=i;kk=-1;break;}}if(op==2){if(tA[i].firstChild){
 if(tA[i].firstChild.nodeValue==mt[1]){kk=i;}}}if(op==3 && tA[i].href.indexOf(mt[1])>-1){kk=i;}if(op==4){for(x=1;x<mt.length;x+=2){
 if(wH.indexOf(mt[x])>-1){if(tA[i].firstChild&&tA[i].firstChild.data){if(tA[i].firstChild.data==mt[x+1]){kk=i;break;}}}}}}}k=(kk>k)?kk:k;
 if(k>-1){pp=tA[k].parentNode;while(pp){if(pp.nodeName=="LI"){pp.firstChild.className="menumark"+" "+pp.firstChild.className;}
 pp=pp.parentNode;}}if(kk>-1){document.menuad=1;}menu_adma();menu_admb();
}

</script>
 <style>
 

/********************************************/

#sidebar {
	color: #000;
	background-color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px 0 3em 0;
	padding: 20;
	font-size: 16px;
	font-weight: bolder;	
}
#menunav {
	
	margin: 0;
	padding:0;
	background-image:url(boton.gif);	
		color: #000;	
}
#menunav li {
	
	list-style-type: none;
	margin: 0;
	padding: 50;
	border-bottom: 0px solid #0074E3;
}
#menunav ul {
	
	border-top: 1px solid #eeeeee;
	margin:0;
	padding:0;
	z-index: 10000;
	
	
}
 

#menunav ul li a:hover{
	
			background-color:#0088ff;
	}
#menunav ul li {

	background-color:#000099;
	color:#FFF;	
	width:200px;
	height:20px;
	padding-top:0px ;
	padding-bottom:10px;
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #ffffff;
}
#menunav a {

	padding: 14px 12px 12px 10px;
	display: block;
	text-decoration: none;
	background-color: transparent;
	color:#FFF;	
	border-top: 0px solid #0061BD;
	border-right: 0px solid #0061BD;
	border-bottom: 0;
	border-left: 0px solid #0061BD;
	line-height:1;
}
.menutrg1{
	color: #000;
	}
/*controla la botonera */

 
/*the normal trigger link */
 
/*controla el desplazamiento y alcance de los submenus */

#menunav .menuhide {
	
	left: -9000px;
	border: 0;
}
#menunav .menushow {
	left: auto;
	z-index: 20000;
}
/*modifica el menu madre */
.foto{
	background-image:url(boton2.png);}
.foto1{
	background-image:url(boton1.png);} 	
#sidebar {
	color:#FFF;
	position: absolute;
	top: 150px;
	left: 10px;
	width: 155px;
	font-size: 0.85em;
}
.menutrg1{ 
color: #000;
}
 </style>
<link href="menu/menu.css" rel="stylesheet" type="text/css">
</head>
<script>
$(document).ready(function(){
	$("#boton1").mouseover(function(e) {
		$("boton1").attr("src", "boton2.png"); 
    });
	 
});

</script>
<body onLoad="menu_init(0,0,1,8,0)">
<h1>Menú vertical desplegable con Javascript (Ejemplo)</h1>
<p>Aprende como crearlo en este tutorial: <a href="http://www.baluart.net/articulo/menu-vertical-desplegable-con-css-y-javascript">Menú Vertical Desplegable con CSS y JavaScript</a></p>
<div id="sidebar">
  <ul id="menunav">
    
    <li><a name="boton1" id="boton1" href="#" class="menutrg1">GASTRONOMIA</a>
      <ul>
        <li><a href="#" class="menutrg2">Botón 1 - 1</a></li>
        <li><a href="#"  class="menutrg2">Botón 1 - 2</a></li>
        <li><a href="#" class="menutrg2">Botón 1 - 3</a></li>
      </ul>
    </li>
    <li><a href="#" class="menutrg1">ENERIGIA</a>
      <ul>
        <li><a href="#" class="menutrg2">Botón 2 - 1</a></li>
        <li><a href="#" class="menutrg2">Botón 2 - 2</a></li>
        <li><a href="#" class="menutrg2">Botón 2 - 3</a></li>
        <li><a href="#" class="menutrg2">Botón 2 - 4</a></li>
      </ul>
    </li>
    <li><a href="#" class="menutrg1">INDUSTRIAL</a>
      <ul>
        <li><a href="#" class="menutrg">Botón 3 - 1</a>
          <ul>
            <li><a href="#">Botón 3 - 1 - 1</a></li>
            <li><a href="#">Botón 3 - 1 - 2</a></li>
            <li><a href="#">Botón 3 - 1 - 3</a></li>
            <li><a href="#">Botón 3 - 1 - 4</a></li>
          </ul>
        </li>
        <li><a href="#" class="menutrg">Botón 3 - 2</a>
          <ul>
            <li><a href="#">Botón 3 - 2 - 1</a></li>
            <li><a href="#">Botón 3 - 2 - 2</a></li>
            <li><a href="#">Botón 3 - 2 - 3</a></li>
          </ul>
        </li>
        <li><a href="#" class="menutrg">Botón 3 - 3</a>
          <ul>
            <li><a href="#">Botón 3 - 3 - 1</a></li>
            <li><a href="#">Botón 3 - 3 - 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" class="menutrg1">SALDOS</a></li>
  </ul>
</div>
</body>
</html>
__________________
www.webeconomicas.cl