Como hago este menu ?

walo · #1 (**permalink**) 16/02/2005, 05:01

Hola,

Necesito hacer un menu desplegable en JS. Yo tengo alguna nociones de JS, pero al parecer no muchas por que no logro hacerlo.

Lo que tengo que hacer es este menu
http://www.ihserver.net/da-skin-preview.jpg

Eso esta hecho solo con photoshop, para mostrar.
Si alguien me puede ayudar se lo agredeceria.

walo · #2 (**permalink**) 16/02/2005, 16:42

Por cierto, me olvidaba.
Se que hay programas que generan menues, como el DHTML Menu Builder, pero no puedo usar eso, ya que esto tiene fines comerciales.

Danger_ · #3 (**permalink**) 16/02/2005, 19:25

pues quizaz si dejas la pagina WEB, nos podamos dar una idea de sus efectos, o tipo de funcionalidades.

un_tio · #4 (**permalink**) 16/02/2005, 22:04

¡Joder, ese menú de esa página mola un huevo! Me imagino que será lo mismo de siempre, pero usando gráficos bonitos (bueno, tal vez además hayan definido objetos y cosas así).

¿Alguien sabe cómo dar esa apariencia gráfica tan espectacular a unos simples "selects y botones"?

daidalos · #5 (**permalink**) 05/03/2005, 20:36

He visto varias opciones para hacer esos menus, el macromedia, (dreamweaver y firefox) tiene una opción para hacer los menus bonitos, tambien estan las extenciones y un monton de aplicaciones. Cuando se hace asi el menú, por lo menos el macromedia deja un monton de mugre y hace unos scripts gigantescos. Una opción es este menú (abajo al final del mensaje), lo que hace es simplemente ocultar y mostrar una capa dejandola una cantidad de tiempo activa. Para lograr que se vea muy bonita hay que trabajarle con CSS, el efecto de transparcia tambien es una propiedad css pero no es estandar, solo sirve en explorer. El script lo creo Omar Serrano, y lo modifico Esteban Rozo (al cesar lo que es del cesar) yo no hice nada pues no se java script
aqui va toda la página con el script, un CSS y la manera de llamarlo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

//Función que cambia la propiedad CSS oculto/visible de la tabla

var id
var temporizador = 500

function Asignar(variable)
{ document.getElementById(id).style.visibility = variable }

function Aparece(elemento ,modo)
{
id = elemento
if (modo == "out")
{
CVariable = "Hidden"
setTimeout('Asignar(CVariable)',temporizador)
}

if (modo == "over")
{
CVariable = "Visible"
Asignar(CVariable)
}
}

</script>
<style>
.menudesplegable {
visibility: hidden;
z-index: 2;
position: absolute;
left: 100px;
top: 65px;
padding: 15px;
}
</style>
</head>

<body>
<table width="179" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCFFFF" id="menu1">
<tr>
<td width="173" onmouseOver="Aparece('tabla1','over')" onmouseOut="Aparece('tabla1','out')"><a href="#" onmouseOver="Aparece('tabla1','over')" onmouseOut="Aparece('tabla1','out')">Menus
desplegables</a></td>

</tr>
</table>
<table width="177" border="0" cellpadding="0" cellspacing="0" onMouseOver="Aparece('tabla1','over')" onMouseOut="Aparece('tabla1','out')" class="menudesplegable" id="tabla1" style="left: 100px; top: 70px">
<tr>
<td width="171" height="97" valign="top" bgcolor="#FF9933">
<p><a href="#">hola 1</a></p>
<p><a href="#">hola 2</a></p>
<p><a href="#">hola 3</a></p>
</td>

</tr>
</table>
<table width="243" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC33" style="z-index: 1">
<tr>
<td width="243" height="294" valign="top">
<p>Texto texto</p>
</td>
</tr>
</table>
</body>
</html>

yokoshima · #6 (**permalink**) 07/03/2005, 07:02

daidalos te pasaste es lo que andaba buscando por bastante tiempo...

muchas gracias.......

un_tio · #7 (**permalink**) 13/06/2005, 12:32

¿Cómo se hacen menúes bonitos desde Dreamweaver, como comenta daidalos? ¿Desde qué opción, alguien lo sabe?