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.
[cc lang=»html» width=»100%»]
[/cc]
El css base será:
[cc lang=»css» width=»100%»]
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}
[/cc]
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:
[cc lang=»html» width=»100%»]
[/cc]
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í:
[cc lang=»css» width=»100%»]
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%;
}
[/cc]
Ejemplo 2
Para el ejemplo 2 haremos que aparezca una pequeña linea debajo del texto.
Nuestro HTML a usar será
[cc lang=»html» width=»100%»]
[/cc]
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:
[cc lang=»css» width=»100%»]
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)
}
[/cc]
Ejemplo 3
En el ejemplo 3 haremos un efecto que parece a una tarjeta deslizandose sobre la otra.
HTML base será:
[cc lang=»html» width=»100%»]
[/cc]
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:
[cc lang=»css» width=»100%»]
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%);
}
[/cc]
Ejemplo 4
Para el ejemplo 4 haremos un efecto de bajo relieve en el hover.
Nuestro HTML base será:
[cc lang=»html» width=»100%»]
[/cc]
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.
[cc lang=»css» width=»100%»]
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;
}
[/cc]
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:
[cc lang=»html» width=»100%»]
[/cc]
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:
[cc lang=»css» width=»100%»]
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;
}
[/cc]
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»/]
