19/11/2014

Menu Pixel vertical flutuante


Olá pessoal, como vai o dia de vocês? O meu vai ótimo assisti a primeira seção de Esperança parte 1 aqui na minha cidade. Amei, amei, amei o filme! Estava uma agitação que só, parecia um Mar de Monstros rsrs de tanta gente, mas foi bem divertido, até, tirei fotos com tributos que nem conhecia rs me chamaram e eu fui, ué. Ainda bem que não sai tão feia na foto, porque tenho cara de tributo que já morreu a mais de um mês. Mas irie repetir a dose no dia 20, pois filme de livros que eu amo vejo duas ou mais vezes quando posso. Mas chega disso, vamos falar da postagem de hoje. Nesse belo dia trago um pedido da Ask menu vetical flutuante.

É bem fácil de colocar além de ser uma graça, pelo menos eu acho uma gracinha. É um ótimo menu para quem gosta de economizar espaço, mas, não recusa colocar um no blog (meu caso). Os códigos são bem fáceis de entender é coloquei com explicação. Coloquei dois modelos diferente saindo de dentro de um gadgdet e flutuando ao lado de um gadget é o mesmo menu, apenas mudei a margem e distancia.

OBS: Quando se usa esse código e necessário arrumar o "margin top", porque se colocar texto ou outra coisa acima do menu, ele vai descer e se ficar sozinho irá subir. Então aconselho arrumar tudo dentro do gadget primeiro, para depois adiciona-lo e ajeitar ele.

Exemplo 1: Menu
(Bunny Crazy - Layout Wa)

1. Vá ate o Modelo >> Editar HTML. Ao entrar na área dos códigos procure por ]]></b:skin>, e acima dele cole:

Códigos
#menubc{ opacity: 1; /* nao mexa */ position:absolute; /* posiçao */ margin-top:-160px; /* margem para subir */ margin-left:223px; /* margem para o lado */ overflow:hidden; /* nao mexa */ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #menubc a{ display: block; /* nao mexa */ line-height: 4px; /* nao mexa */ padding-right:5px; /* nao mexa */ margin-left:0px; /* nao mexa */ margin-bottom:1px; /* nao mexa */ padding:4px; /* espaço dentro do menu */ width:35px; /* largura */ height: 6px; /* altura */ background: rgba(238,223,199,.5); /* cor de fundo */ border-right:4px #e26b71 solid; /* borda */ font-family: PF Arma Five; /* fonte */ font-size:8px; /* tamanho de fonte */ color:#baaa90; /* cor de fonte */ text-align:right; /* posiçao de fonte */ text-transform: uppercase; /* tipo de fonte */ -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -ms-transition:all .3s linear; } #menubc a:hover{ border-right:0px #CCC solid; /* borda */ padding-right:6px; /* nao mexa */ }


2. Agora vá até "Layout" e crie um novo, ou abra um, gadget html/javascript e dentro dele cole:

Códigos
<div id="menubc">
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
</div>


Exemplo 2: Menu
(Bunny Crazy - Layout Sweet Food)

1. Vá ate o Modelo >> Editar HTML. Ao entrar na área dos códigos procure por ]]></b:skin>, e acima dele cole:

Códigos
#menubc{ opacity: 1; /* nao mexa */ position:absolute; /* posiçao */ margin-top:-102px; /* margem para subir */ margin-left:216px; /* margem para o lado */ overflow:hidden; /* nao mexa */ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out; } #menubc a{ display: block; /* nao mexa */ line-height: 4px; /* nao mexa */ padding-right:5px; /* nao mexa */ margin-left:0px; /* nao mexa */ margin-bottom:3px; /* nao mexa */ padding:4px; /* espaço dentro do menu */ width:35px; /* largura */ height: 6px; /* altura */ background:#dbcfc0; /* cor de fundo */ font-family: PF Arma Five; font-size:8px; /* tamanho de fonte */ color: #a3998d; /* cor de fonte */ text-align:center; /* posiçao de fonte */ text-transform: uppercase; /* tipo de fonte */ box-shadow: 1px 1px 1px #a3998d, inset 0px 0px 5px #dbcfc0; /* sombra */ -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -ms-transition:all .3s linear; } #menubc a:hover{ background: rgba(250,250,00,0.00); box-shadow: 0px 0px 0px #a3998d, inset 0px 0px 0px #dbcfc0; }


2. Agora vá até "Layout" e crie um novo, ou abra um, gadget html/javascript e dentro dele cole:

Códigos
<div id="menubc">
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
</div>

OBS do menu 2: No hover vai aparecer a sombra do último botão, o segredo de não aparecer é a cor da sombra, deve ser similar ao do fundo do blog, se for imagem é só selecionar uma cor que disfarce.

É isso! Espero que tenham gostado do tutorial, consegui criar esse menuzinho com ajuda do Dicas Para Blogger. Então até aproxima amores, kiss kiss.

29 comentários:

  1. Eu amei esses menus <33'. Principalmente o segundo! Estou até pensando em usá-lo em meu próximo layout, porque é realmente muito lindo *-*

    Beijos,
    http://lustrando-enigmas.blogspot.com.br/

    ResponderExcluir
  2. Gostei mais do primeiro modelo. Mais claro que o segundo arrasou também *3*. Com certeza, algum dia usarei, ajjsjfidh *u* !

    prince-modern.blogspot.com

    ResponderExcluir
    Respostas
    1. Ebaaaaaa \o/ obrigada por gostar espero que use e goste bastante.

      Excluir
  3. Imagino como deve ter sido legal assistir o filme, ainda tenho os outros pra ver mais a preguiça não deixa ahus' Esse menu é tão bonitinho, gostei muito dos dois modelos, não aguentei e coloquei ele no layout que fiz ontem ahus' Gostei mesmo ^*

    DR || www.d-resources.net

    ResponderExcluir
    Respostas
    1. Hihi entendo ^^ Sérioooooooooo? Puxa que honra! Obrigada Luis.

      Excluir
  4. Ai senhor! Sua linda, você fez o que eu pedi *----* *Cheirando você* kkk
    Agora vou poder usar no meu blog ^^ Obrigada *----*

    http://nasetet.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. :3 Hihi hi desculpinhas por ter demorado um pouco. Mas usa sim ficara lindo!

      Excluir
  5. Adoreii! Alem de ser simples, é muito bonito *u*

    ResponderExcluir
    Respostas
    1. Obrigada, fico feliz que tenha achado isso.

      Excluir
  6. Eu até que gosto de jogos vorazes, mas fã, fãããã eu não sou kkk.
    Eu não escuto o pessoal falando de outra coisa, é só desse filme e coisa e talls kkkk, quem sabe se der vontade eu vá ver.
    O menu é bem simples, mas fica charmoso no lay.
    Abraço ;)

    ResponderExcluir
    Respostas
    1. Hihi entendo ^^ é assim mesmo, era a mesma coisa na epoca do HP, tem hora que até enche um pouquinho. Mas se ver me diga o que achou está bem? ^^
      Obrigada por gostar do menu.

      Excluir
  7. Q lindo esse menu *-* lindo post, parabéns!!!
    http://b-osskingdom.blogspot.com.br/

    ResponderExcluir
  8. Nossa, que bom que foi, infelizmente não deu pra mim ir /:
    Amei os modelos, muita gente procura esse tuto.
    Suuper útil.

    Beijos ❤
    http://www.p-perfectsthings.com/ | Quietly Pink

    ResponderExcluir
    Respostas
    1. Puxa que pena... mas ainda esta no cinema, dá tempo de ir.
      Obrigada por gostar. :3

      Excluir
  9. Yoo Wendy-Chan! tudo bem? Eu amei esse menu é simples e tão fofo! ♥

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tudo sim linda, obrigada por perguntar. Ah thanks fico feliz por isso. ^^

      Excluir
  10. Amei os dois estilos. Com certeza usarei no próximo lay <3
    Ah, estou um usando um layout seu, por enquanto, achei-o tão lindo!
    Zona Neutra

    ResponderExcluir
    Respostas
    1. Ebaaaaaaaaa \o/ Obrigada por usar o lay Tane :3

      Excluir
  11. *u* apaixonada <3 Os dois são lindos,mas estou casada com o modelo 2 :3
    Haha,*palmas* adorei o tuto,eu já vi alguns desse tipo,mas esse é mais fininho e deixa mais fofo ^^ Vou usar com certeza ~no lay que tô enrolando a dias para terminar.Oh,preguiça ~ Kiss
    pieceof-paper.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Hihihi sério? Entendo, usa sim. Espero que goste. Quando terminar me avise, quero ver seu novo lay. *3*

      Excluir
  12. Oii.Meu dia vai bem,obrigada.Sortuda,minha cidade não vai ter os tributos :'( *chora* Queria ter ido na estreia em Londres tuts tuts rsrs.

    ResponderExcluir
    Respostas
    1. Puxa que pena... mas logo vai sair em DVD. Também queria ter ido na estreia em Londres... fiquei tão feliz quando foi aqui no Brasil. t.t

      Excluir
  13. Olá!

    Gostei dessas indicações, acho que consigo colocar no meu próximo layout, apesar de estar um pouco enferrujada no html rs

    resenhaeoutrascoisas.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, obrigada por gostar. Ah, mas é bem facil consegue sim. ^^

      Excluir
  14. Oi Bunny, desculpa te chatear com tanto comentario, mas é que sempre que eu colo um cod que você manda colocar acima do Skin o cod aparece acima do nav bar do blog e desconfigura ele todo, sabe o que pode estar causando isso? D:

    ResponderExcluir
  15. Olá Cieru (não repara eu dou apelido para boa parte dos leitores rsrs). Não precisa se preocupar ou se incomodar, pode perguntar sempre que necessário eu sempre irei responder com maior alegria, estou aqui para ajudar. Se está dando esse erro é algum código que deu conflito na parte de CSS, você pode tentar localizar esse código que esta dando erro ou começar do zero. Pode ser que o erro não seja nem bem um código mais alguns pontinho ou chave que ficou fora do lugar, isso infelizmente acontece as vezes... Mas aconselho refazer você pode copiar os códigos do antigo mas observando os códigos se estão direitinho mesmo. Qualquer duvida ou problema é só perguntar. ^^

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345