5 de agosto de 2017

Tutorial: Crear un Menú circular [Actualizado - 2017]

Buscando otras formas creativas de presentar el Menú del blog en las plantillas que diseño, me encontré con un código CSS  muy curioso, y se trata de darle un aspecto circular a nuestro menú.  Es muy sencillo y si tu blog tiene estilo magazine o vintage le ira muy bien. 
  1. Sólo se visualizará en navegadores modernos, de última generación, que soporten CSS3.

  • Si tienes este soporte ve a: Plantilla → Editar Html →  y busca (Ctrl+F) la etiqueta: ]]></b:skin>

Y ANTES de la etiqueta pega:
/* Menú circular  newsyndrome.blogspot.com */
.menucirculo {
width: 100%; /* Ancho */
overflow:hidden;
}
.menucirculo ul{
margin: 0;
padding: 0;
font: bold 12px Alial; /* Tipo de fuente */
list-style-type: none;
text-align: center; /* Alineación del texto */
}
.menucirculo li{
display: inline;
margin: 0;
}
.menucirculo li a{
display:inline-block;
text-align:center; /* Alineación del texto */
text-decoration: none;
color: black; /* Color del texto */
background:#6BC9AC; /* Color del fondo del circulo */
margin: 0;
margin-right:5px;
width:80px; /* Ancho */
height:80px; /* Altura */
border-radius: 400px; /* Bordes redondeados */
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.menucirculo a span{
position:relative;
top:40%;
}
  1. Lo que esta en rojo es lo que puedes modificar para cambiar el aspecto del menú.
Una vez guardada la plantilla, ve a:
  • Diseño >> Añadir un gadget >> y en un gadget HTML/Javascript pegas lo siguiente:
<div class="menucirculo">
<ul>
<li><a href="URL"><span>INICIO</span></a></li>
<li><a href="URL"><span>LINK</span></a></li>
<li><a href="URL"><span>LINK</span></a></li>
<li><a href="URL"><span>LINK</span></a></li>
<li><a href="URL"><span>LINK</span></a></li>
</ul>
</div>
  1. Añades la dirección, los títulos y lo guardas.
Listo ya tendrás tu nuevo menú...

Es muy fácil y puede darle a tu blog una vista muy dinámica y poco particular.

Actualización [2017]

Ha pasado un tiempo desde que publique este titular, y a raíz de un comentario sobre su personalización he decidido hacerle algunos cambios...
Como efecto hover y que al hacer scroll en el blog el menú baje contigo.

Para este nuevo cambio, para el efecto hover, después de: 
.menucirculo a span{
position:relative;
top:40%;
}
Agrega:
.menucirculo li a:hover{
text-decoration: none;
color: white;
background:#61A48F;
margin: 0;
margin-right:5px;
width:70px;
height:70px;
font: bold 12px Arial;
letter-spacing: 1px;
  • Cambia el color de la letra [color: white; ] y el color de fondo del circulo [background:#61A48F; ]. Tendra un buen efecto cuando se pase el cursor sobre él. 
Ahora, si quieres que el menú baje contigo cuando hagas scroll, dentro de: 
.menucirculo {
width: 100%; /* Ancho */
overflow:hidden;
}
agrega:
position:fixed;
es decir, te tiene que quedar así:
.menucirculo {
width: 100%; /* Ancho */
overflow:hidden;
position:fixed;
Listo, ya tiene un nuevo menú. 

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

2 comentarios:

  1. Holaaaa ¿Como puedo hacer que quede fijo?

    ResponderEliminar
    Respuestas
    1. Hola Alice, el tuto ya ha sido actualizado!
      Me imagino que hablas de que se mantenga fijo cuando hagas scroll no???

      Bueno ya acomode el post, y agregue unos nuevos estilos!!!

      Saludos!

      Eliminar