Menu - Circulo

CATEGORIA: MENU HTML & CSS
NÍVEL: INICIANTE
REQUER SABER: Editar o HTML do seu theme, para que saia o resultado esperado.

Olá gente, vou ensinar a fazer um menu em forma de círculo, totalmente modificável.
Bom, primeiro, cole o código abaixo antes da tag </head>.

<style type="text/css"> .nav1{ width:40px;height:40px;border-radius:40px 40px 40px 40px;background:#b9d5d6;-webkit-transition-duration: .90s;color:#000000; font-size: 10px; font-family:tahoma; color: #636363;float:left;padding: 4px; letter-spacing:0px; text-align:center;margin:1px ;line-height: 40px; } .nav1:hover { width:40px;height:40px;border-radius:40px 40px 40px 40px;background:#43A7AB;-webkit-transition-duration: .90s;color:#000000; } </style>

Agora, procure onde fica o menu do seu site no html, o menu sempre começa pela tag de link (<a href="LINK"> ), quando achar, digite antes do fechamento da tag (>) class="nav1" em todos os link que fizer parte do menu, ficando assim <a href="link-aqui" class="nav1">, muitos menus por aí, usam essa class, portanto, se já tiver com a parte class="nav1" , não precisa editar nada.

RESULTADO FINAL

LINK 1 LINK 2 LINK 3




DICA:
Você mudar a cor do menu, editando no css, a parte background:#cdgcor; , lembrando que são duas cores, uma de quado está normal, e outra de quando está com o mouse em cima, por isso, cuidado na hora de mudar ;)