dezembro 12, 2017

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://1.bp.blogspot.com/-jAw1mh33SJ4/WjBrpZ6fw5I/AAAAAAAARg4/C_xKs79DjMYprPKxvmXwNfYqwkZlR_AdwCLcBGAs/s1600/snow.png') no-repeat 0 0,
 url('https://3.bp.blogspot.com/-uqQCHZFKXyY/WjBqxJIwlHI/AAAAAAAARgo/5I14pV01FTwMqaxhYMbhVhbCvh73WF4OACLcBGAs/s1600/6.gif') no-repeat 55% 0,
 url('https://1.bp.blogspot.com/-r544lg_GhIw/WjBru7n9ElI/AAAAAAAARg8/ROHuRIyumuI6IN7DZXTv830EW4m-QcrsQCLcBGAs/s1600/snow2.png') no-repeat 100% 0;
 
}
.mini:hover {
 background: #C33 url('https://1.bp.blogspot.com/-naroNkpNNuU/WjBqxe1aTaI/AAAAAAAARgs/UDoZBWxLUR02srm-NcA7pxhyc8B2O7uEQCLcBGAs/s1600/7.gif') no-repeat bottom right;
width:88px;
height: 31px;
bottom: 0;
border-radius: 5px 5px 5px 5px;
}
.mini:focus {
background: url('https://lh3.googleusercontent.com/-PqhA2ARoBmI/TwHTtsNXuII/AAAAAAAAD3o/7tLkP8LmCHE/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://lh6.googleusercontent.com/-Uutd160QDc0/TwHTuWoXG-I/AAAAAAAAD4I/StYuAlaUR7o/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://4.bp.blogspot.com/-PHY_txW0d6I/WjBqxdSwqkI/AAAAAAAARgw/ecuUQO5P9_gxjuSJfdHDduGrvE_x8K48gCLcBGAs/s1600/1.png') no-repeat 0 0,
 url('https://4.bp.blogspot.com/-PHY_txW0d6I/WjBqxdSwqkI/AAAAAAAARgw/ecuUQO5P9_gxjuSJfdHDduGrvE_x8K48gCLcBGAs/s1600/1.png') no-repeat 100% 0;
 
}
.bunny:hover {
 background: url('https://lh4.googleusercontent.com/-DM4lhGYN5zA/TwHTuhf0pKI/AAAAAAAAD4U/p5SEyKY-QBg/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://lh4.googleusercontent.com/-gCU1Ut8YtYk/TwHTsoa001I/AAAAAAAAD3U/rANfyaGtEM0/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://lh5.googleusercontent.com/-GeU6p0tdR_Y/TwHTrfhqYVI/AAAAAAAAD1o/j_l3gEV8RaI/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://lh3.googleusercontent.com/-tpYaIfdNqiQ/TwHTribjBiI/AAAAAAAAD14/88mxVnSR5Mo/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.

9 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

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 - Google+ - Deviantart

I it