Mini Menus

Oi... Trouxe alguns modelinhos para menus bem pequeninos usando imagens que mudam ao passar o mouse e/ou que ficam 'por cima' umas das outras, o que permite que você use em um único menu vários gifs e pngs ao mesmo tempo. Os códigos foram editados com base nesse aqui de Renny Villafranco e as imagens servem também de link-me.
Basta copiar o código do modelo que preferir e colar em um gadget HTML/Javascript no layout do seu blog.
Modelo 1

Natal Natal Natal

<style>
/*NATAL*/
 .mini {
 display: inline-block;
 -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
         box-sizing:border-box;
 min-width:88px;
 padding: 5px 3px;
 font-family: 'Delius', cursive;
 width: 88px;
 height: 31px;
 font-size: 10px;
 text-decoration: none;
 color: #FFF;
 background: url('https://lh3.googleusercontent.com/-LyWzRCivSF0/TwHTtQuAMTI/AAAAAAAAD3Y/wtzkaEhq7y0/s88/88-75-c.gif');
 outline: none; 
 position: relative;
 overflow: visible; /* IE9 & 10 */
 -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
      -o-transition: 500ms linear;
     transition: 500ms linear;
}

.mini::before {
 content: '';
 display: block;
 position: absolute;
 top: -10px;
 left: -3px;
 right: 0;
 height: 23px;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmH078QFWhTkd4oMnMLJ-oIq-JCt9B0putGr_Lxv1WqpxPZh694YaPlkGWsqQHPosoE5NjSm9fF25BWmKiGWq75bjio1ECrdxFQYdaHdHH8XIwpz8yZyqnwsMRZOBVe66GUT_i2NUuIM/s1600/snow.png') no-repeat 0 0,
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EXKpAs1Am40hTdlFOV0L3-RC9Fc6nnWkKAOl4gvNLMYLx5A64hTKvbvX7b3jgSSct_nlDAgAG61ri5v_qK-9w8178OofnRve8wtN5livpH2ynJYvGLnllXXfOZUAhaCFGGyaubxorPU/s1600/6.gif') no-repeat 55% 0,
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp6MjMeKuxTLQhcWoAAKAekZ69WKlKFQWvSqgbLezN0yJZR4uZelrP4UT8M8ol_ePyz0AN5B7p2yvhB9P5FhW-mwbdutvlEf8LjbDG1hAUfdc9l1JjNIeSS7_kgWYsMx9GGZzl7UiQrfY/s1600/snow2.png') no-repeat 100% 0;
 
}
.mini:hover {
 background: #C33 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_M8vyVhNW-_G-kzMud9GPO1wKHFFjJ5gQEyZxUlhrLjpcmD2N0uokodl3df4C3eERE7WLc7MMJMmdSbWoxl6JeFBTjqJrAm6bC85HFIS22VrqYkPTnUiu_hDayK9l9Eun-38a6GeXcc/s1600/7.gif') no-repeat bottom right;
width:88px;
height: 31px;
bottom: 0;
border-radius: 5px 5px 5px 5px;
}
.mini:focus {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoHBLaQXNr49juA7DD3wa4K9R2ja3xcl5AfJoTiIp723iIxRvUxjTdLr7F1L7bLtuMm3gpD8CJjMlcBNNq5QWV-NIA_iH65pQV6ShKOTIZlkqnu1ZB7pETeOgeLjy8-vZgiGrFI3aesAdo/s88/88-75-e.gif');
 outline: none; /*FF*/
}
/*NATAL*/
</style>
<center>
   <a href="#" class="mini">Natal</a>
   <a href="#" class="mini">Natal</a>
   <a href="#" class="mini">Natal</a>
</center>

Modelo 2

Bunny Bunny Bunny
 <style>
/*BUNNY*/
 .bunny {
 display: inline-block;
 -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
         box-sizing:border-box;
 min-width:88px;
 padding: 10px 13px;
 font-family: 'Delius';
 width: 88px;
 height: 31px;
 font-size: 10px;
 text-decoration: none;
 text-align: right;
 color: burlywood;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBsc3motOB4bN8a4a_HqSDqd_zSmgUNvdbUPF42XR0P3U5PdkLWSxjRcuU5wIJARdOjSZrw_KDzj7EUlrOdZ0RGVc5NNE9xYsHZY0P0CulaqXmZFgU1qT2NWWlpMmC8OLknqFEarcO8D6p/s88/88-77-a.gif');
 outline: none; 
 position: relative;
 overflow: visible; /* IE9 & 10 */
 -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
      -o-transition: 500ms linear;
     transition: 500ms linear;
}

.bunny::before {
 content: '';
 display: block;
 position: absolute;
 top: -10px;
 left: -3px;
 right: 0;
 height: 23px;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAaKTy-EZDt3BWuaz_yEngmGqTSlgxmQXdGAsXG3RDCinXyGxn53fellCH8QjubaXQazTeKPYdQyj4tIHdIWEaUWs9iytZ1ILFa2ThRvz0-059vcnx1JPeXDZz79hNBFOOeQ1irNszqN4/s1600/1.png') no-repeat 0 0,
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAaKTy-EZDt3BWuaz_yEngmGqTSlgxmQXdGAsXG3RDCinXyGxn53fellCH8QjubaXQazTeKPYdQyj4tIHdIWEaUWs9iytZ1ILFa2ThRvz0-059vcnx1JPeXDZz79hNBFOOeQ1irNszqN4/s1600/1.png') no-repeat 100% 0;
 
}
.bunny:hover {
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcD5QyPnNGurofg8P5Po6BdPVgv-WS5ZvA56mtNL0j_HlodcDBeqZ1XGOD73xP3OAfqRTS3dmuKiXSqKPNWRRFm7Q8v-gPh-3SaC5ojPbsaydL4nxAg82D0iDF81-Nx6UYqaKLbNp9TWPt/s88/88-77-b.gif') no-repeat bottom right;
width:88px;
height: 31px;
}

.bunny:focus {
background: url('https://lh4.googleusercontent.com/-215vE-RytwQ/TwHTvP0qloI/AAAAAAAAD4w/pfHWo4fu2Ac/s88/88-77-d.gif');
 outline: none; /*FF*/
}
/*BUNNY*/
</style>
<center>
   <a href="#" class="bunny">Bunny</a>
   <a href="#" class="bunny">Bunny</a>
   <a href="#" class="bunny">Bunny</a>
</center> 

Modelo 3

Morango Morango Morango
 <style>
/*Morango*/
 .morango {
 display: inline-block;
 -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
         box-sizing:border-box;
 min-width:88px;
 padding: 10px 13px;
 font-family: 'Delius';
 width: 88px;
 height: 31px;
 font-size: 10px;
 text-decoration: none;
 text-align: left;
 color: #fff;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ziK4PsYKmRZsebq74ltU4WaBdjhW2FPsyxEPrNc6bML6UmLefhbBX2iuLWy4SKYMaCCMMjac__8ZyTUZ2aYQv7c9eGUNeviay8usYZJ3A9NodDUUVuYi8SQGR68zPh96ICq-q6LnbZSY/s88/88-74-a.gif');
 outline: none; 
 position: relative;
 overflow: visible; /* IE9 & 10 */
 -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
      -o-transition: 500ms linear;
     transition: 500ms linear;
}

.morango:hover {
 background: url('https://lh5.googleusercontent.com/--r7SLx7COYQ/TwHTtDKfLNI/AAAAAAAAD3M/p6bySpDdyAY/s88/88-74-c.gif') no-repeat bottom right;
width:88px;
height: 31px;
}

.morango:focus {
background: url('https://lh6.googleusercontent.com/-v2GxA8SQRNU/TwHTtJMg_kI/AAAAAAAAD3I/b0Fg9cLZXiE/s88/88-74-d.gif');
 outline: none; /*FF*/
}
/*Morango*/
</style>
<center>
   <a href="#" class="morango">Morango</a>
   <a href="#" class="morango">Morango</a>
   <a href="#" class="morango">Morango</a>
</center> 

Modelo 4

Delicado Delicado Delicado
 <style>
/*lacinho*/
 .lacinho {
 display: inline-block;
 -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
         box-sizing:border-box;
 min-width:88px;
 padding: 10px 13px;
 font-family: 'Tahoma';
 width: 88px;
 height: 31px;
 font-size: 10px;
 text-decoration: none;
 text-align: center;
 color: #ffa8a8;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf-e67fox-3Mkl5UN3j0xtclbnM918vhNml6o-2nbKHSs0j0FPgVAjnZ-Wgne_Tmjo76gfeJtVPCtDsnUlfVmxSmsdbwEH52R3b1GUvljqkYqAEUsB2S1hUiqxKPtlfziGUFzSYbQYSGgV/s88/88-66-a.gif');
 outline: none; 
 position: relative;
 overflow: visible; /* IE9 & 10 */
 -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
      -o-transition: 500ms linear;
     transition: 500ms linear;
}

.lacinho:hover {
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFi6D746YVtWm8Pv9wXgOtwUvhVRtR6xWF2C87jnTnGn8Kd6Hsza4NuHxCWCgnPbfRU240-DNIZs3JjVL1ft9R4BevZQX0oOURaXr8DVSeoQQ6Pq3af0sH8x4Jt5o1uBVTFQ2L1qAADBcy/s88/88-66-b.gif') no-repeat bottom right;
width:88px;
height: 31px;
}

.lacinho:focus {
background: url('https://lh5.googleusercontent.com/-2OLjFx6dPxg/TwHTr0ugzLI/AAAAAAAAD2M/8wiGBt8nzBc/s88/88-66-e.gif');
 outline: none; /*FF*/
}
/*lacinho*/
</style>
<center>
   <a href="#" class="lacinho">Delicado</a>
   <a href="#" class="lacinho">Delicado</a>
   <a href="#" class="lacinho">Delicado</a>
</center> 

Vocês podem visualizá-los melhor aqui. Talvez seja preciso editar padding para posicionar os textos, ou as larguras/alturas (width/height) caso mude as imagens (backgrounds), e substituir os textos (morango, bunny, natal, delicado) por nomes de links (as "#"), tipos e tamanhos de fontes (font-family/font-size)... espero que gostem.






Postar um comentário

10 Comentários

  1. Funcionou!!! https://2.bp.blogspot.com/-a7o3ZDKa9Fc/WjQgwnKmLvI/AAAAAAAARjA/ZzG1ObU3wIQbgcRC7dSrm0Yqsd-fJim_wCLcBGAs/s1600/emoticon5.gif

    ResponderExcluir
  2. Parabéns, blog super fofo.Adorável. +1 seguidora! <3
    https://girlygeekworld.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigada e bem vinda!! https://3.bp.blogspot.com/-NhUnhRtzpLw/WjQgwFY4rJI/AAAAAAAARi4/5TJ3SqD-itQf6fW5VrEN-wYkuetwnVvYACLcBGAs/s1600/emoticon2.gif

      Excluir
  3. Olá, Roberta. Boa tarde e 'de nada'. Eu queria a sua ajuda. Como posso mudar o link desses menus?

    ResponderExcluir
  4. Queria colocar o link do seu blog em um desses menus como meus favoritos!

    ResponderExcluir
    Respostas
    1. Obrigada!!!!♥
      Para colocar links, vá aos trechos como esses
      href="#" class="mini">Natal
      href="#" class="morango">Morango
      href="#" class="lacinho">Delicado
      href="#" class="bunny">Bunny
      Aí troque "#" pelo link e Natal/delicado/morango/bunny pelo nome do link, assim:
      href="http://reinokawaii.blogspot.com" class="mini">Reino Kawaii

      Excluir
    2. Obrigada, muiito obrigada!https://3.bp.blogspot.com/-NhUnhRtzpLw/WjQgwFY4rJI/AAAAAAAARi4/5TJ3SqD-itQf6fW5VrEN-wYkuetwnVvYACLcBGAs/s1600/emoticon2.gif

      Excluir
  5. Por favorzinho Roberta traz mais mini menus!!!!!!

    ResponderExcluir
    Respostas
    1. Sim, sugestão guardada com carinhohttps://3.bp.blogspot.com/-NhUnhRtzpLw/WjQgwFY4rJI/AAAAAAAARi4/5TJ3SqD-itQf6fW5VrEN-wYkuetwnVvYACLcBGAs/s1600/emoticon2.gif

      Excluir
  6. Está muito bem programado, parabéns ^^

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up