Menu vertical como o meu


Olá olá dreammers amigos! Como estão? Tá eu sei, eu sei, sumi de novo :/ me desculpem :c meio que estou sem vontade de postar... mas hoje, acordei inspirada e ainda está chovendo <3 e não sei se mencionei, mas eu adoro/amo postar quando está chovendo (∩˃o˂∩) por isso vou aproveitar e já deixar algumas postagens rascunhadas, uma delas inclusive, vai ser sobre meus desenhos (≧◡≦) e tenho novidades: faltam 3 seguidores para completarmos 100 seguidores ┐ (´ー`)┌  sério como assim? Eu ainda nem terminei o próximo lay free! Mas estou hiper mega feliz =^.^= e o próximo layout já está pronto!! Pretendo mudar ainda essa semana >u<

Enfiiim, esses dias um anony veio me pedir que ensinasse como fazer aquele menu do lado do gadget de welcome sabe? Aquele roxinho? Então, eu pessoalmente acho muito fofinho e não ocupa espaço! Quer ver? Clique em leia mais!! Créditos totalmente ao Bunny Crazy ok? 



Bem, abra seu HTML e cole acima de ]]></b:skin> o código abaixo:

#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;
}
Já está tudo explicadinho no code ^^
É importante que você ajuste direitinho que coloquei em negrito!! Isso é a posição do menu, se ele vai ficar mais para cima, para o lado etc.
Agora, coloque esse código {♥} dentro de um gadget.
Salve e prontinho!!
Beijinhos e brigadeiros~

10 comentários:

  1. Olá! Também estive sem ânimo pra fazer as coisas por aqui, acho que faz parte, mais vale algo bem feito do que algo feito por obrigação. Cada um precisa tomar seu próprio tempo ♥ Eu também sou assim como você haha, agora mesmo está chovendo. Eu amo o clima de quando ainda não está chovendo, mas está prestes a chover, o vento é maravilhoso. Não fica nem frio, nem quente, fica equilibrado e eu amo isso, mesmo que por pouco tempo ♥
    Cara que ótimo isso! Espero que esses três seguidores apareçam logo (︶^︶)
    Eu queria tanto fazer um layout novo, mas além de estar sem computador a criatividade nem ajuda ZzzZZzz Vou esperar por um layout tão bom quanto o seu atual ♥
    Sou fã de coisas que não ocupam espaço nos layouts. Menus verticais são ideais pra um layout com sidebar fixa, por exemplo, e ficam lindos demais!
    Eu adoro o hover do seu menu, quando colocou esse layout eu fiquei intrigada com esse menu.q o hover dele é bem louco haha Meio que as bordas vão indo pra fora e somem :O
    O tutorial é bem bacana, já que o menu é tão bonitinho nem custa, não é?.nn haha Espero que usem porque é muito amorzinho ♥
    blog-crazycake.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi oi Laisa õ/
      Creio que todo(a) blogueiro(a) já passou por um momento assim... o importante é voltar né?
      Nossa nunca parei para pensar nisso!! Agora mesmo está assim >u<
      Ah leia um pouco, resfrie a cabeça e a inspiração virá ヽ (゜∇゜)ノ
      Ai eu também!! Fica bem mais clean e confortável (づ。◕‿‿◕。)づ
      Acredito que menus verticais combinam com todo tipo de layout <33 sidebar móvel/fixa
      Ah a Wendy faz um menus bem legais mesmo ^^ ele meio que "explodem" né?
      O menu é tão pequeno que nem faz volume -qq ahsaus
      Beijinhos e brigadeiros~~

      Excluir
  2. Oi oi. Eu também amo quando está chovendo <3 Parabéns, vai crescer muito mais ainda (◠△◠✿) Estou ansiosa para ver o próximo lay do blog \o/ adoro lays novos jhgdjghf.
    Esse menu é realmente fofinho e prático. Quando surgir inspiração para um lay vou usá-lo (◠ω◠✿)

    Beijinhos de paçoca com cobertura de chocolate,
    Moon.
    http://ocacador-de-sonhos.blogspot.com.br/ ~ ♥

    ResponderExcluir
    Respostas
    1. Oi oi Moon õ/
      Ai chuva é muito bom <33
      Obrigado >//<
      É horrível não ter inspiração para lay né?
      Beijinhos e brigadeiros~~

      Excluir
  3. Olá Kaory!!♡♡♡
    Já estás melhor (estavas meio deprimida no teu blog pessoal)??
    Quase 100 seguidores??Parabéns!!
    Adoooooro dias chuvosooos *^▁^*
    Quero ver esse lay!!
    O menu é super fofo!!
    Beijoos *--*
    Bwblackwords.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi oi Pat õ/
      Sim ouvi um pouco de Nirvana agora tá tudo certo -q
      Ai obrigado fox <33
      Ai eu também!! Lembra quando o BW tinah um layout meio que com um tema de chuva? Lindo!
      Ah ele está lindo <3
      É mesmo *w*
      xoxo '3'

      Excluir
  4. Já avia visto esse menu no Bunny Crazy adoro ele <3 Adorei o post super legal beijos!

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

    ResponderExcluir
    Respostas
    1. Eu também amo/sou esse menu <33
      Mas acho que combina com um lay mais fofinho....
      Obrigado bae õ/
      xoxo

      Excluir
  5. Oi oi (≧∇≦)eu estou ótima e você?
    Aí na sua cidade está chovendo? Que inveja, aqui as nuvens só estão ameaçadoras mas nada mais (╥_╥) ah, parabéns adiantada pelos quase 100 seguidores!
    Esse menu é muito fofo, eu estava procurando por vários blogs mas eu não encontrava, esse tutorial foi bastante útil. Talvez eu use ele em algum layout futuro, idk.
    xx (っ・з・)っ ~ ♥

    ResponderExcluir
    Respostas
    1. Oi oi Marcela õ/
      Estou bem, obrigado ^.^
      Siim ai gente amo chuva *u*
      Obrigado pela força \o/
      Acho que esse menu é mais para layouts fofinhos...
      Use sim!!
      xoxo

      Excluir

Hey Dreammer, como está? Vai comentar? Primeiro leia as regrinhas >u<
☆ Os comentários são moderados
☆ Sim, as vagas estão abertas para afiliados.
☆ Palavrões são permitidos desde que não forem usados para ofender
☆ Se não gostou e está disposto a começar uma briga, saia.
☆ Faça somente críticas construtivas
☆ Retribuo todos os comentários, só tenha paciência.
☆ Deixe o link do seu blog para eu poder visitá-lo X3
☆ If you don't speak portuguese, don't hesitate to comment in your language! Be Welcome!
☆ Si tú no hablas portugués, no vacile y comente in español. ¡Bienvenido!

(っ・з・)っ ~ ♥ (≧◡≦) (≧∇≦)(ó㉨ò) ┐ (´ー`)┌ 〈( ^.^)ノ ᕦ(ò_óˇ)ᕤ ᕙ(⇀‸↼‶)ᕗ (∩︵∩) (╯︵╰,) (╹◡╹) (◑.◑) (◐.̃◐) (・_・ヾ (´・_・`) 【・_・?】 ( ゚д゚) (。_゜) ⊙.☉ \(〇_o)/ (⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (◠△◠✿) (◕ω◕✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) (ノ⊙ヮ⊙) (╯°□°)╯ಠ_ಠ ( ̄。 ̄)~zzz (°ロ°)ヽ (゜∇゜)ノ (ノ◕ヮ◕)ノ (▰˘◡˘▰) (︶▽︶) (。・_・。) (・ェ-) (。◕ ‿ ◕。) ʘ‿ʘ ╮ (─▽─)╭ ᕦ(ò_óˇ)ᕤ (≧ω≦) (^▽^) ( ̄□ ̄) (¬_¬) (╥_╥) (╯3╰) (¬‿¬) (◣_◢) (≧o≦) (⋋▂⋌) (॓_॔) (─‿‿─) (∩︵∩) (⊙_◎) (。♥‿♥。) (~ ̄▽ ̄)~ ★~(◠‿◕✿) (∩˃o˂∩) ~ヾ(^∇^) (づ。◕‿‿◕。)づ (ノ◕ヮ◕)ノ*:・゚✧ (;一_一) (¬_¬) (¬‿¬) (◕ ‿ ◕)/