Menu complete

Ooi gente!

Como estão? Eu estou muito bem, minhas aulas voltam em uma semana, e eu estou um tanto quanto ansiosa... Acho que vou precisar de alguém para me ajudar, fato então se você quer entrar aqui no blog, é só me avisar, não precisa preencher nada. Talvez eu convide alguém, ainda não tenho certeza.

Hoje eu trouxe um menu para vocês. Talvez já exista algum menu parecido, mas eu gostei bastante da ideia dele. Ele fica em oval e depois se "separa". Eu recomendo que seja usado com 4, 8, 16 links, ou personalizado, porque a proposta dele não funciona com outros números. Para visualizá-lo, clique aqui, é o gadget "Menu Complete".

Primeiro, cole esse código acima de ]]></b:skin>:

#complete { -moz-border-radius-topleft: 75px; -moz-border-radius-topright:75px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-top-left-radius:75px; -webkit-border-top-right-radius:75px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; padding: 5px; background-color: rgba(135, 0, 126, 1); background: rgba(135, 0, 126, 1); color: rgba(255, 255, 255, 1); transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; text-align: center; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 6px; width: 100px; float: left; height: 18px; } #complete:hover { transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; -moz-border-radius-topleft: 75px; -moz-border-radius-topright:75px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:75px; -webkit-border-top-right-radius:75px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; background-color: rgba(0, 0, 44, 1); background: rgba(0, 0, 44, 1); text-shadow:1px 0px 11px #ffffff;} #completa { -moz-border-radius-topleft: 0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; padding: 5px; background-color: rgba(135, 0, 126, 1); background: rgba(135, 0, 126, 1); transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; text-align: center; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 6px; width: 100px; float: left; color: rgba(255, 255, 255, 0.9); height: 18px; } #completa:hover { -moz-border-radius-topleft: 75px; -moz-border-radius-topright:75px; -moz-border-radius-bottomleft:75px; -moz-border-radius-bottomright:75px; -webkit-border-top-left-radius:75px; -webkit-border-top-right-radius:75px; -webkit-border-bottom-left-radius:75px; -webkit-border-bottom-right-radius:75px; border-top-left-radius:75px; border-top-right-radius:75px; border-bottom-left-radius:75px; border-bottom-right-radius:75px; padding: 5px; background-color: rgba(0, 0, 44, 1); background: rgba(0, 0, 44, 1); text-shadow:1px 0px 11px #ffffff; transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; }

O código é bem extenso, e está meio confuso, portanto preste atenção na hora de mudar as cores.

As linhas background-color: e background: se referem ao fundo. Eu estou usando uma cor RGB, você pode usar uma, ou mudar com uma tabela de cores como essa.

#complete e #complete:hover correspondem à primeira linha de links, enquanto #completa e #completa:hover correspondem à segunda linha.

Para usar, cole o código abaixo em um gadget HTML/JavaScript:

<a href="link da página" id="complete">Nome do Link1</a>
<a href="link da página" id="complete">Nome do Link2</a>
<a href="link da página" id="completa">Nome do Link3</a>
<a href="link da página" id="completa">Nome do Link4</a>

Nesse código já estão os 4 links, é só mudar. 

Espero que tenham gostado do menu, para usar apenas creditem, e não repassem.

Até mais, beijinhos!