MENÚ HORIZONTAL "HOVERCOLOR"

julio 24, 2019

MENÚ HORIZONTAL "HOVERCOLOR".

Jugando un poco con el CSS y dos imagenes, me ha salido este menu tan chulo.
Como veis, tiene un diseño elegante en color azul que, al pulsar sobre uno de los botones cambia de color gradualmente.

Para ponerlo en vuestro blog, tan solo teneis que copiar el codigo que os facilito y añadirlo en un gadget HTML, cambiando lo que esta en rojo por las urls de los enlaces que querais poner y su respectivos nombres.

Si queréis verlo en acción seguid este enlace:

Modo de instalarlo:

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="hovercolor"><ul><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li></ul></div>

<style type="text/css">
.hovercolor{
width: 100%;border-top:2px solid #000000;border-bottom:2px solid #000000;
overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiHExUNNaMpCvzNheHfhCxPAdbZGT-WE7UWxXy2H9-ps_cl5no5jvJVQWluCZoTix_hUQZPTIB54pbmuy7JSwA86hnRKt8qhKW2z7Va_7mj03vHNk32-TKZ5mNtR0Dl_DEtAreITbFQQ/s66/fondo%2520barra%2520menu%2520-%2520REDEANDO.jpg)repeat-x;height:60px;line-height:2.5;
}

.hovercolor ul{
margin: 0;
padding: 0;
font: bold 18px Helvetica;
list-style-type: none;
text-align: center;
}

.hovercolor li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}

.hovercolor li a{
display:inline-block;line-height:0.5em;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;border:1px solid #000000;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);
padding: 10px;
min-width:40px;
height:25px;
text-decoration: none;
color:#FEF497 !important;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.hovercolor li:hover a{
color:#000000 !important;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFfT28yoK_fOZ5uAFrJ5_E-zIRFfz9DxQAa4i4dJuZf0tDN_s5uhwabmF2ks85PmtcnNXU8s4u-MQXjoKWq7lI5cfYUFgi1BKsY-2KqAbqOT9-rObTOqBShDdEh950UD4saI7Y-jaiUv4/s100/fondo%2520hover%2520-%2520REDEANDO.gif);cursor:pointer;
}

.hovercolor li a span{
position:relative;
top:35%;
}
</style>

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