Un buen sitio web necesita de una navegación simple, atráctiva y eficiente. Para ello no necesitamos recurrir a herramientas complejas, sino que con simples trucos de CSS3 se puede crear menus muy buenos.
Aquí te pondré unos ejemplos sencillos de efectos hover para tus menús; para que puedas copiarlos y modificarlos a tu gusto.
Para ver todos los ejemplos puedes ir AQUÍ.
Como base del menú usaremos «ul», «li» y «a»; en algunos casos agregaremos «span» para dar algun efecto especial.
1 2 3 4 5 6 7 | <ul id="ejm1"> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Link 4"><span>Link 4</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> </ul> |
El css base será:
1 2 3 | ul{list-style:none;margin:0px;padding:0px;clear:both;} ul li{margin:0px 10px;padding:0px;float:left;} ul li a{display:block;text-decoration:none} |
Ejemplo 1
En este ejemplo haremos que en el hover la letras cambien de color de izquierda a derecha.
Para ello usaremos de base el siguiente html:
1 2 3 4 5 6 7 |
Para generar este efecto nos valdremos del selector «:before» y la propiedad «content»; con esta propiedad podemos poner el texto que deseemos via css, le daremos el valor «attr(title)» quiere decir que del atributo title del «a» copiaremos su valor y lo asignaremos al «:before».
Para la animación usaremos la propiedad max-width, que variará de 0% a 100% en el hover, para evitar que el texto aparezca en 2 lineas debido al variar el «max-width» usaremos «white-space: nowrap».
Nuestro css quedaría así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ul#ejm1 li a{ position: relative; color:#ED1C24; font-weight:bold; } ul#ejm1 li a:before{ position: absolute; color:#005496; content:attr(title); left:0px; top:0px; max-width:0%; white-space: nowrap; overflow:hidden; transition: max-width 0.3s linear } ul#ejm1 li a:hover:before{ max-width:100%; } |
Ejemplo 2
Para el ejemplo 2 haremos que aparezca una pequeña linea debajo del texto.
Nuestro HTML a usar será
1 2 3 4 5 6 7 |
Para lograr este efecto usaremos el selector «:after» con un height en «position: absolute», con «bottom: 0px», «opacity:0» y lo moveremos 20px para abajo con «transform: translateY(20px)», al hover haremos que aparezca «opacity:1» y para que de el efecto que aparece desde abajo con «transform: translateY(15px)».
Nos quedaría:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | ul#ejm2 li a{ position: relative; font-weight:bold; color:#0E83CD; margin: 0px 15px; } ul#ejm2 li a:after{ position: absolute; bottom: 7px; left: 0px; width: 100%; height: 4px; background-color: #FFD743; content: ""; opacity: 0; transition: opacity 0.3s ease 0s, transform 0.3s ease 0s; transform: translateY(20px); } ul#ejm2 li a:hover:after{ opacity:1; transform: translateY(15px) } |
Ejemplo 3
En el ejemplo 3 haremos un efecto que parece a una tarjeta deslizandose sobre la otra.
HTML base será:
1 2 3 4 5 6 7 | <ul id="ejm3"> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Link 4"><span>Link 4</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> </ul> |
Para obtener este efecto de tarjetas deslizandose usaremos el «span» y el «:before»; y colocaremos uno encima del otro para ello el «:before» será «position: absolute» y para la animación se deslizara el span sobre el «:before» con «transform: translateX(100%)».
El CSS quedaría:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | ul#ejm3 li a{ position: relative; color:#FFF; overflow:hidden; } ul#ejm3 li a:before{ position: absolute; top: 0px; left: 0px; z-index: 1; padding: 10px 20px; background: none repeat scroll 0% 0% #FFF; color: #0F7C67; content: attr(title); transition: transform 0.3s ease 0s; } ul#ejm3 li a span{ display: block; position: relative; padding: 10px 20px; background: none repeat scroll 0% 0% #0F7C67; transition: transform 0.3s ease 0s; z-index: 2; } ul#ejm3 li a:hover span{ transform: translatex(100%); } |
Ejemplo 4
Para el ejemplo 4 haremos un efecto de bajo relieve en el hover.
Nuestro HTML base será:
1 2 3 4 5 6 7 |
Para este efecto usaremos transparecia en el color de la letra «color: rgba(0, 0, 0, 0.2);» y al «:before» lo pondremos encima y al hacer hover se reducira «transform: scale(0.9)» y desaparecera «opacity: 0» dejando el el link con el efecto de bajo relieve.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ul#ejm4{ background-color:#0E83CD; overflow:hidden; padding:20px 10px } ul#ejm4 li a{ position: relative; color: rgba(0, 0, 0, 0.2); overflow:hidden; } ul#ejm4 li a::before { color: #FFF; content: attr(title); position: absolute; transition: transform 0.3s ease 0s, opacity 0.3s ease 0s; } ul#ejm4 li a:hover::before { transform: scale(0.9); opacity: 0; } |
Ejemplo 5
En este ejemplo haremos una pequeña transición 3D que simulara un cubo que gira al hacer hover al link.
Usaremos el siguiente HTML:
1 2 3 4 5 6 7 | <ul id="ejm5"> <li><a href="#" title="Link 1"><span data-title="Link 1">Link 1</span></a></li> <li><a href="#" title="Link 2"><span data-title="Link 1">Link 2</span></a></li> <li><a href="#" title="Link 3"><span data-title="Link 1">Link 3</span></a></li> <li><a href="#" title="Link 4"><span data-title="Link 1">Link 4</span></a></li> <li><a href="#" title="Link 5"><span data-title="Link 1">Link 5</span></a></li> </ul> |
Para ellos usaremos el «span» y el «:before» con lo cual rotaremos una encima de la otra para emular el efecto, el css quedaría:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | ul#ejm5{ background-color:#3FA46A; overflow:hidden; padding:20px 10px } ul#ejm5 li a{ position: relative; line-height:40px; overflow:hidden; color:#fff; perspective: 1000px; } ul#ejm5 li a span{ position: relative; display: inline-block; padding: 0px 14px; background: #247547; transition: transform 0.3s ease 0s; transform-origin: 50% 0px 0px; transform-style: preserve-3d; } ul#ejm5 li a span:before{ position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; padding: 0px 14px; background: #2e8d57; content: attr(data-title); transition: #000 0.3s ease 0s; transform: rotateX(-90deg); transform-origin: 50% 0px 0px; } ul#ejm5 li a:hover span { transform: rotateX(90deg) translateY(-22px); } ul#ejm5 li a:hover span::before { background: 0% 0% #2e8d57; } |
Para ver todos los ejemplos puedes ir AQUÍ
[social-download button_id=»a8357ad76c6889d3f» dl_id=»www.miguelmanchego.com/samples/2015/hovermenus/hovermenus.zip» theme=»blue» message=»Comparte el post para descargar todos los archivos de los ejemplos» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
Si solamente quiero que un solo tenga el efecto, como le puedo hacer?
estan chingones tus efectos…