Foros del Web » Programando para Internet » Javascript »

ayuda con menu desplegable en java script

Estas en el tema de ayuda con menu desplegable en java script en el foro de Javascript en Foros del Web. buenos días, necesito ayuda es que estoy haciendo una pagina web en html hice un tipo menu pero en html con una tabla inserte unas ...
  #1 (permalink)  
Antiguo 13/08/2010, 07:22
 
Fecha de Ingreso: junio-2010
Mensajes: 24
Antigüedad: 13 años, 10 meses
Puntos: 0
ayuda con menu desplegable en java script

buenos días, necesito ayuda es que estoy haciendo una pagina web en html hice un tipo menu pero en html con una tabla inserte unas imagenes como link pero la ultima imagen necesito que tenga una menu desplegable para que no se vea tan cargada la pagina, busque varios ejemplo en internet me gustaron varios los modifique pero ahora nose como insertarlos en mi pagina, porque lo he intentado pero no me sale el menu desplegable, yo creo que es el"div" del codigo que no me dejar ver el menu bueno para que me entiendad mejor les paso el codigo qvi por internet y modifique pero en mi pagina no me da por favor ayudenme.......

ESTA PARTE ES EL JAVASCRIPT LO COLOCO DE PRIMERO PERO ESTA EN UNA CARPETA FUERA DEL HTML .....

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/************************************************** ******************************
If you want to change the appearance of the text, background-colors, size or
anything do that in the style tag above.
This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help...
************************************************** **************************/
/************************************************** *************************
Variables to set.
************************************************** **************************/
//There are 2 ways these menus can be placed
// 0 = column
// 1 = row
nPlace=0

//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var nNumberOfMenus=2
var nMwidth=150 //The width on the menus (set the width in the stylesheet as well)
var nPxbetween=20 //Pixels between the menus
var nFromleft=10 //The first menus left position
var nFromtop=85 //The top position of the menus
var nBgcolor='#CECFCE' //The bgColor of the bottom mouseover div
var nBgcolorchangeto='#6380BC' //The bgColor to change to
var nImageheight=45 //The position the mouseover line div will stop at when going up!

//Object constructor
function makeNewsMenu(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document .all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.scrollHeight=bw.ns4?this.css.document.height: this.evnt.offsetHeight
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Objects methods
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_bgChange(color){this.css.backgroundColor=color; this.css.bgColor=color; this.css.background=color;}
function b_clipTo(t,r,b,l){
if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+" ,"+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby +","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
zindex=10
for(i=0;i<=nNumberOfMenus;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[i][1].moveIt(0,nImageheight)
oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0)
if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromto p)
else{
oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbe tween))
oTopMenu[i][0].css.zIndex=zindex--
}
oTopMenu[i][0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)}
function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)}
//Calls the init function onload if the browser is ok...
if (bw.bw) onload = newsMenuInit;
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
---------------------------------------------------------------------------------
ESTE ES EL HTML DEL JAVASCRIPT ANTERIOR DE INTERNET

<HTML>
<HEAD>
<TITLE> NewsMenu </TITLE>
<STYLE type="text/css">
.clTopMenu {position:absolute; width:130px; height:150px; clip:rect(0px 130px 14px 0px); layer-background-color:#eeeeee; background-color:#ffffff; z-index:31; visibility:hidden;}
.clTopMenuBottom {position:absolute; width:126px; height:4px; clip:rect(0px 126px 4px 14px); top:11; layer-background-color:#cecfce; background-color:#cecfce; z-index:2;}
.clTopMenuText {position:absolute; width:135px; left:12px; top:45px; font-family:HandelGothic BT,helvetica,sans-serif; font-size:10px; background-image: url(algo.png); z-index:1;}
</STYLE>
<SCRIPT language="JavaScript" type="text/javascript" src="js/jmenudesple.js"></SCRIPT>

</HEAD>
<BODY bgcolor="#ffffff">

<DIV id="divTopMenu0" class="clTopMenu"><A href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); return false;" onFocus="if(this.blur)this.blur();"><IMG src="herra_boton1.png" width=144 height=42 onMouseOut="" onMouseOver=""
onClick="src='herra_acti1.png'" alt="" border=0 align="top"></A>
<DIV id="divTopMenuText0" class="clTopMenuText"><BR>
&nbsp;&nbsp;&nbsp;<A href=""><IMG src="lista3.png" alt="" style="border: 0px solid ; width: 95px; height: 12px;" onMouseOver="" onMouseOut=""><BR></A>
&nbsp;&nbsp;&nbsp;<A href=""><IMG src="edublog2.png" alt="" style="border: 0px solid ; width: 95px; height: 12px;" onMouseOver="" onMouseOut=""><BR></A>
&nbsp;&nbsp;&nbsp;<A href=""><IMG src="Wiki.png" alt="" style="border: 0px solid ; width: 95px; height: 8px;" onMouseOver="" onMouseOut=""><BR></A>
&nbsp;&nbsp;&nbsp;<A href=""><A href=""><IMG src="comunidades1.png" alt="" style="border: 0px solid ; width: 116px; height: 8px;" onMouseOver="" onMouseOut=""><BR></A>
&nbsp;&nbsp;&nbsp;<A href=""><IMG src="videoblog2.png" alt="" style="border: 0px solid ; width: 95px; height: 14px;" onMouseOver="" onMouseOut=""><BR></A>
&nbsp;&nbsp;&nbsp;<A href=""><IMG src="podcasting.png" alt="" style="border: 0px solid ; width: 95px; height: 12px;" onMouseOver="" onMouseOut=""><BR><BR><BR><BR></A>
</DIV>
<DIV id="divTopMenuBottom0" class="clTopMenuBottom"></DIV>
</DIV>


<!-- To add a new menu just copy these lines:
<div id="divTopMenuN" class="clTopMenu"><a href="#" onmouseover="menuOver(N)" onmouseout="menuOut(N)" onclick="topMenu(N); return false;" onfocus="if(this.blur)this.blur();">HEADING IMAGE GOES HERE</a>
<div id="divTopMenuTextN" class="clTopMenuText">
TEXT HERE
</div>
<div id="divTopMenuBottomN" class="clTopMenuBottom"></div>
</div>
And change the letter N to a number higher then the last menu...
(and remember to set the variable nNumberOfMenus in the script to
the same number of menus you have (remember it starts counting
at 0) --><BR><BR>

</BODY>
</HTML>
-------------------------------------------------

ESTA PARTE ES LA IMAGEN QUE QUIERO QUE TENGA EL MENU DESPLEGABLE PERO TRATO DE COLOCOCAR EL CODIGO ANTERIOR AQUI CLARO APARTIR DE LA PARTE DEL <DIV> PERO NO ME MUESTRA NI LA IMAGEN NI EL DESPLEGABLE QUE HAGO POR FAVOR AYUNDEM....

<TR>

<TD>&nbsp;
&nbsp;<A href="herramientas.html"><IMG style="border: 0px solid ; width: 144px;" onMouseOut="src='herra_boton.png'" onMouseOver="src='herra_acti.png'" alt="" src="herra_boton.png"></A></TD>
</TR>

</TBODY>
</TABLE>

</BODY>
</HTML>

Última edición por carmen_iriarte; 13/08/2010 a las 07:28

Etiquetas: desplegable, java
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 01:23.