• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

6 de maio de 2013

Menu Ring

Olá extraterrestres humanos! heuheueheuehue
Como vão ein?! [ps: quero a resposta nos comentários sei que não irão responder ]
Hoje, até que em fim, decidi postar algo útil de verdade para vocês, é que sempre posto goodies, imagens e ilustrações, mais hoje trouxe um menu que já estava nos meus favoritos para trazer aqui, então iremos aprender ele, que tal?
 ah, quero dizer que estou muito feliz por vocês gostarem dos meus icons, realmente pensei que não estariam bons hehe.
Preview (xxx) -- créditos (x-x)
Testei ele no meu blog testes e deu certinho, mais só um aviso antes de começarmos o tutorial, o menu suporta só 5 links, então só use se realmente não tiver muitos links principais, no caso do Adolescente Nerd - que tem muitos links - eu não usaria esse menu por exemplo.


 Cole isso acima de  ]]></b:skin>:


ul , li {
  margin: 0;
  padding: 0;
}
.ringMenu {
  width: 100px;
  margin: 0px auto;
}
.ringMenu:hover {}
.ringMenu ul {
  list-style: none;
  position: relative;
  width: 50px;
  color: #999;
  font-family: 'Economica', sans-serif;
  font-size:10px;
}
.ringMenu ul a {
  color: #fff;  font-family:'Economica', sans-serif;
  text-shadow: 0px 1px 1px #e4bf93; 
  font-size:18px;
}
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, .3);
  border:2px solid rgba(255, 255, 255, .5);
  text-align: center;
  line-height: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.ringMenu ul li a:hover {
  background: rgba(202, 232, 239, 0.5)
}
.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -70px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -70px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -70px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -70px;
}
.position {margin-top: 180px; margin-left:100px;position:fixed;z-index:1000;}


- O .position: é o que vai definir a posição do seu menu, é nele que você tem que mexer se quiser colocar mais para o lado, mais pra cima, pra baixo e etc…
- O .ringMenu ul a {: é a parte que define as letras da bolinha, é onde vai definir a cor, a font, o tamanho da font e etc…
- No .ringMenu ul li a {: é onde você mexe para mudar a cor da bolinha, a border, a border-radius e etc… 

OBS.: Recomendo que você mexa somente nesses códigos que falei acima, se você tirar algum código que não deve elas se desconfiguram. TOME CUIDADO. Se quiser fuçar pra aprender mais você pode, contando que não tenha medo de mexer e errar :}


E depois que você fez a parte mais difícil que é o HTML, cole isso em um gadget HTML / Javascript:


<div class="position">
<div class="ringMenu">
<ul>
<li class="main"><a href="/">Clica</a></li>
<li class="top"><a href="ask">02</a></li>
<li class="right"><a href="LINK">03</a></li>
<li class="bottom"><a href="LINK">04</a></li>
<li class="left"><a href="LINK">05</a></li>
</ul>
</div></div>

Agora é melzinho na chupeta, é só trocar o 'LINK' pela url que deseja, e a mágica acontece, seu menu está prontinho!
Kissus de Mel!

12 comentários:

  1. aii que lindo esse menu, bem diferente :)
    http://manguitarosa.blogspot.com.br/
    beijoos

    ResponderExcluir
  2. Estou bem, e tu, como estás?
    Adorei o menu, diferente!
    pqngarota.tk

    ResponderExcluir
  3. Agora me deu vontade de mudar de layout,
    só para colocar esse menu, muito diferente!

    Aguardo sua visita no ~>> nateeladopc.blogspot.com

    ResponderExcluir
  4. Menu fofinho *-* Parece que ele é um guarda chuva ç.ç' #Dorgas kpooksosakoas'
    Chu~~
    mutant-paradise.blogspot.com

    ResponderExcluir
  5. É bem fofo mesmo esse menu, fiz esses dias o mesmo tuto...
    Kissus ;)

    ResponderExcluir
  6. Ja conhecia menu é fofo *-*
    QUASEPRINCIPA/BLOG

    ResponderExcluir
  7. que lindooooooooooooooooooooooooo babando aqui, mais nem da de fazer :S.
    ajuda ajuda ajuda eu: ASSIM MEU BLOG DE UNS TEMPOS PARA CÁ, ELE ANDA COM "PROBLEMAS NAS JUNTAS", ELE NAO SALVA ALGUNS SCRIPS, DA PROBLEMAS EM OUTRAS COISAS, E FICA COM ESSA FRESCURA, SERA QUE VOCE SABE O QUE FAZER? PARA ELE VOLTAR AO NORMAL?

    inocentementeingenua.blogspot.com


    ResponderExcluir
    Respostas
    1. Olá querida, não sei como dizer, mais às vezes por muitos efeitos que usamos no blogger, alguns desses efeitos dão erros ao passar do tempo, por isso que aqui no A.N sempre quando vamos fazer um novo layout, nós fazemos em um blog teste, depois formatamos o layout do A.N atual e colocamos o do blog testes no lugar, assim evitando estar com problemas no script e talz, pois antes usávamos o mesmo layout sempre para mudar o layout no A.N mesmo, aí dava esses errinhos, alguns efeitos não funcionavam e talz...

      Excluir
  8. Que menu dahora manol ueuhehueuhe viciei em passar o mouse em cima e.e

    #Bezoos~~> Keepthisdream.blogspot.com

    ResponderExcluir
  9. Nooossa, que menu lindo demais *o*
    cr4zy-world.blogspot.com

    ResponderExcluir
  10. Que menu Lindo *OOOOOOOO*
    Aceito sim a afiliação ^^
    Coloquei lá, quando me colocar aqui é só avisar ^^

    KeepThisDream.blogspot.com

    ResponderExcluir