• Tutoriais

    • Mini Menus

    dezembro 12, 2017 Roberta
    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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF8mll2MVBpqtcWo-Y7V64RwmGDrcbcnykH8cWrMKokUqKztnHpldnqpoJAfYfxcpg6l8L-brNbNYOZMvvV20dmEMjrlL50Y8RSihPt_KRhMrYUn0HSEiU2r1il9aGhsuZL7a0wZO2v-x4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-HImYgDr2maQlUBxuinVXFWVRn_6dsXPvy9V8_IoHEtH97ky34UpW5KQmRLwSJ_5LqU83EaLQZdtDQacpGnAhKzDrZ6tjfNG3n5_YgLk6xPGK0x9M6RGC4DGIUi98CeTj9ekPGZ5UlJe/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqNFsC_2e990e67slD96O-bOtF4KdZkK7nwEiBIbmSNHsFaS-c_4xpsAd3Ggxwa3kRzvbbFHJr4K5idv-xOAkaVwxWLW0glv5hGpT-btQ00lrMDcIIVG5wpNiWR1laj48gJDPVRUtOcxO/s88/88-74-c.gif') no-repeat bottom right;
width:88px;
height: 31px;
}

.morango:focus {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO_02JQu6Jbh1fE-RYhn3eNCvteJ1g0Rqqt0ypQrQ5z9pbTGjRE5HRTM98EHlCyA4l4CXECkbB8ySkGmV0syCal6DBppclTAOTIQrKUFaEzSFTFSCESv0NGWoeG7ydCI5zP4WbIoVyqa2j/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7fIQZy2b9gpw8aGyi0mfrVy83cXe0Hzs-1VDFmw0TnUdnbo0VrjA3sRzr7pnI3tWO_sGz_V35gd1b5g_eF-neeojRoRXl6u6xN3de6rEIm88eaDd8D8jYNJk5w65WbthWc9tvgPoT1mqN/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.



    Talvez vc goste:

    Postar um comentário

    10 Comentários

    1. Roberta15 dezembro

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

      ResponderExcluir
    2. Gih Almeida ✿16 dezembro

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

      ResponderExcluir
      Respostas
      1. Roberta16 dezembro

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

        Excluir
    3. Gih Almeida ✿17 dezembro

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

      ResponderExcluir
    4. Gih Almeida ✿17 dezembro

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

      ResponderExcluir
      Respostas
      1. Roberta18 dezembro

        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. Gih Almeida ✿18 dezembro

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

        Excluir
    5. L a l á19 dezembro

      Por favorzinho Roberta traz mais mini menus!!!!!!

      ResponderExcluir
      Respostas
      1. Roberta29 dezembro

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

        Excluir
    6. Cristiano Lapis27 novembro

      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

    © Copyright , Reino Kawaii. All rights Reserved. | ThemeDaddy Best Blogger Themes

    up