Foros del Web » Programando para Internet » Javascript »

Problemas con botones jscript

Estas en el tema de Problemas con botones jscript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/07/2013, 08:42
Avatar de 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

Etiquetas: botones, html, jquery, js, jscript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:57.