CCS3: Efectos hover para tus menús

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

ejm1

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
        <ul id="ejm1">
            <li><a href="#" title="Link 1">Link 1</a></li>
            <li><a href="#" title="Link 2">Link 2</a></li>
            <li><a href="#" title="Link 3">Link 3</a></li>
            <li><a href="#" title="Link 4">Link 4</a></li>
            <li><a href="#" title="Link 5">Link 5</a></li>
        </ul>

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

ejemplo2

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
        <ul id="ejm2">
            <li><a href="#" title="Link 1">Link 1</a></li>
            <li><a href="#" title="Link 2">Link 2</a></li>
            <li><a href="#" title="Link 3">Link 3</a></li>
            <li><a href="#" title="Link 4">Link 4</a></li>
            <li><a href="#" title="Link 5">Link 5</a></li>
        </ul>

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

ejm3

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

ejm4

Para el ejemplo 4 haremos un efecto de bajo relieve en el hover.
Nuestro HTML base será:

1
2
3
4
5
6
7
<ul id="ejm4">
        <li><a href="#" title="Link 1">Link 1</a></li>
        <li><a href="#" title="Link 2">Link 2</a></li>
        <li><a href="#" title="Link 3">Link 3</a></li>
        <li><a href="#" title="Link 4">Link 4</a></li>
        <li><a href="#" title="Link 5">Link 5</a></li>
</ul>

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

ejm5

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Í

Comparte el post para descargar todos los archivos de los ejemplos


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload the CAPTCHA.