Menu escondido

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

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

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

¡Micronet!

16 Noviembre 2011, 07:45 AM Ultima modificación: 16 Noviembre 2011, 15:00 PM por ¡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

#1
16 Noviembre 2011, 07:47 AM

adastra

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

#!drvy

#3
16 Noviembre 2011, 16:13 PM Ultima modificación: 16 Noviembre 2011, 16:17 PM por drvy | BSM
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!

#4
17 Noviembre 2011, 05:42 AM
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

#5
17 Noviembre 2011, 05:46 AM
Slideup.


Saludos
Imprimir
Ir Arriba Páginas1
Acciones del Usuario