Menu escondido

Iniciado por ¡Micronet!, 16 Noviembre 2011, 07:45 AM

0 Miembros y 1 Visitante están viendo este tema.

¡Micronet!

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


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

"La Tarea No Se Hace, Pero No Indica Que No Se Ayude Al Estudiante"

#!drvy


adastra

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

#!drvy

#3
Código (html4strict) [Seleccionar]

<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

¡Micronet!

Cita de: drvy | BSM en 16 Noviembre 2011, 16:13 PM
Código (html4strict) [Seleccionar]

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

"La Tarea No Se Hace, Pero No Indica Que No Se Ayude Al Estudiante"

#!drvy