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