07 setembro 2015

Menu Fast

| |
Olá! Dessa vez eu não demorei para postar, graças a Deus. Pretendo deixar o blog mais ativo. Já estou preparando alguns posts para deixar esse lugar menos abandonado.

Vamos falar sobre o menu. Ele é o meu tipo favorito: menu com imagens. Quem já segue o blog há algum tempo, já sabe que o blog tem um monte desses menus. Exemplo. Esse é, até agora, o meu menu favorito <3

Espero que gostem. Comentem se acharem algum erro no exemplo ou código. Beijos ;*




1. Procure por ]]>< e acima deste trecho cole:

#ola-isaa:hover #menu-fast-isa{
opacity: 0.7;
}
#menu-fast-isa{
opacity: 0.7; /* Opacidade do menu */
position:absolute;
-webkit-transition: all .60s ease-in-out;-0-transition: all .60s ease-in-out;
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;
margin-left: 3px; /* Move o menu para os lados */
margin-top: -232px; /* Move o menu para cima ou para baixo */
}
#menu-fast-isa a {
color: white; /* Cor do texto */
text-align: center;
margin: 1px;
float:left; /* Posição */
font-family: trebuchet ms; /* Nome da fonte */
font-size: 10px; /* Tamanho da fonte */
overflow:hidden;
height: 10px; /* Altura - Não mude se for manter a fonte 10 */
padding-top: 3px;
padding-bottom: 6px;
padding-left: 3px;
padding-right: 3px;
background: pink; /* Cor do fundo */
border-radius: 4px; /* Bordas arredondadas */
width: 50px; /* Tamanho do menu antes do hover */
text-decoration:none;
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
transition-duration: .6s;}
#menu-fast-isa a:hover {
width: 226px; /* Tamanho do menu no hover */
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
transition-duration: .6s;}

2. Vá em 'Layout' > 'Adicionar Gadget' > 'HTML/JavaScript' e cole:

<div id="ola-isaa">
<img src="https://38.media.tumblr.com/294889dbd8da8eac27125c3af3222961/tumblr_inline_mtvrsorND41s0xdjj.png" alt="image"><div id="menu-fast-isa">
<a href="/">FEITO</a><br><p>
<a href="/">POR</a><br></p><p>
<a href="/">ISA</a><br></p><p>
<a href="/">SOUZA</a><br></p><p>
<a href="/">CREDITE</a><br></p><p>
<a href="/">SE</a><br></p><p>
<a href="/">USAR</a><br></p><p>
</p></div>
</div>


7 comentários:

  1. Oi Iza, eba mais uma postagem aqui \o/ Esperarei ansiosa por proximas 'u'
    Que menu lindo, adorei <3 Kisu ~ Bleeding

    ResponderExcluir
  2. Olá tudo bem?
    Eu reparei nisso você posta muitos menus mais não tenho do que reclamar tenho uma paixão imensa por eles.
    Adorei o menu super fofo e legal <3
    Beijos e até qualquer hora!

    http://cloundforhtml.blogspot.com.br/


    ResponderExcluir
  3. Awwn, esse menuzinho é muito amor. E não ocupa muito espaço também o3o Gente, sou apaixonada por menus, dá vontade de usar todos, sabe? ashjhdfjdfh - pena que não é possível (╥_╥)

    beijinhos de brigadeiro,
    Moon.
    http://ocacador-de-sonhos.blogspot.com.br/ ~ ♥

    ResponderExcluir
  4. Eu adoro menus em imagens~ Esse ficou lindo~
    Boa sorte planejando postagens, aguardo mais delas por aqui.

    Beijos, (づ ̄ ³ ̄)づ muah!
    Att. Mysi // · ◦ • P Y X I S • ◦ ·

    ResponderExcluir
  5. Olá Isa minha xará você viu o M/V da Hyuna? Acho que sim msaushauhsau!
    Eu achei ele bem calmo! Mais tranquilo em comparação ao Roll Deep né? Eu bem, estou fazendo um novo layout para eu usar não sei quando mas será quando esse layout atual enjoar, mas não sou louca vai demorar um tempo então estou só acumulando tutoriais para coloca-lo e no final vai ter uma barra de blogs que me ajudaram e esse vai estar na lista, pois eu vou usar esse menu!

    Bye!~ Snack-c.blogspot.com|

    ResponderExcluir
  6. Olá. Estou tentando fazer o mesmo, mas até agora não estou tendo muito êxito. Haha!

    Menus em imagem são mesmo um charme, eu também adoro. ♥ Esse, em especial eu adorei! Muito lindo mesmo.

    Eu gostaria de afiliar o Empire Kawaii com o seu blog, seria possível? Se sim, não deixe de me avisar, ok?

    Carinhosamente, Jheni. * e m p i r e k a w a i i & q u i n z e o u t o n o s *

    ResponderExcluir
  7. Oi oi Isa õ/
    Como vai bae?
    Faz tanto tempo que não venho aqui >///<
    O layout ficou lindo <33 Hyuna lá divando -q
    isa não se preocupe, ás vezes precisamos deixar o blog de lado por conta dos estudos/da falta de tempo...
    Já disse que amo seus menus? Amo seus menus.
    Eu já mao seus menus dai quando você posta menu com imagem eu fico vomitando arco íris aqui -qq
    Amei o post!
    Beijinhos e brigadeiros~
    c o l o r f u l ☆ d r e a m

    ResponderExcluir

« »