MENÚ HORIZONTAL 'HOVERCOLOR

MENÚ HORIZONTAL 'HOVERCOLOR .

Jugando un poco con el CSS y dos imágenes, me ha salido este menú tan chulo.

 Como veis, tiene un diseño elegante en color azul que, al pulsar sobre uno de los botones cambia de color gradualmenteademás se puede personalizar un poquito y colocar mas menús.

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 podéis verlo en este mismo blog en la pagina principal.

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




Ir a Blogger

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/AVvXsEgAf0SKzmVSjgO0-HmvZf91Uh0JLEYuoa_CwgxOoYvLqic9kjGzkF8z6ssujd_IqYgugTEnP8mq-GqjXU5V_gaVJKjmBKJAV50aNJe9AyYmEw90ScU55O_qWlqSAlrKuMSiuPhh7moJ3D8/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/AVvXsEhOiNBMnNg54OE1Jklz-iCt3yFdge9GKRtcZcRLLP-YIjVX1s21qYho5pNSR0LiKbr8VMyuy_fWCSxdFQwLTcuwKApjJb225NlxlfAc8R9kuPjWI8cLq32H846V1BBsDkvvoCFCulZo8iA/s100/fondo%2520hover%2520-%2520REDEANDO.gif);cursor:pointer;
}

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

Fecha de la Publicación; 18-01-2019

 Fuente; redeando

 Publicado por;