7 replies to this topic

[enecumene]

Pues adaptando un menú desplegable que se muetra al presionar click, pues bien, el menú funciona bien a excepción de un detalle, al desplegarse mueve todo lo que esté debajo de ella hacia abajo, o sea, el menú que se muestra no se coloca por encima sino que arrastra todo hacia abajo, como ejemplo coloco el menú del foro, al pasarle el mouse se despliega los sub-menues pero no mueve el foro hacia abajo sino que se coloca encima, y ese es el efecto que deseo lograr, colocaré los códigos y subiré el archivo .js:

Estilo

css

.button{
	background:url(img/button.png)  -32px right no-repeat;
	color:#FFFFFF;
	clear:both;
	display:block;
	float:left;
	font-size:13px;
	font-weight:bold;
	height:31px;
	line-height:31px;
	width:auto;
	margin-right:30px;
}
	a.button {
		text-decoration:none;
	}
	.button span {
		background:url(img/button.png) left top no-repeat;
		display:block;
		height:31px;
		line-height:31px;
		padding-left:10px;
		padding-right:8px;
		margin-right:20px;
	}
/* -------------------------------------------------------- */
/* MENU														*/
.v-menu{
	border:solid 1px #7F9FBF;
	width:200px;
	clear:both;
}
	ul.v-menu, .v-menu li{
		padding:0; 
		margin:0;
		list-style:none;
	}
	ul.v-menu{
		clear:both;
		margin-top:6px;
		padding:6px 10px;
	}
		.v-menu li a{
			color:#555555;
			font-weight:bold;
			display:block;
			border-top:solid 1px #DEDEDE;
			padding:4px;
			text-decoration:none;
		}
		.v-menu li a:hover{
			color:#999999;
		}

script que se coloca en el html:

html5

<script type="text/javascript">
function showElement(layer){
	var myLayer = document.getElementById(layer);
	if(myLayer.style.display=="none"){
		myLayer.style.display="block";
		myLayer.backgroundPosition="top";
	} else { 
		myLayer.style.display="none";
	}
}
</script>

Aquí es como llamamos el menú:

html5

<a href="#" class="button" onclick="javascript:showElement('v-menu')"><span>Click Here</span></a>
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>
</ul>

Y más abajo anexo el archivo .js, espero me puedan echar una manito.

Saludos.

[felipe]

En internet encontré un código que al parecer no usa Js

Link


Saludos!

[enecumene]

En internet encontré un código que al parecer no usa Js

Link


Saludos!

Gracias felipe, pero no es lo que busco, por dos cosas: una no se despliega por click sino al pasar el mouse y segunda no tiene el efecto toggle.

Saludos.

[felipe]

En internet encontré un código que al parecer no usa Js

Link


Saludos!

Gracias felipe, pero no es lo que busco, por dos cosas: una no se despliega por click sino al pasar el mouse y segunda no tiene el efecto toggle.

Saludos.

Ah ok, ya entiendo ... tocará revisarlo entonces


Saludos!

[pcicom]

Bajate SCRIPTMASTER de softonic.. tiene muchos ejemplos de MENUS, tal vez uno de ellos te sirva..

SCRIPTMASTER es una recopilacion de scripts para la WEB.

[enecumene]

Bajate SCRIPTMASTER de softonic.. tiene muchos ejemplos de MENUS, tal vez uno de ellos te sirva..

SCRIPTMASTER es una recopilacion de scripts para la WEB.

Gracias pcicom, ya lo estoy descargando

[genyus00]

hola. yo cree una pagina con menu desplegable en fireworks y la guarde como .html y luego la abri con delphi como templates, el fireworks crea un archivo mm_menu.js que se encarga de desplegar el menu.

[cesar_cz]

Hola ecumeneme date una vuelta por el código de esta web que hice:

http://www.komax.cl/marcas.php?id=9

Como ves hay dos tipos de menús desplegables implementados en el mismo archivo, uno trabajado con display:table de css y el otro con position...
Saludos