Menu Tooltip
Para quem não sabe, menus “tooltip” são aqueles menus que quando você passa o mouse por cima do botão ele mostra tipo uma plaquinha com alguma informação sobre o link. O estilo de menu tooltip que eu estarei disponibilizando neste post é este aqui: clique para ver o preview.
Lembre-se:
Dê like ou reblogue se usar;
Pode modificar o que for necessário;
Não precisa creditar se usar, só não remova meus créditos do código.
Estrutura:
Para pegar o código do menu clique aqui: Menu Tooltip. Copie o código e cole-o no HTML do seu theme, no lugar onde você quer que o menu apareça.
OBS: Se você entende muito pouco -- ou nada -- de HTML e não sabe como fazer para o menu ficar no lugar que você quer do seu theme, você vai precisar pedir ajuda a alguém que entenda de HTML e possa te explicar como fazer isso. Você pode me pedir ajuda através da ask, se precisar.
Personalizando a estrutura do menu:
Esse código que eu acabei de te passar possui 5 botões, eles estão separados por comentários indicando que botão eles são, dessa forma:
<!-- botao4 --> <a href="LINK_DO_BOTAO"> CONTEÚDO_DO_BOTAO <span> <u>TÍTULO_DO_BOTAO</u> </span> </a> <!-- botao4 -->
Repare que no código de cada botão tem umas coisas escritas em caixa alta (letras maiúsculas), tudo o que estiver em caixa alta ali é o que deve ser substituído pelo que você quer. Primeiro você deve colocar o link do botão, depois o que você quer que apareça no botão e por último a mensagem que aparecerá no tooltip do menu. Exemplo:
<!-- botao1 --> <a href="http://anyhs-themes.tumblr.com"> Home <span> <u>Página inicial</u> </span> </a> <!-- botao1 -->
Você pode remover botões que não for usar do código, para isso basta apagar o código do botão que você não quer. E para adicionar mais botões basta copiar o código de um dos botões e colar logo abaixo dele. Seu menu tooltip pode ter quantos botões você quiser.
Estilo:
Agora vamos para o código CSS (o estilo) do menu. Esse código deve ser colado antes de </style> no HTML do seu theme.
Dica: Para ficar mais fácil de achar a tag </style> clique em qualquer lugar do HTML do seu theme, em seguida aperte CTRL+F e pesquise por “</style>”.
CSS do menu:
/** MENU TOOLTIP CODE BY www.anyhs-themes.tumblr.com **/ #anyhs_menu_tooltip {width: 515px; text-align: center;} #anyhs_menu_tooltip a {display: inline-block; position: relative; text-decoration: none; padding: 10px; width: 80px; font-size: 11px; text-align: center; margin: 1px -2px; transition: .5s; background: #32b38c; /** cor do fundo do botão **/ color: #fff; /** cor da fonte do botão **/ } #anyhs_menu_tooltip a span {position: absolute; width: 100%; left: 0px; top: 100%;} #anyhs_menu_tooltip a:hover {letter-spacing: 2px;} #anyhs_menu_tooltip a span u {text-decoration: none; padding: 5px; margin: 0px auto; display: table; position: relative; opacity: 0; transition: .5s; transform: scale(0.5); border-radius: 3px; font-size: 10px; z-index: 8; background: #d7787b; /** cor do fundo do tooltip **/ color: #fff; /** cor da fonte do tooltip **/ } #anyhs_menu_tooltip a span u:before {content: ""; border: 0px solid transparent; border-width: 5px; position: absolute; bottom: 100%; left: 40%; border-bottom-color: #d7787b; /** cor da setinha do tooltip **/ } #anyhs_menu_tooltip a:hover span u {opacity: 1; transform: scale(1.0); margin-top: 10px; letter-spacing: 0px;} /** MENU TOOLTIP CODE BY www.anyhs-themes.tumblr.com **/
Personalizando o estilo do menu:
Se você sabe CSS: você pode fazer as modificações que quiser no estilo do menu e você não precisa nem continuar lendo este tutorial porque agora eu só vou explicar como estilizar o menu pra quem não sabe CSS.
Se você não sabe CSS: agora eu vou explicar como mudar as cores do menu. Bom, no código CSS do menu eu deixei alguns comentários indicando onde você deve inserir as cores. Antes dos comentários no código tem um ponto vírgula (;) e antes deste ponto e vírgula tem o código da cor atual, você só precisa substituir o código da cor atual pelo código da cor que você quer.
Se você não sabe sobre cores em HTML leia este tutorial aqui. Nesse tutorial você irá aprender como saber o código hexadecimal de uma cor.
E é isso. Não vou ensinar mais opções de personalização porque seria muita coisa, mas se você quiser mais opções sem ter que fazer um curso completo de CSS eu te recomendo pesquisar sobre os seguintes códigos CSS: border, border-radius, box-shadow, text-shadow, padding, letter-spacing, font-weight, font-style, text-decoration. São códigos que te permitem colocar borda, sombra e outras coisas em elementos do HTML... Eu super indico o site W3Schools, porém ele é todo em inglês e o tradutor dele é do Google Tradutor, ou seja, não é muito bom. Mas se você der uma pesquisada você consegue encontrar outros sites que também ensinam CSS e que são em português.
Se tiver sido útil, dê like ou reblogue
Dúvidas? Entre em contato comigo por aqui
