Menú básico con efecto CSS



Para usar este menú básico con efecto CSS (El ejemplo está personalizado, en el código se usa texto base en color negro - blanco resaltado y color del efecto rojo) que también podrían usar como una bonita opción para compartir sus redes sociales, deben incluir un estilo en la plantilla arriba de la etiqueta </head>  La ruta sería Plantilla / Editar HTML y lo ubican arriba de </head> Luego solo deben usar un sencillo <div> en un Gadget HTML/JavaScript

Código del estilo:
----------------------------------
<style type="text/css">

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* Fuente - Tamaño y estilo */
list-style-type: none;
text-align: center; /* Alineación "left", "center", o "right"  */
}

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

.spotlightmenu li a{
display:inline-block;
padding: 5px; /*Margen interna del efecto*/
min-width:50px; /*Ancho del efecto*/
height:50px; /*Altura del efecto*/
text-decoration: none;
color: black; /*Color del título base*/
margin: 0 auto; /* Espacio entre los títulos en px se quitaría 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;
}

.spotlightmenu li:hover a{
color: white; /* Color del título resaltado */
background: #a71b15; /* Color de fondo del efecto */
-webkit-border-radius: 50%; /* Medida en porcentaje del borde circular */
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* Mover el texto del menú hacia arriba para centrarlo si se necesitara */
}

</style>

--------------------------------
Importante: Si ubican el gadget en una columna tomará los colores que hayamos aplicado en Plantilla/Personalizar/Avanzado. Si se ubica sobre el cuerpo de la entrada tendrá los colores del código. Si quieren colocar el gadget debajo del header, tienen que borrar todo lo que hay de la parte de /*Tabs---- en la plantilla. Esa parte luego de borrar su contenido se podría visualizar así:

 /* Tabs
----------------------------------------------- */

/* Headings
----------------------------------------------- */

Dejo al lado de cada parte importante que se pueda editar entre /* ----- */ la debida explicación.

Ahora solo deben crear un Gadget HTML/JavaScript y pegar el siguiente Div:

<div class="spotlightmenu">
<ul>
<li><a href="URL del enlace o Página"><span>Título</span></a></li>
<li><a href="URL del enlace o Página"><span>Título</span></a></li>
<li><a href="URL del enlace o Página"><span>Título</span></a></li>
<li><a href="URL del enlace o Página"><span>Título</span></a></li>
</ul>
</div>

Si el código no queda centrado cambien lo siguiente:

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

Por esto y vayan aumentando la distancia desde la izquierda en left:150px;

.spotlightmenu li{
display: inline-block;
position:relative;
left:150px;
}

Importante: Si usan el código en una entrada lógicamente en modo HTML, cada vez que vayan a ingresar a ella para editarla por favor háganlo en modo HTML o perderán las etiquetas <span> y tendrán que volverlas a colocar.

Espero que esta información les sea muy útil.

Gracias.

Autor Original: Dynamic Drive


Menú básico con efecto CSS circular para blogger, menú con efecto que resalta el texto,