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Í
[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»/]