Imprimir Página - Menu escondido

Título: Menu escondido
Publicado por: ¡Micronet! en 16 Noviembre 2011, 07:45 am

Hola que tal espero me puedan ayudar mi objetivo es:

Quiero hacer un menu en mi pagina web... pero quiero que los menus esten ocultos que en el momento de que pase mi raton, sobre alguna pestallita me despliegue el cuadrito que me diga una opcion

:S y no encuentro ningun ejemplo para que les pueda explicar de mejor manera :S

No busco un menu que despliegue opciones... busco un menu que en el momento de que pase mi raton, me salga el cuadrito donde diga Inicio, Blog, Quien soy o cosas asi... pero lo que implemento son botones creados en photoshop... y los quiero poner en la parte izquierda solo una pestallita de cada boton y que cuando pase el mouse, me salga "la opcion", "el boton"....

Espero me entiendan y me puedan ayudar, aunque sea si encuentran alguna pagina con algo parecido que trato de escribir seria de mucha ayuda, asi ya tendria un ejemplo de lo que estoy buscando saludos :( espero su ayuda y se les agradecera de todo corazon :)

Por si no me supe explicar aqui un prototipo en imagen de la interfaz del menu que busco:

Citar

(http://i288.photobucket.com/albums/ll194/SonidoAzul/Idea.jpg)

Gracias a: drvy | BSM , por tu opcion pero no traia el menu que busco jeje. Gracias de todos modos :) (Y)

Título: Re: Menu escondido
Publicado por: #!drvy en 16 Noviembre 2011, 07:47 am

Dropdown ?

-> 30 ejemplos de menu's dropdown (http://www.hongkiat.com/blog/drop-down-menu-30-free-scripts-to-enhance-header-navigation/)

Saludos

Título: Re: Menu escondido
Publicado por: adastra en 16 Noviembre 2011, 10:54 am

Los ejemplos que te han dado estan bien para lo que necesitas, solamente debes manejar el evento onmouseover del botón (o elemento HTML que manejes).

Título: Re: Menu escondido
Publicado por: #!drvy en 16 Noviembre 2011, 16:13 pm

Código

<html>
<head>
<title>Mi super menu</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {width:400px; text-align:center;}
.menu {min-height:50px;}
.menuitem {height:5px; width:50px; background:#000; color:#FFF; float:left; margin-top:15px; margin-right:5px; padding:5px; display:block;}
.menuitem:hover {margin-top:-5px; height:25px;}
.clear {clear:both;}
</style>
</head>
<body>
	<div class="menu">
		<div class="menuitem">hola</div>
                <div class="menuitem">adios</div>
                <div class="menuitem">xD</div>
        </div>
	<div class="clear"></div>
        contenido...
</body>
</html>

Adapta lo a tu gusto =)

Saludos

Título: Re: Menu escondido
Publicado por: ¡Micronet! en 17 Noviembre 2011, 05:42 am

Cita de: drvy | BSM en 16 Noviembre 2011, 16:13 pm

Código

<html>
<head>
<title>Mi super menu</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {width:400px; text-align:center;}
.menu {min-height:50px;}
.menuitem {height:5px; width:50px; background:#000; color:#FFF; float:left; margin-top:15px; margin-right:5px; padding:5px; display:block;}
.menuitem:hover {margin-top:-5px; height:25px;}
.clear {clear:both;}
</style>
</head>
<body>
	<div class="menu">
		<div class="menuitem">hola</div>
                <div class="menuitem">adios</div>
                <div class="menuitem">xD</div>
        </div>
	<div class="clear"></div>
        contenido...
</body>
</html>

Adapta lo a tu gusto =)

Saludos

Muchisimas gracias amigo :) lo que estaba buscando...
sabes de casualidad como se llama ese efecto?... :) para saber su nombre jejeje :), si no no hay problema MUCHSIMAS GRACIAS ;-)

Título: Re: Menu escondido
Publicado por: #!drvy en 17 Noviembre 2011, 05:46 am

Slideup.

Saludos

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: ¡Micronet! en 16 Noviembre 2011, 07:45 am