Pequeño tutorial donde exploraremos cómo implementar un menú horizontal animado utilizando exclusivamente CSS. Este menú no solo es estéticamente agradable, sino que también cuenta con efectos de animación que se activan al pasar el cursor sobre los elementos desplegables.
Antes de sumergirnos en el código, es importante comprender la funcionalidad y la apariencia de nuestro menú. Te invito a observar nuestra demostración para visualizar el efecto en acción y comprender mejor su comportamiento.
Integración del menú en tu blog:
- Accede a la sección de Diseño de tu blog y selecciona "Añadir Gadget".
- Dentro de esta sección, elige la opción que permite agregar HTML o Javascript para poder insertar nuestro código.
- No es necesario ir a retocar la plantilla para integrar el CSS, pues con ayuda de la etiqueta <style> podemos conseguir adaptarlo a un solo código, por lo cual solo tendrías que copiar el siguiente bloque pégalo en el gadget correspondiente:
<style type="text/css">
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before, #menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444; background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3); }
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0; border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent; }
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
</style>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Creating Blogs</a></li>
<li><a href="#">Logo and Web Design</a></li>
<li><a href="#">SEO Optimization</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<img width="32px" height="32px" title="MiniTrucos Blogger" style="float:right;margin:3px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7deZ_V3YHI-FpeAotdnNlTFvTSUT4fZhydSu099Al4OOmo68OxaU9kdYC6fQc3EgibX4rXWu2Ga3xe1T9SA6p2804IQgRbt3lGvSlKK-KRy7kGq6TDrJyCuxnU6zZ2JjWywIobvciOL4-/s1600/MTB.png"/>
</ul>Personalización del Menú:
Experimenta con los colores de fondo, los estilos de fuente y los efectos de desplazamiento para reflejar la identidad visual de tu sitio.
Agrega nuevos elementos de menú o elimina los existentes según la estructura de navegación de tu sitio web y las preferencias de tus usuarios.
Observaciones:
Se hicieron pruebas en diferentes navegadores web, el menú funciona correctamente en todas y cada una de ellas.
Sin embargo, en dispositivos móviles la funcionalidad puede verse afectada, pues este menú no es responsive.
Al estar hecho puramente de CSS, el rendimiento del menú es excepcional.
Conclusiones:
El menú es simple, agradable, ligero y fácil de implementar en cualquier sitio. Aunque como bien mencioné, este menú no es responsive, estaré trabajando en traer un menú similar que cuente con la adaptación a dispositivos móviles en los próximos días.
