:: CP - Recursos Web ::

Menu 3D flip

Menu 3D Flip

Menu 3D Flip es un recurso muy util y eficiente al momento de querer mostrar link's que no se invasivo, ya que al hacer click en un boton aparecera el menu, y lo puedes cerrar facilmente.

[ Ejemplo: ]

Opciones

Prueba

Información:
Nombre: Menu 3D Flip
Fecha: 04-06-2014
Creditos: dynamicdrive.com
Garantia: Si ?

Enlazanos:

Califica este recurso:

[ CÓDIGOS: ]

- Pega esto en "Texto sobre el diseño":

<style>
div.nav{position: relative;-webkit-perspective: 1000px;perspective: 1000px;}
div.nav input{display: none;}
div.nav label.mainlabel, div.nav div.menuflip{-webkit-backface-visibility: hidden;
backface-visibility: hidden;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
div.nav label.mainlabel{width: 200px;font: bold 20px Tahoma;position: relative;
top: 0;display: block;padding-left: 34px;cursor: pointer;}
div.nav label.mainlabel:before{content: '';position: absolute;left: 0;top: 0;width: 12px;
height: 12px;border:7px solid darkgreen;-webkit-box-shadow: inset 0 0 2px gray, 0 0 5px gray;
box-shadow: inset 0 0 2px gray, 0 0 5px gray;border-radius: 30px;}
div.nav div.menuflip{position: absolute;margin: 0;top: 0;padding: 4px;background: white;
-webkit-transform: rotateY(180deg);transform: rotateY(180deg);width: 200px;border: 1px solid gray;
-webkit-box-shadow: 2px 2px 15px #B5B5B5;box-shadow: 2px 2px 15px #B5B5B5;border-radius: 10px;background: #eee;}
div.nav div.menuflip h4{margin:0;margin-bottom:4px;font-size:20px;padding:4px 0 0 6px;}
div.nav div.menuflip ul{list-style: none;margin: 0;padding: 0;}
div.nav div.menuflip ul li{border-bottom: 1px inset gray;}
div.nav div.menuflip ul li:last-of-type{border-bottom: none;}
div.nav div.menuflip ul li:hover{border-bottom-color: transparent;}
div.nav div.menuflip ul li a{display: block;color: blue;text-decoration: none;
padding: 6px;border-radius: 10px 0 10px;-webkit-transition: none;transition: none;}
div.nav div.menuflip ul li a:hover{background:#515151;color:#fff;}
div.nav div.menuflip label.close{position: absolute;right: 5px;top: 8px;
padding-top: 1px;display: inline-block;text-align: center;line-height: 14px;
color: white;z-index: 1000;cursor: pointer;border-radius: 50px;-webkit-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;width: 20px;height: 20px;background: black;font-size: 18px;}
div.nav input:checked ~ label.mainlabel{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}
div.nav input:checked ~ div.menuflip{-webkit-transform: rotateY(0);transform: rotateY(0);}
</style>

- Pega esto donde quieras que aparesca:

Apuntes:
Edita solo el segundo Script, si sabes CSS edita el primer Script.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Menu 3D flip

Menu 3D Flip

Prueba

- Pega esto en "Texto sobre el diseño":

- Pega esto donde quieras que aparesca:

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado