Menu animado com CSS3

Nessa aula vamos ver como construímos um menu animado usando as regras da CSS3.
Não vou entrar em detalhes quanto ao HTML, pois tenho várias aulas sobre menus no Blog :)

1. Construa o HTML do menu:

HTML do Menu











2. Agora, vamos formatar via css. Na regra para a tag , mudamos a cor do fundo e tirarmos as margens:

body {
background-color: #333;
margin: 0px;
}

- Na regra abaixo, formatamos a tag do menu.

nav ul {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
list-style-type: none;
background-color: #CCC;
margin: auto;
width: 500px;
padding: 0px;
}

3. Na regra da ta < li > formatamos largura, altura, posição e colocamos as regras para animação.

nav li {
width: 500px;
height: 100px;
position: relative;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
}

4- Criamos uma regra para colocar um ícone dentro do item. Veja como ficou o HTML e a regra CSS.












#ico {
position: absolute;
visibility: visible;
height: 80px;
width: 80px;
top: 10px;
left: 80px;
font-size: 55px;
text-align: center;
color: #FFF;
}

5- A seguir as regras do link:

nav a {
text-align: center;
display: block;
color: #333;
position: relative;
font-weight: bold;
text-decoration: none;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
width: 100%;
height: 100%;
float: left;
line-height: 100px;
}


6- A regra a seguir tira a borda do último item da lista:

nav li:last-child a{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

7- Vamos fazer a regra do :hover

nav li:hover{
z-index:999;
background-color:#09F;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
  transform: scale(1.1);
}

nav li:hover #ico{
    -webkit-animation: maior 900ms alternate infinite ease;
    -moz-animation: maior 900ms alternate infinite ease;
    -ms-animation: maior 900ms alternate infinite ease;
}

8- Nas regras de hover do icone (#ico) foi criada uma regra para animação chamada de maior. Para que essa regra funcione temos que declarar como abaixo, especificando para cada navegador:

@-webkit-keyframes maior{
    from {
        -webkit-transform: scale(0.1);
    }
    to {
        -webkit-transform: scale(1.3);
    }
}
@-moz-keyframes maior{
    from {
        -moz-transform: scale(0.1);
    }
    to {
        -moz-transform: scale(1.3);
    }
}
@-ms-keyframes maior{
    from {
        -ms-transform: scale(0.1);
    }
    to {
        -ms-transform: scale(1.3);
    }
}


Agora é só testar :)















Comentários

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Adição e subtração de paths no Photoshop CS4