24 de setembro de 2012

Tutorial - Menu ' Passe o mouse '

                            

   Oi amores, hoje trouxe um tutorial muito legal! Um menu hover, muito lindjo.. Créditos ao eJhonas
, Agora vamos lá?! Clique em Leia mais, se quiser ver. :3

  Vai em Layout > Adicionar um gadget > HTML/JavaScript e cole esse código:

<div class="menuam">
<a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="left">Título do seu Blog</div></font></a>
<a href="/">Volte ao Início</a>
<a href="Url da Página" onclick="changeNavigation;">Nome da Página</a>
<a href=" Url da Página" onclick="changeNavigation;">Nome da Página< </a>
<a href=" Url da Página" onclick="changeNavigation;">Nome da Página< </a>
</div>
<style>.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #000;background: #fff; color: #000; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal; z-index: 12345; }
.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #000; color:#b5b5b5; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #000; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px; }</style>


   Boom, só vocês ajeitarem do jeito que vocês quiserem! O menu não ocupa espaço, é simples, e muito fofo.. Olha a imagem do resultado:

                

                                                                 Imagem do eJhonas !

                     Espero que tenham gostado desse tutorial, o menu é muito perfeito, não é ? :3
                                                                        Beijos da Ayla !

Nenhum comentário:

Postar um comentário

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)