MENÚ EN FORMA DE CARTEL GIRATORIO

by Blogs Famag - agosto 03, 2019

MENÚ EN FORMA DE CARTEL GIRATORIO .

Aprovechando las virtudes y posibilidades que ofrece el CSS3, os traigo este menu con un original diseño y sin necesidad de utilizar ninguna imagen.

Como ya he indicado en el titulo de esta entrada y podeis observar, este menu tiene forma de cartel urbano, con su barra de metal correspondiente.

Cuando lo vemos aparece con una perspectiva como si lo vieramos 'de lado' y al pasar el cursor del raton sobre el, gira hacia nosotros viendolo completamente 'de frente'.

El resultado lo teneis aqui aqui abajo, pasad el raton y vereis el efecto giratorio a ver si os mola

Si te gusta y quieres ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y pegarlo alli donde quieras mostrar el menu.

Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis con el nombre Menú Cartel (para que os salga tenéis que poner el cursor encima)

Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<div class="wrap"><div class="sb"><div class="cartel"><div class="box">Menu<hr>
<a href="LINK">TEXTO ENLACE</a><br />
<a href="LINK">TEXTO ENLACE</a><br />
<a href="LINK">TEXTO ENLACE</a><br />
<a href="LINK">TEXTO ENLACE</a><br />
<a href="LINK">TEXTO ENLACE</a><br />
</div></div></div></div><div class="barra"></div>

<style>
.barra {
background: #070405;
background: -moz-linear-gradient(left, #070405 0%, #29b0df 50%, #070405 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#070405), color-stop(50%,#29b0df), color-stop(100%,#070405));
background: -webkit-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: -o-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: -ms-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: linear-gradient(to right, #070405 0%,#29b0df 50%,#070405 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#070405', endColorstr='#070405',GradientType=1 );
width: 10px;height: 420px;
position: relative;z-index:1;
bottom: 220px;left: 70px;
border-top: 3px solid #000000;border-bottom: 3px solid #000000;
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.wrap {
top: 10%;
right: 5px;
height: 80%;
}
.sb{
position: relative;
top: 50px;
perspective:800px;
}
.cartel{
width: 150px;padding-bottom:10px;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.8) 98%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(98%,rgba(0,0,0,0.8)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
color: #d9d9d9;
text-align: center;
border: 1px solid #000000;
border-radius: 7px;z-index:2;
box-shadow: 0 0 9px #04E9FA inset;
transform: rotateY(95deg) ;
transition: transform 0.5s;
}
hr{
width: 100%;
border: 1px solid rgba(41,276,223,.3);
}
.cartel:hover{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cartel a:hover{
color:#A9F5F2 !important;}
.cartel a {
color:#F5F6CE !important;}
.selected:after {
content: "";
color: #ff0;
display: block;
position: absolute;
left: 40%;
top: 90%;
}
.box{
margin: 15px;
font-size: 1.5rem;
}
</style>

Despues de haber insertado el código, un clic en "Guardar"

Sustituye donde pone LINK por las urls que desees, y donde pone TEXTO ENLACE por el texto a mostrar en cada enlace.

Si quieres añadir mas, escribe la la linea <a href="LINK">TEXTO ENLACE</a><br /> tantas veces como quieras a continuacion de las otras, por el contrario si deseas poner menos enlaces, elimina las lineas correspondientes.