En este grupo En todos

Foro de Javascript



ayuda con un menu desplegable

carmen
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 13/08/2010

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 vertical 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 ES LA PARTE DE JAVASCRIPT YO LO TENGO EN UAN CARPETA PERO LO COLOCO AQUI PARA Q ME ENTIENDAN

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!

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

You shouldn't have to change anything below this

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

//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),nFromtop)

Else{

OTopMenu[i][0]. MoveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween))

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();">

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

ESTA ES LA PARTE DE HATML DEL CODIGO 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>
------------------------------------------------

ESTE ES LA PARTE DE MI PAGINA DOND YO QUIERO Q APAREZCA EL MENU DSPLEGABLE PERO ESTE NO ME SALE:

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


Ferney Pérez
Analisis y desarrollo de sistemas de i...
Escrito por Ferney Pérez
el 19/08/2010

Hola.

A ver si entendí. Nesecitas una lista verdad? Y por qué no hacer un combobox?

Eso iría más o menos así:


<select name="Nombre" id="Nombre">
<option value="Item_1" selected="selected">Item_1</option>
<option value="Item_2">Item_2</option>
<option value="Item_n">Item_n</option>
</select>


Espero sirva. Hasta pronto.

Carmen Iriarte
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 19/08/2010

Hola lo que pasa es que en los requerimientos me exigen un menu desplegale, de cualquier tipo pero que sea menu desplegable. Consegui varios modelos y me llamo la atencion el menu desplegable tipo acordeon pero no he podido adaptarlo a mi pagina... Y no se como hacer he intentado todo. Sera que lo estoy colocando dondo no es? Es que no se poque no me sale porq yo lo pruebo en una pagina solo el menu y si sale sale el efecto de acordeon y todo pero en mi pagina nop... Que puedo hacer? Plisssss......

Ferney Pérez
Analisis y desarrollo de sistemas de i...
Escrito por Ferney Pérez
el 19/08/2010

Rayos! A ya. Si. Ya se cúal es. Aquí está:


Http://www.abcdisegno.com/archivos/javascript/menu-acordeon. Html

Http://www.abcdisegno.com/archivos/javascript/menu. Rar

Dale ver código fuente que está bien comentado. Para adaptarlo a la página hay que ser cuidadoso con las etiquetas que no queden mal cerradas o peor sin cerrar! Yo normalmente lo dejo dentro de una celda de una tabla.

Qué herramienta usas para construir tu página?

Yo uso una herramienta muy buena llamada Dreamweaver!

Saludos


Fuente: https://www.abcdisegno.com/menu-desplegable-javascript/

Carmen Iriarte
Distrito Federal, Ve...
Escrito por Carmen Iriarte
el 20/08/2010

Si tambien uso Dreamweaver, es una muy buena herramienta, y gracias por el link voy a revisar a ver si logro adaptarlo a mi pagina sino cualquier pego un grito... Jejejeje....