Menu Deslizante Fofo Acima do Cabeçalho

Olá, bem-vindos sempre! E como anda a Páscoa? Ganharam muitos ovos de chocolate? Se ainda não ganharam, não fiquem triste porque eu tenho certeza (e desejo muito) que vão ganhar, mesmo que não seja chocolate, mas coisas doces para sua vida sempre acontecem!
Eu não posso reclamar porque ganhei até ninho de chocolate rsrsrs...sério, minha mãe me deu um ninho de chocolate; é a metade de um ovo todo decorado com um montão de bombons em forma de ovinhos, com uma falsa palha coloridinha, lindo, trufado, que comi quase com a embalagem rsrsrs...por isso não tirei foto ¬¬ Adoro as criações da amiga da mamãe, dona de uma padaria em que encontro os melhores cupcakes, bolos, docinhos e coisinhas gostosas :3
Mas, vamos a postagem, que é um tutorial (aproveitando o feriadão neh).
Vou mostrar para vocês como fazer um menu super fofo, igual àquele que está no layout do template que disponibilizei (veja aqui como fica). Ele é muito bom porque fica escondido acima do cabeçalho (1ª imagem), permite uma economia de espaço no blog já que tem 3 colunas, aceita HTML e suas imagens e palavras podem ser modificadas ao gosto de cada um. Aprendi a fazer no Ciudad Blogger. (Clique nas imagens para ampliar)
Menu Aberto
Vamos lá! Acesse a área de edição de HTML do seu template e...
1. A primeira coisa a ser feita é adicionar este código abaixo de <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir menu&quot; to &quot;Fechar menu&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>

2. Agora, acima de ]]></b:skin>, vamos adicionar o código que personaliza o menu, de modo que fique bem fofinho. Notem que eu já deixei tudo prontinho, com gifs e cores pré-definidas, como no template que disponibilizei; caso queira alterar fique a vontade, basta substituir imagens, definir novos tamanhos para novas imagens, escolher outros códigos de cores...:
/* Top Sliding Menu
----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQefgxR7XqFtYf1ZKEX5RuOsNvuCNjzq_ZO9Dpj2hr4s5UAntpoacwrfViBu9fvSvL-Cl0DGZQ3aHJrfWC1fAEMmOMyUR0PtfkiHZp0Iuz2abO2Xjj-YuoknXGQUAaDaHjo4fdocTp79io/s226/dv%252520%25252810%252529.gif) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: #db7093;
font-size: 16px;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQefgxR7XqFtYf1ZKEX5RuOsNvuCNjzq_ZO9Dpj2hr4s5UAntpoacwrfViBu9fvSvL-Cl0DGZQ3aHJrfWC1fAEMmOMyUR0PtfkiHZp0Iuz2abO2Xjj-YuoknXGQUAaDaHjo4fdocTp79io/s226/dv%252520%25252810%252529.gif) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(http://i1121.photobucket.com/albums/l505/saycute/Gifs/New%20Gifs/6z2H.gif) no-repeat left 0;
height: 201px;
width: 80px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHBkoJgR1dnJkQR7nR-O2nDROHV2wEdvnlTZnCEjAviJ2Lyjo3rE46gldJrsNLiok8NZ-D9BZfCTVPMrJDZzbDuGqAwg86TRkcPxzZVEyLaDQbH7AZO6mqRy3-tjmWO93LliZ2yTWh/s1600/sparklelink.gif) repeat-x 0 0;
}

.tab ul.login li a {color: #db7093;}
.tab ul.login li a:hover {color: #ff1493;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUorrIieWqnmMvPCK_2zU_jO-PaXzqi0QFqgOdnCfq6clQQN-TRbhYXIteJzmTY2wKtVsqLM16Q_5JiCFIPf6c9bM4t3WS5Lq_gwEnKE9BRo007kgL0tGYaAKF4wIed4fy2nRt_IQUwts/s128/1659.gif) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOxTtTQhb9rkXTzxujQZRGQ9SmV2PVflw3fLg5vcvHzrhPEsOjR5mFnwwOXNRcgc8ccZ521DoX8_Z48wyF_LkvaNM8mailMs6wBvHqWOAsVH_lJ0V91PkILntE0HUKCE-1Tx_YWJnbEQ/s1600/87238.gif) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoo_dOaJNbzEE_FPedd1aXcHzwaoO7CdFrIrfPrY7VhpiWcD320ts7aBVt88-d8yliBoJaX6hfAoCQpo5JEv8uvyQnxJ_BlwpQrzDKOyETKiuKvMs5Va6dULpRlc8vqzawdEeVaRx5CO2/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJ8sjN_hMDreVDwjlb406tyRDbMwz8I6AX1wHDdUyK0GG6xxSrbuqN0ZkebNDMb72DrtA_A5z4J9PqSoTT2mGafNkNBjRkSnZuK3Hp3NJXqREVmp0Tzsf84OAo6_2CrnKnOuqwRpyNY68/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 406px; /* Alto del slide */
color: #c71585;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgReM5fRlxdyupCt55E-ueicQUGkY2ad4hgsRuTBC2qLhG4_z-BCAtkmCXCp0brbAw5FRr_J5s-hTKy8ig7Njlpp3UPTOJYkDC5NbFeAU2Qn9DUGXxuJPJrPvQmup31hKe8fWQ51WxzAZb/s640/222.png);
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #ff1493;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px dotted #ffffff;
}
#panel .content .right {
border-right: 1px dotted #ffffff;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRslGQd0xamdoEhvnnvdFjhHbLk9VhzpLI418UtTAeQmqF3FjjEph-gHhCExXF19j5DT2wHJILy3Cz1ih0H1z-OsAQN3aa4e_8eZCKe4L7N6Dq1Reh4UZorBiON13sEhNULTxG9HOf/s1600/bullet07.gif) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #c71585;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}
3. Para finalizar, vamos adicionar a parte escrita, conteúdo do nosso menu. Essa parte será adicionada depois de <body> ou <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>:
<!-- Inicio top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>

<!-- Primeira secao -->
<div class='left' style='width:240px !important'>

<h4>Olá! Seja bem-vindo ao meu blog!</h4>
<p>Aqui você dá as boas vindas aos seus leitores, fala sobre você e seu blog, contato:</p>

<div align='center'>
E aqui você deixa os links de suas redes sociais, com ícones de sua preferência:
 <a href='link'><img src='URL DO ÍCONE' style='padding:25px 5px;' width='100'/></a>
<a href='link2'><img src='URL DO ÍCONE' style='padding:25px 5px;' width='100'/></a>
</div>

</div>

<!-- Segunda secao -->
<div class='left' style='width:320px !important'>
<h4>Categorias</h4>

<div id='slide-menu'>
<ul>
<li><a href='http://kawaiilays.blogspot.com.br/link1'>Categoria 1</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link2'>Categoria 2</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link3'>Categoria 3</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link4'>Categoria 4</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='http://kawaiilays.blogspot.com.br/link5'>Categoria 5</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link6'>Categoria 6</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link7'>Categoria 7</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link8'>Categoria 8</a></li>
</ul>
</div>
</div>


<!-- Terceira secao -->
<div class='left right'>

<h4>Menu</h4>
<p>Faça um tour pelo blog ;3</p>

<div align='center'>
<div id='nav'><a href='LINK 1' title='Título'>Título 1</a> &#8211; Texto Opcional</div>
<div id='nav2'><a href='LINK 2' title='Título'>Título 2</a> &#8211; Texto Opcional</div>
<div id='nav3'><a href='LINK 3' title='Título'>Título 3</a> &#8211; Texto Opcional</div>
<div id='nav4'><a href='LINK 4' title='Título'>Título 4</a> &#8211; Texto Opcional</div>
<div id='nav5'><a href='LINK 5' title='Título'>Título 5</a> &#8211; Texto Opcional</div>
<div id='nav6'><a href='LINK 6' title='Título'>Título 6</a> &#8211; Texto Opcional</div>
</div>

</div>
</div>
</div>


<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>WELCOME!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Abrir Menu</a>
<a class='close' href='#' id='close' style='display: none;'>Fechar Menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fim top sliding menu -->

Altere ao seu gosto; você pode substituir o que há em cada seção. Na terceira seção há o código do menu colorido e para que ele funcione você tem que ter adicionado ele ao HTML do seu, como mostrei neste post aqui.
É isso. Beijinhus<3

22 Comments

  1. Pri07 abril

    Ro muuuuito obrigada...
    amei . bjsss

    ResponderExcluir
    Respostas
    1. Roberta :308 abril

      De nada Pri :D
      Fico super feliz que tenha gostado!!
      Beijus<3

      Excluir
  2. Adrielle ♥07 abril

    Oi amiga, tudo bem? saudades :3 bom, tenho o meu novo blog é http://adriellekawaii.blogspot.com.br/
    segue lá? xoxo^^

    ResponderExcluir
    Respostas
    1. Roberta :308 abril

      Ok Adri ^^
      Assim que puder passo lá tah bom;
      Boa sorte com o blog!!!
      Beijus<3

      Excluir
  3. ♥[Mary]♥07 abril

    Eu amei!!! eu vou intentarlo en meu blog :D

    você não tem mais layouts kawaii? para baixar

    Kisses~

    ResponderExcluir
    Respostas
    1. Roberta :308 abril

      Oi Mary.
      Futuramente, farei mais layouts free e disponibilizarei aqui ok?
      Beijus<3

      Excluir
  4. Dayanne08 abril

    Feliz Páscoa para você e toda sua família. E que esse dia lhe traga felicidades e muitos sorrisos.

    http://dayannediary.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Roberta :308 abril

      Obrigada Dayanne!
      Uma Páscoa muito feliz e especial para você e todos aqueles a quem vc ama e que te amam!
      Beijus<3

      Excluir
  5. Adrielle ♥08 abril

    Oi linda, tudo bem? bom, eu mudei meu blog agora ele é
    adriellekawaii.blogspot.com
    espero que siga, bjs e vc é d+ te adoro^^

    ResponderExcluir
  6. Adrielle ♥08 abril

    Ah Roberta, eu fiz o mesmo comentário, pois ele fica dando erro desculpa, bjs^^

    ResponderExcluir
  7. Beatriz Leite :309 abril

    amore,ensina a como fazer esse link brilhante que tem nesse template? POR FAVOR eu me apaixonei!

    ResponderExcluir
    Respostas
    1. Roberta :311 abril

      Que bom que gostou Beatriz ^^
      O efeito nos links é daquele tutorial que já postei aqui dos links com brilho: http://reinokawaii.blogspot.com/2011/08/tutorial-links-com-brilho.html
      Você pode substituir a imagem dos brilhinhos por qualquer uma! Aí seus links ficam com backgrounds :3
      Beijus

      Excluir
  8. Juju30 maio

    Eu gostei, mas o meu deu errado

    ResponderExcluir
  9. Roberta31 maio

    Juju, que estranho; esse tutorial quase não dá erro; já usei ele aqui no blog e no template kawaii free que disponibilizo, que está funcionando.
    Você fez backup do seu template? Se fez, basta restaurar, ou então retire os códigos e/ou tente novamente.
    Caso não dê certo não se preocupe; posteriormente vou postar mais tutoriais para menu ok?
    Beijus<3

    ResponderExcluir
  10. Rina24 junho

    como mudar a cor do wellcome e abrir menu?

    ResponderExcluir
  11. Roberta24 junho

    :v:Rockii:Dá uma olhadinha no segundo código, nesse trecho:
    -----------------------------------------------
    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 150px;
    color: #db7093;
    ---------------------------------------------
    E nesse trecho:
    ---------------------------------------------
    .tab ul.login li a {color: #db7093;}
    .tab ul.login li a:hover {color: #ff1493;}
    .tab .sep {color:#414141}
    ----------------------------------------------

    Onde está escrito color:#código da cor; basta substituir pelos códigos das cores que preferir.
    Espero ter ajudado vc ^^
    Bjus

    ResponderExcluir
  12. Carol Siqueira24 agosto

    Não deu certo!

    ResponderExcluir
  13. Roberta24 agosto

    Não?! Fiz esse tutorial tantas vezes e não deu problemas; tem até um template free que disponibilizei e que tem esse menu funcionando...me diz o que deu errado Ana para eu poder ajudá-la.
    Beijinhus<3

    ResponderExcluir
  14. Carol Siqueira09 setembro

    Agora deu certo :l:

    ResponderExcluir
  15. ~ Kelly-nee ~15 novembro

    É muito lindo mas eu tenho uma dúvida :
    Como colocamos um background nele como você colocou no template free kawaii ??

    ResponderExcluir
    Respostas
    1. Roberta16 novembro

      O background já está incluído; esse é o menu daquele template ^^

      Excluir
  16. ✖~ Nakashita Beel10 dezembro

    legal ><

    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